Highcharts - 拖动x轴移动

Question

我正在尝试用一列图表来表示大量数据。

这里有一个简单的例子：(JSFiddle)

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['test A1','test B1','test C1','test D1','test E1','test F1','test G1','test H1','test I1','test J1','test K1','test L1','test M1','test N1','test O1','test P1','test Q1','test R1','test S1','test T1','test U1','test V1','test W1','test X1','test Y1','test Z1','test A2','test B2','test C2','test D2','test E2','test F2','test G2','test H2','test I2','test J2','test K2','test L2','test M2','test N2','test O2','test P2','test Q2','test R2','test S2','test T2','test U2','test V2','test W2','test X2','test Y2','test Z2']
        },

        series: [{
            data: [299, 715, 1064, 1292, 1440, 1760, 1356, 1485, 2164, 1941, 956, 544, 299, 715, 1064, 1292, 1440, 1760, 1356, 1485, 2164, 1941, 956, 544, 948, 458, 299, 715, 1064, 1292, 1440, 1760, 1356, 1485, 2164, 1941, 956, 544, 299, 715, 1064, 1292, 1440, 1760, 1356, 1485, 2164, 1941, 956, 544, 948, 458]
        }]

    });
    // set default zoom (10 items) : COMMENT IT TO SEE THE FULL CHART
    $('#container').highcharts().xAxis[0].setExtremes(0,9);
});

如果您移除默认缩放，显示会出现问题。

我看到了Highstock的rangeSelector功能，很不错，但我的X轴不是基于时间的（而且我买不起另一个许可证）。

有没有一种方法可以在我的图表上实现向左或向右拖动（一种导航方式）？

- Apolo

---

请提供一个反馈来降低票数。 - Apolo

Answer 1

通过使用chart.panKey，您可以实现此功能。这将允许您按住 shift 键并拖动鼠标跨越 x 轴。请查看您更新的jsFiddle。基本用法：

...
    chart: {
        type: 'column',
        panning: true,
        panKey: 'shift'
    },
...

- wergeld

---

太好了！我刚刚设置了 panning: true（我不让用户放大），这样用户就不需要按住平移键了。 - Apolo