javascript - Highcharts水平滚动

Question

我是 highcharts 的新手，我正在尝试制作带有条形图和线条的图形。条形代表设定值的平均值，线条代表该组的实际值。

我随机生成了 100 个值的集合，但是当我在 Jsfiddle 中运行图表时，图形界面看起来很糟糕。我设置了拖动选择缩放，但使用起来不太舒服。然后我决定放置一个水平滚动条，我在 Stack Overflow 帖子中看到我必须包含 highstock.js、启用滚动条并设置参数 min 和 max 才能启用滚动条。我做到了，我的图表可以工作，但没有滚动。

图表链接:http://jsfiddle.net/zd12fa5L/2/

根据 Jsfiddle，我的 HTML 是:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
<div id="report"></div>

JSON 是:

// create the chart
Highcharts.chart('container', {
    chart: {

        events: {
            selection: function (event) {
                var text,
                    label;
                if (event.xAxis) {
                    text = 'min: ' +     Highcharts.numberFormat(event.xAxis[0].min, 2) + ', max: ' +     Highcharts.numberFormat(event.xAxis[0].max, 2);
                } else {
                    text = 'Selection reset';
                }
                label = this.renderer.label(text, 100, 120)
                    .attr({
                        fill: Highcharts.getOptions().colors[0],
                        padding: 10,
                        r: 5,
                        zIndex: 8
                    })
                    .css({
                        color: '#FFFFFF'
                    })
                    .add();

                setTimeout(function () {
                    label.fadeOut();
                }, 1000);
            }
        },
        zoomType: 'x'
    },
    title: {
        text: 'Chart selection demo'
    },
    subtitle: {
        text: 'Click and drag the plot area to draw a selection'
    },


    xAxis: {
        min: 0,
        max:9,

        categories:     ['Subject1','Subject2','Subject3','Subject4','Subject5','Subject6','Subject7','Subject8','Subject9',
                'Subject10','Subject11','Subject12','Subject13','Subject14','Subject15','Subject16','Subject17',
                'Subject18','Subject19','Subject20','Subject21','Subject22','Subject23','Subject24','Subject25',
                'Subject26','Subject27','Subject28','Subject29','Subject30','Subject31','Subject32','Subject33',
                'Subject34','Subject35','Subject36','Subject37','Subject38','Subject39','Subject40','Subject41',
                'Subject42','Subject43','Subject44','Subject45','Subject46','Subject47','Subject48','Subject49',
                'Subject50','Subject51','Subject52','Subject53','Subject54','Subject55','Subject56','Subject57',
                'Subject58','Subject59','Subject60','Subject61','Subject62','Subject63','Subject64','Subject65',
                'Subject66','Subject67','Subject68','Subject69','Subject70','Subject71','Subject72','Subject73',
                'Subject74','Subject75','Subject76','Subject77','Subject78','Subject79','Subject80','Subject81',
                'Subject82','Subject83','Subject84','Subject85','Subject86','Subject87','Subject88','Subject89',
                'Subject90','Subject91','Subject92','Subject93','Subject94','Subject95','Subject96','Subject97',
                'Subject98','Subject99','Subject100']
    },
    scrollbar: {
        enabled: true
    },
    series: [{

        type: 'column',
        name: 'Average',

        data:     [514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0    ]
    }, 
    {

        name: 'Value',
        data:     [11.0,11.0,118.0,126.0,131.0,142.0,159.0,172.0,178.0,181.0,182.0,186.0,189.0,206.0,218.0,219.0,221.0,238.0,       256.0,260.0,272.0,282.0,283.0,300.0,317.0,337.0,351.0,360.0,404.0,424.0,425.0,438.0,446.0,456.0,462.0,
           464.0,468.0,469.0,479.0,488.0,494.0,501.0,501.0,503.0,504.0,516.0,518.0,519.0,522.0,530.0,531.0,533.0,
           534.0,537.0,549.0,563.0,565.0,573.0,577.0,599.0,608.0,631.0,638.0,641.0,649.0,668.0,674.0,68.0,68.0,
           683.0,7.0,727.0,735.0,748.0,749.0,771.0,782.0,783.0,799.0,831.0,839.0,844.0,847.0,847.0,854.0,86.0,867.0,
           873.0,888.0,891.0,894.0,896.0,898.0,910.0,918.0,938.0,944.0,963.0,981.0,999.0 

        ]
    }]
});

谢谢您，问候。

Answer 1

阅读Scrollbars for any axis

仅包含<script src="https://code.highcharts.com/stock/highstock.js"></script>并删除 <script src="https://code.highcharts.com/highcharts.js"></script> 。然后就会出现滚动条。

Fiddle演示