自己的javascript功力並不是很好,所以就想說找套強大的繪圖工具來幫我畫圖。在google關鍵字打一下 "javascript stock chart"就可以查到一堆javascript library,就看你中意哪一款XD。一開始我是看上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取得而來,這邊只是從我的資料庫show出來而已,至於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值也想要show出來,直接在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
    }]
}],

參考資料