# 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] ]);
