開發程序中，我們經常會碰到這樣的需求：在柱狀圖上，點擊某條柱形，呼叫相應的方法或跳轉相應的界面
接下來就詳細介紹如何實作柱狀圖的點擊事件，其中maChart是繪圖物件
一、簡單的點擊事件
myChart.on('click', function (params) {
console.log(params)
})
這樣就可以獲得每條柱形所對應的資料
若需要在每條柱形上添加額外的屬性，比如id等等，可以在series中，通過物件去定義，其中value是柱形的值
seriesData: [{value: 1, id:'...'}, {value: 2, id:'...'}, ......]
這個id同樣可以在上面的點擊事件的params中獲取到
注意：此方法雖實作了點擊，但是只限于點擊柱形中有資料的部分，而對于沒有資料的區域，點擊無效，如下圖
若要實作點擊整條柱形區域都有效，如下圖，請看第二個方法
二、整條柱形的點擊事件
myChart.getZr().on('click', params => {
let pointInPixel = [params.offsetX, params.offsetY]
if (myChart.containPixel('grid', pointInPixel)) {
let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]
console.log(xIndex)
}
})
其中，getZr()方法可以監聽到整個畫布的點擊事件，zIndex是被點擊的柱形的index
若要實作獲取id的效果，則需要拿到series的陣列，再通過index拿到對應的資料物件
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/179778.html
標籤：JavaScript
上一篇：vue實作一個評論串列
下一篇：Ajax的學習