最近highcharts图表讨论群里面很多朋友都在问如何让highcharts图表在X轴数据多的情况下产生滚动条的问题,其实之前有一个解决办法是将装载图表的div容器用css样式表弄一个滚动条出来。这种方法不过始终没有像histock图表那么美观和便于操作。今天我们就来谈谈如何在highcharts图表内巧用histock.js让图表产生滚动条。 1、做出一个highcharts图 <script src="http://code.highcharts.com/stock/highcharts.js"></script> <div id="container" ></div> $(function () { $('#containe...
最近highcharts图表讨论群里面很多朋友都在问如何让highcharts图表在X轴数据多的情况下产生滚动条的问题,其实之前有一个解决办法是将装载图表的div容器用css样式表弄一个滚动条出来。这种方法不过始终没有像histock图表那么美观和便于操作。今天我们就来谈谈如何在highcharts图表内巧用histock.js让图表产生滚动条。
1、做出一个highcharts图
1.
<script src=
"http://code.highcharts.com/stock/highcharts.js"
></script>
2.
3.
<div id=
"container"
style=
"height: 400px;width:400px;"
></div>
01.
$(
function
() {
02.
$(
'#container'
).highcharts({
03.
chart: {
04.
},
05.
xAxis: {
06.
tickLength: 30,
07.
categories: [
'Jan'
,
'Feb'
,
'Mar'
,
'Apr'
,
'May'
,
'Jun'
,
'Jul'
,
'Aug'
,
'Sep'
,
'Oct'
,
'Nov'
,
'Dec'
,
'Jan'
,
'Feb'
,
'Mar'
,
'Apr'
,
'May'
,
'Jun'
,
'Jul'
,
'Aug'
,
'Sep'
,
'Oct'
,
'Nov'
,
'Dec'
],
08.
min:0,
09.
max:10
10.
},
11.
series: [{
12.
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
13.
}]
14.
});
15.
});
特别提醒:
想要滚动条变得很友好,最好设置一下xAxis的min属性,这个时候的min和max是可以用于控制滚动条长短的。
2、这个时候的图是没有滚动条,且坐标刻度比较拥挤,很不美观。
3、我们将引用的highcharts.js地址修改为histock.js的地址
1.
http:
//code.highcharts.com/stock/highstock.js
4、追加scrollbar属性
1.
scrollbar:{
2.
enabled:
true
//是否产生滚动条
3.
},
5、最后效果图如下所示: