需求：用的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固定思维太可怕，以后遇到类似问题还是要多思考啊，哈哈哈
- 还没有人评论，欢迎说说您的想法！
客服
