[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 就好了,是很棒的一件事呀。圖表呈現的效果大致如下:

stock - [Javascript] 利用 Highcharts 繪製股市圖表 以上是我開發中的網頁截圖,價量資訊由 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
    }]
}],

參考資料

Jerry
Jerry

樂於分享的軟體工程師,曾在新創與大型科技公司實習,獲得黑客松競賽冠軍,擔任資安研討會講者。長期熱衷於資訊安全、雲端服務、網路行銷等領域,希望將科技知識分享給更多人。內容轉載請來信:jlee58tw@gmail.com

8 則留言

    • 我把source下載到我的電腦後
      建立一個django1.8的版本
      執行大大的程式
      但找不到allauth這個模組
      ModuleNotFoundError: No module named ‘allauth’

      我在目錄底下也沒看到這個資料夾…
      請問該如何在本機端顯示這個程式呢?

    • 經過好幾天的努力..總算把大大的source裡的網站給架起來
      不過只能看到首頁..無法登入後台…
      從把django裝好~並且安裝需要的套件
      已經試很久了…因為沒requirement檔可以看…
      可以請大大指點一下要怎才能登入後台嗎?

      錯誤訊息:
      ProgrammingError at /accounts/login/
      (1146, “Table ‘finance.django_site’ doesn’t exist”)

發表回應