highstock高級篇之股票分時圖

一直在用 highchart 在做圖表，最近一段時間突然接到一活，需要用 highstock 幫客戶完成一個股票K線圖和分時圖。雖然用法和 api上與 highchart 沒什么區別，但還是研究一番做出了對應的DEMO，於是抽空與大家分享下。

預期想要達成的效果圖

highstock 開發股票或者財經的分時圖

 

准備工作

引入 highstock 文件 
[ 這里需要重點注意了，需要引入 highstock 的版本 為 v1.2.5 版本，最新版和老版本有很大的區別，至於為什么隨后在代碼結束后為大家解釋 ！ ]

 

 

圖表的初始化

 

1. UTC時間的設置和一些公共設置

Highcharts.setOptions({
        global: {                                                               
            useUTC: true                                                       
        }, 
        lang : {
            rangeSelectorZoom : '',
            months : [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ],
            shortMonths : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月',
                    '9月', '10月', '11月', '12月' ],
            weekdays : [ '周日', '周一', '周二', '周三', '周四', '周五', '周六' ]
        }
    });

 

2. 渲染圖表方法

function initHourChart(){
    var chart=null;
    //需要請求的api action 地址
    var path="/highstock/hour.json";
    $.getJSON(path,function(data) {
        if(data.datas.length==0)
        {
            return;
        }
        var Price = [];
        //獲取首個變量的時間，用來計算獲取時間的最小值和最大值
        var firstData=data.datas[0].updatetime;
        var minTime=Date.UTC(parseInt(firstData.substring(0,4)), parseInt(firstData.substring(4,6))-1, parseInt(firstData.substring(6,8)), 8);
        var maxTime=Date.UTC(parseInt(firstData.substring(0,4)), parseInt(firstData.substring(4,6))-1, parseInt(firstData.substring(6,8)), 20);
        for (i = 0; i < data.datas.length; i++)
        {
               Price.push([
                   UTC(data.datas[i].updatetime),
                   parseFloat(data.datas[i].open) 
               ]);
        }
        Price.sort();
        var option={
            colors:['#4d73a8'],
            chart: {             
              renderTo:"container",// 需要渲染的DIV 的ID名稱
              alignTicks: true
            }, 
             navigator: false,
             scrollbar: false,
             rangeSelector: false,
             plotOptions: {
                 line: {
                   lineWidth: 1
                 }
             },
             xAxis:[{
                    tickInterval:60 * 1000 * 60 *2.5,
                    min:minTime,
                    max:maxTime,
                    startOnTick:true,
                    endOntick:true,
                    gridLineColor: '#ccc',
                    gridLineDashStyle: 'dotted',
                    gridLineWidth: 1,
                    tickColor:'none',
                    lineColor: '#ccc',
                       labels:{
                           formatter:function(){
                             var date = new Date(this.value)
                             var hours = date.getHours()
                             if(hours<8){
                               hours = hours + 24
                             }
                             return addZero(hours-8)+':'+addZero(date.getMinutes())
                             }
                       }
             }],
             yAxis:[{ 
                      gridLineWidth: 1,
                      lineColor: '#f00',
                      labels: {
                          align: 'right'
                      },
                      offset:15,
                      min:0,
                      gridLineColor: '#ccc',
                      gridLineDashStyle: 'solid'
                }],
             credits: false,
             series : [{
                name : '當前價',
                   color: '#30527e',
                   lineWidth: 1,
                   type:'line',
                   yAxis:0,
                   xAxis:0,
                   pointStart: minTime,
                data:Price
             }]
        }
        chart=new Highcharts.StockChart(option);            
    });
}

3. 渲染方法里需要用到的輔助方法，如UTC 的格式化，X軸時間的格式化等等

function addZero(str){
        if(str<10){
          return str = '0' + str
        }
        return str
}
function UTC(time){
        if(time==undefined) return
          if (time.length < 10) {
            time = '' + time;
            return Date.UTC(time.substring(0, 4), time.substring(4, 6) - 1, time.substring(6,8));
          } else {
            time = '' + time;
            return Date.UTC(time.substring(0, 4), time.substring(4, 6) - 1, time.substring(6, 8), time.substring(9, 11), time.substring(12, 14), time.substring(15, 17));
          }      
}

4. 請求的 json 格式，當然格式可以自己定義 ，但是需要修改上面方法里的屬性

{
   "datas": [
       {
           "open": 2055,
           "updatetime": "20150129 08:00:00",
           "status": 1,
           "high": 2055,
           "low": 2053,
           "close": 2054
       },
       {
           "open": 2055,
           "updatetime": "20150129 08:01:00",
           "status": 1,
           "high": 2055,
           "low": 2054,
           "close": 2054
       },
       {
           "open": 2055,
           "updatetime": "20150129 08:02:00",
           "status": 1,
           "high": 2055,
           "low": 2055,
           "close": 2055
       }]
}

5. 最后完成的效果圖(當然樣式和其他方面還得做調整)

• 1.  
     

     方法解釋說明

     initHourChart 方法為渲染的核心方法，它先請求服務端的 json數據 ，拿到 json數據 后，循環遍歷開始組建圖表所需要的data格式 ，一個 UTC 時間戳，另外一個就是對應的數據值 。需要注意的是 xAxis 屬性里需要設置 tickInterval 、 min 和 max參數，而且必須要設置。因為股票的分時圖一般會有開盤時間和收盤時間，這里的 min 和 max 決定了 x 軸時間的 開始 和 結束 ，tickInterval 決定了 x 的間隔時間（例子里我以2小時為間隔展示了一天的數據）。

  接着我來解釋為什么前面我說必須要用 v1.2.5 版本

  1. 舊版支持時間段固定顯示模式，例如上圖初始化 就可以顯示 早上8點到晚上8點的刻度值，即使當前的數據沒有16點以后的數據。而新版當沒有16點以后的數據時，會無法顯示后面時間段的空白區域，除非將時間點填充null的值，如果后面點有值了動態去更新。
  2. 定時器功能，我們會在load事件里增加一個定時器，動態為圖表增加新的點。因為從開盤后，不是所有時間段的數據都會有。然而這點上，新版增加數據后整個線會向左移動，然后新添加的點才增加進來，具體看官網的DEMO。舊版的處理方式是圖表不懂，自動在最后一個點上增加新的數據 。

  附上2張圖分別采用新版和舊版，解釋上面2個觀點 
   
  

大家可以對比看看2張圖的效果！也許新版有其他的解決方案。如果有也可以聯系我與大家分享。今天就講到這里，下篇為大家帶來K線圖的實例。