Highcharts 座標軸標籤點選事件

摘要： 通過 API 上的例子為軸標籤新增連結 我們知道可以給座標軸標籤加上跳轉連結，但是這種直接跳轉往往無法滿足需求，我們希望這個點選行為更可控（實現自己想要的互動）。由於目前 Highcharts 並沒有提供對應事件配置項，所以這裡簡單說明一下如何自己實現座標軸點選事件。 方法1...

通過 API 上的例子ofollow,noindex">為軸標籤新增連結 我們知道可以給座標軸標籤加上跳轉連結，但是這種直接跳轉往往無法滿足需求，我們希望這個點選行為更可控（實現自己想要的互動）。由於目前 Highcharts 並沒有提供對應事件配置項，所以這裡簡單說明一下如何自己實現座標軸點選事件。

方法1：將跳轉連結改為執行函式

關鍵程式碼是：

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);
// 通過 index 和 category 我們就可以根據需求實現自己的想要的互動效果了
}

線上試一試

方法2：給座標軸標籤加事件

關鍵程式碼是：

Highcharts.chart('container', {
// 配置
}, function(chart) { // 圖表渲染完畢後的回撥函式
let xAxis = chart.xAxis[0];

// 給座標的 labelGroup 新增點選事件
Highcharts.addEvent(xAxis.labelGroup.element, 'click', function(e) {
// 將原生事件新增上 chartX 和 chartY 值
e = chart.pointer.normalize(e);
// 根據點選事件的位置計算出所在座標軸的值
let index = Math.ceil(xAxis.toValue(e.chartX)), // 下標
category = xAxis.categories[index];// 分類
});
});

線上試一試

簡單說明：

1. Highcharts.addEvent ： Highcharts 封裝的給 DOM 新增事件函式
2. xAxis.labelGroup.element：座標軸資料標籤對應的 SVG DOM，可以通過 console.log(xAixs) 來檢視
3. pointer.normalize ：原生事件物件擴充套件函式，給該物件加上chartX 和chartY 屬性
4. xAxis.toValue ：將畫素值轉換成座標軸值，對應的方向函式是：Pixels" target="_blank" rel="nofollow,noindex">toPixels