高图宽度随着图表宽度的增长而继续扩大

Question

我要实现的目标是建立一个高图，宽度随着数据点的增加而持续增加

目前，我有以下内容

AM使用带有高图表的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上创建滚动，所以类似这样的

具有滚动区域

我该如何实现？

Answer 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
    }

     

检查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/