Highcharts

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 轴不是基于时间的（而且我买不起另一个许可证）。

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

Answer 1

这可以通过 chart.panKey. This will let you hold down shift key and drag mouse across x axis. See your updated jsFiddle 实现。基本用法：

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

Highcharts - 拖动以在 xAxis 上移动

Highcharts - Drag to move on xAxis

javascript