【问题标题】:Highcharts: how to handle touch events via plotOptions.series.eventsHighcharts:如何通过 plotOptions.series.events 处理触摸事件
【发布时间】:2013-06-26 13:06:04
【问题描述】:

在 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

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

【问题讨论】:

    标签: javascript highcharts


    【解决方案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");; 
                    });
                }
            }
        }
    

    【讨论】:

    • 谢谢。我正在研究您建议的解决方法,并且可以通过 path.element.addEventListener 连接一个 touchstart 事件 - 使用 path.on('touchstart') 似乎不起作用 - 但我似乎没有访问权限到事件处理函数中的 event.point。
    • 你为什么希望有 event.point?您正在向 SVG 元素添加事件,因此您需要单独传递您的观点。我仍然建议使用 .on() - 因为它肯定会在 IE 中工作
    • 对不起,我没想到会有 event.point,但是为 click 事件触发的现有回调函数使用了它。幸运的是,我的工作不支持 IE
    • 啊,好吧。祝 addEventListener 好运!
    【解决方案2】:

    这行得通。我试图让 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”);
                });
            }
        }
    }
    

    【讨论】:

    • 您的代码不起作用,因为存在一些语法错误。这是正确的示例,应该可以正常工作:jsfiddle.net/3awumjeg
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-12-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-05-20
    相关资源
    最近更新 更多