随着图表宽度的增加，Highcharts 宽度继续扩大答案

【问题标题】：Highcharts width continue expanding as chart width grows随着图表宽度的增加，Highcharts 宽度继续扩大
【发布时间】：2018-08-29 15:06:07
【问题描述】：

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

目前，我有以下内容

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

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

现在是渲染高图的脚本代码

      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 上创建一个滚动条，就像这样

有一个滚动区域

我如何做到这一点？

【问题讨论】：

标签： javascript css highcharts

【解决方案1】：

您需要使用highstock.js。

那里已经有一个答案：How to make highcharts scrollable horizontally when having big range in x-axis 感谢@Gopinagh.R

滚动条的两种实现方式。

选项 1

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

然后启用滚动条
  scrollbar: {
        enabled: true
    }
检查滚动条和相关操作的APIhttp://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/

【讨论】：