通过 API 上的例子 为轴标签添加链接 我们知道可以给坐标轴标签加上跳转链接，但是这种直接跳转往往无法满足需求，我们希望这个点击行为更可控（实现自己想要的交互）。由于目前 Highcharts 并没有提供对应事件配置项，所以这里简单说明一下如何自己实现坐标轴点击事件。
方法1：将跳转链接改为执行函数
关键代码是：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| let chart = Highcharts.chart('container', {
xAxis: {
labels: {
formatter: function() {
return '<a href="javascript: doSomething(\''+ this.value + '\')">'
+ this.value + '</a>';
}
}
}
});
function doSomething(category) {
let index = chart.xAxis[0].categoies.indexOf(category);
}
|
在线试一试
方法2：给坐标轴标签加事件
关键代码是：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| Highcharts.chart('container', {
}, function(chart) {
let xAxis = chart.xAxis[0];
Highcharts.addEvent(xAxis.labelGroup.element, 'click', function(e) {
e = chart.pointer.normalize(e);
let index = Math.ceil(xAxis.toValue(e.chartX)),
category = xAxis.categories[index];
});
});
|
在线试一试
简单说明：
- Highcharts.addEvent： Highcharts 封装的给 DOM 添加事件函数
- xAxis.labelGroup.element：坐标轴数据标签对应的 SVG DOM，可以通过 console.log(xAixs) 来查看
- pointer.normalize：原生事件对象扩展函数，给该对象加上
chartX 和 chartY 属性 - xAxis.toValue：将像素值转换成坐标轴值，对应的反向函数是：toPixels
