2015年3月15日 星期日

jQuery Mobile - jqPlot (4)

OHLC圖 (Open-High-Low-Close Chart)

OHLC圖 (Open-High-Low-Close Chart) 又稱為股票圖、技術分析圖或美國線，是以豎立的線條表現股票價格的變化，並呈現開盤價、最高價、最低價與收盤價，豎線呈現最高價和最低價間的價差間距，左側橫線代表開盤價，右側橫線代表收盤價，繪製上較K線圖簡單。 另外還有最高價-最低價-收盤價、成交量-最高價-最低價-收盤價、成交量-開盤價-最高價-最低價-收盤價等三種呈現方式。

為能執行OHLC圖，除了原有jQuery Mobile的css與js檔案之外，另需在<head></head>網頁標籤部份匯入以下檔案，與折線圖不同的是，需額外匯入jqplot.ohlcRenderer.min.js以繪製OHLC圖：
其程式部份如下，其中設定頁面ID為ohlcchart、圖表ID為chart (可自行命名)，以做為繪製圖表的依據：
為設定圖表內容，在ohlcchart.js檔案中分別定義以下內容：
var ohlcdata = [[
  ['08/30/2014 13:00:00', 114.94, 120, 113.28, 119.57],
  ['08/29/2014 13:00:00', 104.51, 116.13, 102.61, 115.99],
  ['08/28/2014 13:00:00', 102.71, 109.98, 101.75, 106.85],
  ...
]];

// Enable Plugins
$.jqplot.config.enablePlugins = true;

var options = {
  title: "2014年8月份股市趨勢圖",
  
  series: [{
    renderer:$.jqplot.OHLCRenderer,
    rendererOptions:{ 
      candleStick:false 
    }
  }],

  axes: {
    xaxis: {
      label:'Date',
      renderer:$.jqplot.DateAxisRenderer,
      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
      tickOptions:{formatString:'%m/%d',angle:-90},
      tickInterval: "1 days",
      min: "8-01-2014",
      max: "8-31-2014",
    },
    yaxis: {
      label:'$',
      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
      tickOptions:{formatString:'%d',angle:0}
    }
  },

  highlighter: {
    show: true,
    showMarker:false,
    tooltipAxes: 'xy',
    yvalues: 4,
    formatString:'
 
      
日期:%s
 
      
開盤:%s
 
      
最高:%s
 
      
最低:%s
 
      
收盤:%s
'
  },
  cursor:{zoom:true}
};

$(document).on("pageshow","#ohlcchart",function(e){
  ohlcplot = $.jqplot("chart", ohlcdata, options);
});

$(window).on("orientationchange",function(ui,e){
  ohlcplot.replot();
});

$(document).on("pagehide","#ohlcchart",function(e){
  ohlcplot.destroy();
});
圖表的選項與格式，分別設定如下，例如圖表標題 (Title)：
title: "2014年8月份股市趨勢圖",
設定座標軸 (Axis) 的標籤 (label)、刻度區間 (tickInterval)、刻度的最小值 (min)、刻度的最大值 (max)：
axes: {
  xaxis: {
    label:'Date',
    renderer:$.jqplot.DateAxisRenderer,
    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
    tickOptions:{formatString:'%m/%d',angle:-90},
    tickInterval: "1 days",
    min: "8-01-2014",
    max: "8-31-2014",
  },
  yaxis: {
    label:'$',
    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
    tickOptions:{formatString:'%d',angle:0}
  }
},
此外，為處理當以手指或滑鼠移至數據標記上方時顯示日期、開盤、最高、最低與收盤價等資訊，範例加入highlighter屬性：
highlighter: {
  show: true,
  showMarker:false,
  tooltipAxes: 'xy',
  yvalues: 4,
  formatString:'

    
日期:%s
 
    
開盤:%s
 
    
最高:%s
 
    
最低:%s
 
    
收盤:%s
'
},
【執行結果】

以下為以電腦瀏覽器執行的OHLC圖，當以滑鼠移至數據標記上方時，則以表格顯示日期、開盤、最高、最低與收盤價等資訊：
以下為以Android智慧型手機瀏覽器執行的OHLC圖：
燭台圖 (Candlestick Chart)

燭台圖 (Candlestick Chart) 是OHLC圖的另一種呈現方式，同樣需在<head></head>網頁標籤部份匯入jqplot.ohlcRenderer.min.js：
燭台圖的幾乎與OHLC圖一樣，差別僅在於需加入candleStick選項以設定燭台圖：
series: [{
  renderer:$.jqplot.OHLCRenderer,
  rendererOptions:{   
    candleStick:true 
  }
}],
【執行結果】

以下為以電腦瀏覽器執行的燭台圖，當以滑鼠移至數據標記上方時，則以表格顯示日期、開盤、最高、最低與收盤價等資訊：
以下為以Android智慧型手機瀏覽器執行的燭台圖：
【參考資料】

[1] XAMPP：https://www.apachefriends.org
[2] jQuery Mobile：http://jquerymobile.com
[3] jQuery：http://jquery.com
[4] jqPlot：http://www.jqplot.com

© Chia-Hui Huang
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)