Highcharts:如何通过plotOptions.series.events处理触摸事件

时间:2013-06-26 13:06:05

标签: javascript highcharts

在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

有没有人知道如何为触摸事件添加回调函数,或触发触摸事件中的点击回调函数?

2 个答案:

答案 0 :(得分:1)

是的,不支持这样的事情,我建议你创建一个想法here

我想到的唯一解决方法是使用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");; 
                });
            }
        }
    }

答案 1 :(得分:0)

这有效。我试图让Highcharts与Apple Pencil一起使用。我在上面使用了代码,但包括markerGroup(以及跟踪器),因此当用户单击点和一系列直线时会触发事件。我使用“ touchstart”事件来捕获苹果铅笔的点击。见下文。

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”);
            });
        }
    }
}