在Highcharts条形图上,当用户单击其中一个条形图时,其他数据将通过loadDetails
函数加载到页面的其他位置。
loadDetails
通过plotOptions.series.events
:指定为图表的点击回调函数
var chart = new Highcharts.Chart({
defaultSeriesType: 'bar',
...
plotOptions: {
series: {
events: {
click: loadDetails
}
}
},
...
});
function loadDetails() {
...
}
问题是,我需要为移动设备上的touchstart
事件调用相同的回调函数。
据我所知,似乎没有任何明显的方法可以通过Highcharts API添加触摸事件处理程序:http://api.highcharts.com/highcharts#plotOptions.series.events.
有人知道如何为触摸事件添加回调函数,或者从触摸事件触发点击回调函数吗?
是的,不支持这样的东西,我建议您在这里创建创意。
我想到的唯一解决方法是使用Element.on函数将自定义事件添加到图表上存在的元素中。例如:http://jsfiddle.net/3bQne/269/
chart: {
renderTo: 'container',
events: {
load: function(){
var chart = this,
path = chart.series[0].tracker;
path.on('click', function() {
alert("click");;
});
}
}
}
这很有效。我试图让Highcharts与Apple Pencil合作。我使用了上面的代码,但包含了markrGroup(以及跟踪器),所以当用户点击系列中的点和线时,事件就会触发。我使用"触摸启动"事件来捕捉苹果铅笔的点击。请参见下文。
chart: {
renderTo: 'container',
events: {
load: function(){
var chart = this,
path = chart.series[0].tracker;
path2 = chart.series[0].markerGroup;
path.on('touchstart', function() {
alert(“touch");
});
path2.on('touchstart'), function() {
alert(“touch 2”);
});
}
}
}