highcharts圖表中級入門：非histock圖表的highcharts圖表如何讓圖表產生滾動條

最近highcharts圖表討論羣裏面不少朋友都在問如何讓highcharts圖表在X軸數據多的狀況下產生滾動條的問題，其實以前有一個解決辦法是將裝載圖表的div容器用css樣式表弄一個滾動條出來。這種方法不過始終沒有像histock圖表那麼美觀和便於操做。今天咱們就來談談如何在highcharts圖表內巧用histock.js讓圖表產生滾動條。一、作出一個highcharts圖 <script src="http://code.highcharts.com/stock/highcharts.js"></script> <div id="container" ></div> $(function () { $('#containe...css

一、作出一個highcharts圖url

 
   view source 
   print 
   ? 
  

 
   1. 
   <script src="http://code.highcharts.com/stock/highcharts.js"></script> 
  
   2. 
     
   3. 
   <div id="container" style="height: 400px;width:400px;"></div>

 
   view source 
   print 
   ? 
  

 
   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. 
   });

特別提醒：spa

想要滾動條變得很友好，最好設置一下xAxis的min屬性，這個時候的min和max是能夠用於控制滾動條長短的。code

二、這個時候的圖是沒有滾動條，且座標刻度比較擁擠，很不美觀。orm

三、咱們將引用的highcharts.js地址修改成histock.js的地址ip

 
   view source 
   print 
   ? 
  

1. http://code.highcharts.com/stock/highstock.js

四、追加scrollbar屬性get

 
   view source 
   print 
   ? 
  

 
   1. 
   scrollbar:{ 
  
   2. 
   enabled:true //是否產生滾動條 
  
   3. 
   },

五、最後效果圖以下所示：string