highchart 柱形图增加横向滚动条，保持Y轴以及图例不动

目标：当数据不多时，隐藏滚动条。数据较多时显示滚动条，并保持Y轴以及图例不动。如图：

1.前端使用vue+highcharts。

highcharts绘图并没有滚动条的相关属性。但是highStock图标参数中却有滚动（scrollbar）属性。

查了一下。highcharts是集成了highstock的。

安装highCharts    ： npm i --save-dev highCharts

import Highcharts from 'highcharts'
import loadStock from "highcharts/modules/stock"
loadStock(Highcharts);

loadStock(Highcharts);这一行是我在一个blog中看到的，但是现在找不到当时的链接了。我的理解是给highCharts对象加载stock的方法以及属性。

然后在 图表的 option中加入 scrollbar属性以及在  xAxis中加入  min和max属性（number）   就可以显示出滚动条了。

2.第二阶段 调整滚动条出现的条件。

通过判断需要显示的记录条数，改变scrollbar的  enabled为 true/false 以及 min,max为具体值或者 undefined。可以控制滚动条的出现以及隐藏。 总的option 如下

chartOption:{
					chart: {
						type: 'column'
//						height:"40%"
					},
					title:{text:""},
					legend: {
						layout: 'horizontal',
						backgroundColor: '#FFFFFF',
						floating: true,
						align: 'left',
						verticalAlign: 'top',
						x: 100,
						y: 5,
						width:700,
						symbolRadius:2
						//labelFormat: '<span style="{color}">{name} (click to hide or show)</span>'
					},
					colors:["#F00", "#008000", "#F7B72C", "#00A1EA"],
					plotOptions: {
					  column: {
//					  	pointWidth:25,
					    pointPadding: 0.05,
//					    borderWidth: 1.5,
					    groupPadding: 0.1,
					    shadow: false,
					  }
					},
					//去除highchart链接
					credits:{
						enabled : false,  
					},
					scrollbar:{
						enabled:false    //是否显示滚动条
					},
					xAxis: {
						categories: [],
						labels:{
							style:{
								fontSize:16
							}
						},
						min:undefined,   //滚动条出现的X轴
						max:undefined
					},
					yAxis:{
						gridLineWidth:1,
						title:"",
						lineWidth:1,
						tickPosition:"inside"
					},
					series: []
				},

到此，给柱形图加滚动条就实现了。 欢迎再评论区留言讨论