在 Highcharts 中平移（在移动设备中）答案

【问题标题】：Panning in Highcharts (In Mobile Devices)在 Highcharts 中平移（在移动设备中）
【发布时间】：2014-10-24 20:53:31
【问题描述】：

我使用 highcharts 来绘制柱形图。 x 轴上的数据不是基于时间戳的数据。它只是正常的类别。就像下面提到的小提琴中的那个。

JSFIDDLE：http://jsfiddle.net/BalajiR/d1LL2tvk/4/

我已启用平移，以便用户可以平移图表以查看完整的图表。它在浏览器中运行良好，就像在小提琴中一样。但是，这不适用于触摸设备，它需要一个缩放图表来进行平移。

我不想要任何缩放功能。与设备中的浏览器相同的行为（平移）。

请分享任何实现相同的方法。

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column',
                backgroundColor: '#F0F0F0',
                panning:true
            },

            title: {
                text: null
            },
            xAxis: {
                categories: ['PLAN_1','PLAN_2','PLAN_3','PLAN_4','PLAN_5','PLAN_6','PLAN_7','PLAN_8','PLAN_9','PLAN_10'],
                min:0,
                max: 3
            },
            legend: {
                enabled: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        this.series.name +': '+ this.y;
                }
            },
            plotOptions: {

                column: {
                    grouping: false,
                    pointWidth: 30
                }
            },
            series: [{
                name: 'Total',
                data: [8, 10, 5, 9, 6, 8, 10, 5, 9, 6],
                color: '#97BF0D'
            }, {
                name: 'Actionable',
                data: [4, 5, 2, 4, 3, 4, 5, 2, 4, 3],
                color: '#FFFFFF'
            }]
        });
    });

问候，巴拉吉R

【问题讨论】：

设置 zoomType 和平移将起作用。示例：jsfiddle.net/d1LL2tvk/10（在 android/naxus4 上测试）。
@SebastianBochan OP 不需要缩放功能。
有什么办法让它在没有缩放功能的移动设备上运行，因为它在浏览器上运行？

标签： charts highcharts highstock panning

【解决方案1】：

我自己还没有实现它，可能有一种更简洁的方法，但这里有一个潜在的解决方案：

您的浏览器允许您平移，因为它是事件 onDrag 的默认操作；当用户在屏幕上单击并拖动时会发生此事件。您的移动平台正在使用 onZoom，因为它没有拖动功能。

我要做的是手动将事件设置为在 onZoom 事件上像您希望的那样平移。如果你发现了 onDrag 的默认行为，你可以这样做

onZoom(e){// same behavior as onDrag};

所有这些都在events 键中定义。

【讨论】：