2015年5月8日 星期五

Highstock 測試 (一)

稍微搞懂 Highcharts 後, 我迫不及待要來測試它用來繪製股票資料的 Highstock. 其環境配置與 Highcharts 一樣, 下載 zip 檔解開後將 js 資料夾下的 highstock.js 複製到專案目錄下匯入網頁中即可. 參考 :

# Highchart 執行環境配置


只要在網頁中匯入 jquery.js 與 highstock.js 即可 :

  <script src="../jquery/jquery.js"></script>
  <script src="../jquery/highstock.js"></script>

或者利用 CDN 供檔, 就毋需下載 SDK 了 :

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://code.highcharts.com/stock/highstock.js"></script>

這樣接下來就可以進行測試了. 我將解壓縮目錄 examples/candlestick 下的 index.html 改編為如下範例 1 :

範例 1 : http://tony1966.xyz/test/jquerytest/highstock-1.htm [看原始碼]

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Highstock 測試</title>
  <script src="../jquery/jquery.js"></script>
  <script src="../jquery/highstock.js"></script>
</head>
<body>
  <div id="container" style="min-width: 600px; height: 400px; margin: 0 auto">
  </div>
  <script>
    $(function () {
      var url="http://www.highcharts.com/samples/data/jsonp.php?a=e&filename=" +
              "aapl-ohlc.json&callback=?";
      $.getJSON(url, function(data) {
        $('#container').highcharts('StockChart', {
          rangeSelector: {selected : 1},
          title: {text: 'AAPL Stock Price'},
          series: [{
            type: 'candlestick',
            name: 'AAPL Stock Price',
            data: data,
            dataGrouping: {units: [['week', [1]], ['month',[1, 2, 3, 4, 6]]]}
            }]
          });
        });
      });
  </script>
</body>
</html>

可見它是用 jQuery 的 getJSON() 向伺服器取得 JSON 格式資料後, 傳給回呼函式, 再餵給 series 之 data 屬性. 此 JSON 檔格式如下, 是一個二維陣列 :

# http://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=?

?(/* AAPL historical OHLC data from the Google Finance API */
[
/* May 2006 */
[1147651200000,67.37,68.38,67.12,67.79],
[1147737600000,68.10,68.25,64.75,64.98],
[1147824000000,64.70,65.70,64.07,65.26],
[1147910400000,65.68,66.26,63.12,63.18],
[1147996800000,63.26,64.88,62.82,64.51],
[1148256000000,63.87,63.99,62.77,63.38],
[1148342400000,64.86,65.19,63.00,63.15],
[1148428800000,62.99,63.65,61.56,63.34],
[1148515200000,64.26,64.45,63.29,64.33],
[1148601600000,64.31,64.56,63.14,63.55],
[1148947200000,63.29,63.30,61.22,61.22],
[1149033600000,61.76,61.79,58.69,59.77],
/* Jun 2006 */
.....
.....
/* May 2013 */
[1367366400000,444.46,444.93,434.39,439.29],
[1367452800000,441.78,448.59,440.63,445.52],
[1367539200000,451.31,453.23,449.15,449.98],
[1367798400000,455.71,462.20,454.31,460.71],
[1367884800000,464.97,465.75,453.70,458.66],
[1367971200000,459.04,465.37,455.81,463.84],
[1368057600000,459.81,463.00,455.58,456.77],
[1368144000000,457.97,459.71,450.48,452.97]
]);


張貼者： 於
標籤： , ,

沒有留言 :

張貼留言

訂閱： 張貼留言 ( Atom )