[Javascript] 利用 Highcharts 繪製股市圖表

自己的 JavaScript 功力並不是很好，所以就想說找套強大的繪圖工具來幫我畫圖。在 Google 關鍵字打一下 「javascript stock chart」就可以查到一堆 JavaScript Library，就看你中意哪款。

一開始我是看上 amCharts，介面漂亮，不過當初在調整 Layout 出點問題，也沒有找到好的解法。後來選用 Highcharts，看見網路上也滿多人討論，我更發現有些股市網的圖表，也是用這款改來的，就選用他囉！

使用 Highcharts

http://www.highcharts.com/

網頁中的範例與文件都寫得很清楚，裡面也有 jsfiddle 上的範例連結，可以直接修改程式碼，看看結果的變化。如果在 Layout 或畫面呈現有些其他需求，我相信在 Stack Overflow 很容易找到答案。

繪製股市圖表

股市圖表以 Highstock 的 Two panes, candlestick and volume 為樣本修改 官方 Demo 在此

http://www.highcharts.com/stock/demo/candlestick-and-volume

透過 Highstock 內的一些方法，可以很輕易畫出K線圖、OHLC 圖、成交量等等。除此之外，底下還有一個選擇器來選擇資料顯示的區間，我們不用手動處理顯示上的問題，只要把資料丟給 Highstock 就好了，是很棒的一件事呀。圖表呈現的效果大致如下：

以上是我開發中的網頁截圖，價量資訊由 Yahoo Finance  API 取得而來，這邊只是從我的資料庫顯示出來而已，至於 KD 值沒有計算所以都是 0。

客製化的一些問題

對於 Highstock 的使用方式我就不贅述，官方已經有很完整的範例了，這邊僅列出一些我在客製化碰到的問題與解法。

A. 改變Tooltip的位置

Tooltip 的作用是顯示圖表上的資訊，當游標移到線或點上，游標邊就會出現一個方框顯示數值。可是在看股市圖表時，我們不希望一直有框框在旁邊影響視線，最好是固定在某個地方，這時候就需要使用 formatter 來修改 Tooltip 的 Layout

tooltip: {
    positioner: function() {
        return {
            x: 0,
            y: 40
        };
    },
    shadow: false,
    borderWidth: 0,
    backgroundColor: 'rgba(255,255,255,0.8)',
    useHTML: true,
    formatter: function() {
        var s = ' ';
        $.each(this.points, function(i, series) {
            for (i = 0; i < json.length; i++) {
                if (ohlc[i][0] == series.point.x) {
                    s = '開: <span style="font-weight:bold">' 
                    + ohlc[i][1] + '</span> 收: <span style="font-weight:bold">' + ohlc[i][4] 
                    + '</span> 高: <span style="font-weight:bold">' + ohlc[i][2] 
                    + '</span> 低: <span style="font-weight:bold">' + ohlc[i][3] 
                    + '</span> 量: <span style="font-weight:bold">' + parseInt(volume[i][1]) / 1000 
                    + ' </span> 5MA: <span style="font-weight:bold">' + line5[i - 5][1] 
                    + '</span> 20MA: <span style="font-weight:bold">' + line20[i - 20][1] 
                    + '</span> 60MA: <span style="font-weight:bold">' + line60[i - 60][1] 
                    + '</span> K: <span style="font-weight:bold">' + lineK[i][1] 
                    + '</span> D: <span style="font-weight:bold">' + lineD[i][1] + '</span>';
                    break;
                }
            }
        });
        date = new Date(this.x);
        s = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear() + " " + s;
        return s;
    }
},

B. 增加 5 日線, 20 日線, 60 日線

透過 addSeries 把線加入圖表中，data 放的是時間與資料組成的 array

line5.push([
    parseFloat(Date.parse(json[i].fields.date)), // the date
    parseFloat(json[i].fields.line5) // 5MA
]);

…

var chart = $(‘#container’).highcharts();
chart.addSeries({
    name: ‘5 MA’,
    data: line5
});
chart.addSeries({
    name: ’20 MA’,
    data: line20
});
chart.addSeries({
    name: ’60 MA’,
    data: line60
});

C. 在同一個圖表中，加入一個新的欄位顯示 KD 圖表

原先的圖表只顯示 OHLC 和成交量，如果我算好了 KD 值也想要顯示出來，直接在 yAxis 加入一個新的欄位即可

yAxis: [{
    labels: {
        align: ‘right’,
        x: -3
    },
    title: {
        text: ‘OHLC’
    },
    height: 300,
    lineWidth: 2
}, {
    labels: {
        align: ‘right’,
        x: -3
    },
    title: {
        text: ‘Volume’
    },
    top: 330,
    height: 60,
    offset: 0,
    lineWidth: 2
}, {
    title: {
        text: ‘KD’
    },
    top: 400,
    height: 150,
    offset: 0,
    lineWidth: 2,
    plotLines: [{
        color: ‘#008000’,
width: 2,
value: 80
},{
color: ‘# FF0000’,
        width: 2,
        value: 20
    }]
}],

參考資料

• Two panes, candlestick and volume
• HighChart Tooltip Position can be changed?
• How to show open, close, high and low in tooltip when the chart type is ‘line’ in highstocks?