Javascript 随着图表宽度的增加，Highcharts width将继续扩展

我试图实现的是拥有一个随着数据点的增加宽度不断增加的高图表

目前，我有以下几点

我将vuejs与highcharts一起使用，但应该与jquery或其他类似

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

//设置溢出css

现在是呈现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
            });

this.chart=Highcharts.chart（'container_h'{
图表：{
类型：“列”
},
学分：{
已启用：false
},
标题：{
文本：“”
},
xAxis：{
类别：本系列
},
亚克斯：{
分:0,，
标题：{
文本：“卡车总数”
},
堆叠标签：{
启用：对，
风格：{
fontWeight:'粗体'，
颜色：（Highcharts.theme&&Highcharts.theme.textColor）| |“灰色”
}
}
},
工具提示：{
headerFormat:“{point.x}
”，
pointFormat:“{series.name}:{point.y}
总计：{point.stackTotal}”
},
打印选项：{
专栏：{
堆叠：“正常”，
数据标签：{
启用：对，
颜色：（Highcharts.theme&&Highcharts.theme.dataLabelsColor）| |“白色”
}
}
},
系列：this.chartdata
});

上面显示了一个带有

我期待实现的是：highchart列有一个固定的宽度，当它增长时，它会在x轴上创建一个滚动

有滚动区域的

---

如何实现这一点？

您需要使用

highstock.js

那里已经有一个answear了：感谢@Gopinagh.R

实现滚动条的两种方式

选择1 您需要使用

highstock.js

而不是渲染 股票图表，您必须呈现一个高位图表

然后启用滚动条

  scrollbar: {
        enabled: true
    }

检查API中的滚动条和相关操作

我胡编了一个例子

选择2 尝试将

min

和

max

属性设置为

x轴

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/

---

您需要使用

highstock.js

那里已经有一个answear了：感谢@Gopinagh.R

实现滚动条的两种方式

选择1 您需要使用

highstock.js

而不是渲染 股票图表，您必须呈现一个高位图表

然后启用滚动条

  scrollbar: {
        enabled: true
    }

检查API中的滚动条和相关操作

我胡编了一个例子

选择2 尝试将

min

和

max

属性设置为

x轴

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/