如何在高图中启用滚动条

Question

请在下面找到我的代码，我有向下钻取图表。根据我下面的示例，我的图表中有 60 多个项目。但我的价值正在缩水，无法查看所有项目。我尝试了高图表滚动条，但它不起作用。有人可以帮助我如何在向下钻取图表中启用滚动

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/modules/data.js"></script>
        <script src="http://code.highcharts.com/modules/drilldown.js"></script>
        <script type="text/javascript" src="http://code.highcharts.com/stock/highstock.js"></script>
        <script>

            $(function () {

                // Create the chart
                $('#container').highcharts({
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Basic drilldown'
                    },
                    xAxis: {
                        type: 'category'
                    },
                    legend: {
                        enabled: false
                    },
                    scrollbar: {
                        enabled: true
                    },
                    plotOptions: {
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true
                            }
                        }
                    },
                    series: [{
                            name: 'Things',
                            colorByPoint: true,
                            data: [{
                                    name: 'Product',
                                    y: 5,
                                    drilldown: 'item'
                                }]
                        }],
                    drilldown: {
                        series: [{
                                id: 'item',
                                data: [
                                    ['item1', 4],
                                    ['item2', 2],
                                    ['item3', 1],
                                    ['item4', 2],
                                    ['item5', 1],
                                    ['item6', 4],
                                    ['item7', 2],
                                    ['item8', 1],
                                    ['item9', 2],
                                    ['item10', 1],
                                    ['item11', 4],
                                    ['item12', 2],
                                    ['item13', 1],
                                    ['item14', 2],
                                    ['item15', 1],
                                    ['item16', 4],
                                    ['item17', 2],
                                    ['item18', 1],
                                    ['item19', 2],
                                    ['item20', 1],
                                    ['item21', 4],
                                    ['item22', 2],
                                    ['item23', 1],
                                    ['item24', 2],
                                    ['item25', 1],
                                    ['item26', 4],
                                    ['item27', 2],
                                    ['item28', 1],
                                    ['item29', 2],
                                    ['item30', 1],
                                    ['item31', 4],
                                    ['item32', 2],
                                    ['item33', 1],
                                    ['item34', 2],
                                    ['item35', 1],
                                    ['item36', 4],
                                    ['item37', 2],
                                    ['item38', 1],
                                    ['item39', 2],
                                    ['item40', 1],
                                    ['item41', 4],
                                    ['item42', 2],
                                    ['item43', 1],
                                    ['item44', 2],
                                    ['item45', 1],
                                    ['item46', 4],
                                    ['item47', 2],
                                    ['item48', 1],
                                    ['item49', 2],
                                    ['item50', 1],
                                    ['item51', 4],
                                    ['item52', 2],
                                    ['item53', 1],
                                    ['item54', 2],
                                    ['item55', 1],
                                    ['item56', 4],
                                    ['item57', 2],
                                    ['item58', 1],
                                    ['item59', 2],
                                    ['item60', 1],
                                    ['item61', 4],
                                    ['item62', 2],
                                    ['item63', 1],
                                    ['item64', 2],
                                    ['item65', 1],
                                    ['item66', 4],
                                    ['item67', 2],
                                    ['item68', 1],
                                    ['item69', 2],
                                    ['item70', 1],
                                    ['item71', 4],
                                    ['item72', 2],
                                    ['item73', 1],
                                    ['item74', 2],
                                    ['item75', 1],
                                    ['item76', 4],
                                    ['item77', 2],
                                    ['item78', 1],
                                    ['item79', 2],
                                    ['item80', 1],
                                    ['item81', 4],
                                    ['item82', 2],
                                    ['item83', 1],
                                    ['item84', 2],
                                    ['item85', 1]
                                ]
                            }]
                    }
                });
            });


        </script>
    </head>
    <body>
        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

    </body>
</html>

Answer 1

滚动条仅在 highstock 中可用。您需要捕获向下钻取事件并在 xAxis 上调用 setExtremes 操作。

chart: {
        type: 'column',
        events:{
            drilldown: function() {
                var _self = this.xAxis[0];

                setTimeout(function(){
                    _self.setExtremes(0,3);
                },1);
            }
        }
    },

示例：http://jsfiddle.net/upy5m38n/

如何在高图中启用滚动条

How to enable scrollbar in highchart

jquery

scrollbar

highcharts