需求:用的heightcharts插件,點擊曲線圖想獲得所點擊點的返回值,如圖 問題代碼: (function chart_line(){ var data={"title":["01","02","03","04","05","06","07","08","09","10","11","12"], ...
需求:用的heightcharts插件,點擊曲線圖想獲得所點擊點的返回值,如圖
問題代碼:
(function chart_line(){
var data={"title":["01","02","03","04","05","06","07","08","09","10","11","12"],"data":[10,30,50,65,98,0,0,0,80,340,70,40]};
var chart = new Highcharts.Chart('lineGraph1',{
chart: {
type: 'spline'
},
title: {
text: 'demo'
},
xAxis: {
categories: data.title
},
yAxis: {
title: {
text: ''
}
},
legend:{
enabled: false
},
credits:{
enabled: false
},
plotOptions: {
spline: {
dataLabels: {
enabled: true // 開啟數據標簽
},
enableMouseTracking: true // 關閉滑鼠跟蹤,對應的提示框、點擊事件會失效
},
series: {
cursor: 'pointer',
events: {
click: function(event) { //正常情況下在pc端和安卓上用該點擊事件就可以
document.getElementById('month').innerText =event.point.x + 1 + ‘月’;
document.getElementById('num').innerText = this.data[event.point.x].y;
},
},
}
},
series: [{
name: name,
data: data.data
}]
});
})()
該代碼實在click事件中獲取x,y值,運行時會發現在ios上第一次點擊的時候不會觸發這個click事件,第二次開始才會觸發
在heightcharts文檔幾乎試了一遍發現了point.events.mouseOver這個屬性,添加上後簡直完美達到了預想效果,以下是代碼
(function chart_line(){
var data={"title":["01","02","03","04","05","06","07","08","09","10","11","12"],"data":[10,30,50,65,98,0,0,0,80,340,70,40]};
var chart = new Highcharts.Chart('lineGraph1',{
chart: {
type: 'spline'
},
title: {
text: 'demo'
},
xAxis: {
categories: data.title
},
yAxis: {
title: {
text: ''
}
},
legend:{
enabled: false
},
credits:{
enabled: false
},
plotOptions: {
spline: {
dataLabels: {
enabled: true // 開啟數據標簽
},
enableMouseTracking: true // 關閉滑鼠跟蹤,對應的提示框、點擊事件會失效
},
series: {
cursor: 'pointer',
point:{
events:{
mouseOver: function () {
document.getElementById('month').innerText = this.x + 1 + '月';
document.getElementById('num').innerText = this.y;
}
}
},
}
},
series: [{
name: name,
data: data.data
}]
});
})()
總結:一開始的想法就是點擊以後獲取到返回值,所以一直在考慮點擊事件而忽略了其他屬性,so固定思維太可怕,以後遇到類似問題還是要多思考啊,哈哈哈