javascript - 随着图表宽度的增加，Highcharts 宽度继续扩大

Question

我想要实现的是拥有一个随着数据点增加而宽度继续增加的高图表

目前，我有以下

AM 使用带有 highcharts 的 vuejs，但应该类似于 jquery 或其他

<div class="col-md-6" style="overflow:auto"> //set overflow css
   <div id="container_h"></div>
<div>

现在是渲染 highchart 的脚本代码

      this.chart = Highcharts.chart('container_h', {
                chart: {
                    type: 'column'
                },
                credits: {
                    enabled: false
                },
                title: {
                    text: ''
                },
                xAxis: {
                    categories: this.ranges
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Total trucks'
                    },
                    stackLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },
                tooltip: {
                    headerFormat: '<b>{point.x}</b><br/>',
                    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: true,
                            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                        }
                    }
                },
                series: this.chartdata
            });

上面呈现了一个图表

我期待实现的是：highchart 列具有固定宽度，当它增长时它会创建一个滚动，x-axis所以像这样

有一个滚动区域

我如何实现这一目标？

Answer 1

你需要使用highstock.js.

那里已经有一个答案：感谢@Gopinagh.R ，当x轴范围很大时，如何使highcharts水平滚动

实现滚动条的两种方式。

选项1

您将需要使用highstock.js 而不是渲染股票图表，而必须渲染highchart。

然后启用滚动条

  scrollbar: {
        enabled: true
    }

检查滚动条和相关操作的 API http://api.highcharts.com/highstock#scrollbar。

http://jsfiddle.net/gopinaghr/kUSyF/1/我摆弄了一个例子。

选项 2

尝试将min&max属性设置为x-axis.

xAxis: {
            categories: [...],
            min: 0,
            max:9
} Displays 10 categories in x-axis at a stretch, adding a scroll for the rest of the categories. find the fiddled example http://jsfiddle.net/gopinaghr/kUSyF/293/