在Highcharts中平移(在移动设备中)

时间:2014-08-31 12:41:06

标签: charts highcharts highstock panning

我使用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'
            }]
        });
    });

此致 Balaji R

1 个答案:

答案 0 :(得分:0)

我自己还没有实现它,可能有更简洁的方法,但这是一个潜在的解决方案:

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

我要做的是手动将事件设置为像onZoom事件一样平移。如果找到onDrag的默认行为,则可以执行

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

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