最近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、最后效果圖如下所示：
