自己的javascript功力並不是很好,所以就想說找套強大的繪圖工具來幫我畫圖。在google關鍵字打一下 “javascript stock chart"就可以查到一堆javascript library,就看你中意哪一款XD。一開始我是看上amCharts,介面漂亮,不過當初在調整layout出一點問題,也沒有找到好的解法。於是後來選用Highcharts,網路上也滿多人討論分享經驗,我更發現有些股市網的圖表,似乎也是用這款改來的,真的是深得我心阿!


使用Highcharts

Highcharts的官網在此:http://www.highcharts.com/

上面的demo與doc都寫得很清楚,裡面也有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

以上是我開發中的網頁截圖,價量資訊由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: '5MA',
	data: line5
});
chart.addSeries({
	name: '20MA',
	data: line20
});
chart.addSeries({
	name: '60MA',
	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
	}]
}],

參考資料