ローソク足を表示するjQueryプラグイン「jqCandleChart」
作ったのはだいぶ前な気がしますが、jqCandleChartというjQueryプラグインを書いたので紹介します。
何をするもの?
使い方
1) プラグインの読み込みとHTMLの準備
ソースをgithubのリポジトリからダウンロードし、その他jQueryのプラグインと同様に読み込んでください。表示にはjquery.candlechart.jsのみ利用します。その他のファイルは説明やテスト用ですので不要です。
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.candlechart.js" type="text/javascript"></script>
また、描画用のcanvasをHTML上に準備します。
<canvas width="400" height="300" id="cv01"></canvas>
2) データの準備
ローソク足の描画には、始値、終値、高値、安値の4つのデータが必要です。これを2次元配列に準備します。この際、配列の5つ目に文字列を設定すると、縦罫線と文字列がラベルとして表示されます。
var tick = [ [200,250,260,190], [250,280,280,190,"4月1日"], [280,210,280,180] ];
同様に出来高と移動平均を配列に準備します。
var vol = [1000,1200,1100]; var avg = [240,260,270];
3) 描画
正常に読み込まれていれば、jQueryのプラグインとしてメソッドが利用可能となっていますので、以下のようにメソッドにデータを渡すことで、チャートが描画されます。
メソッドチェーンで出来高や移動平均を追加表示できます。
$("#cv01").candleChart(tick) // ローソク足の初期設定と描画 .ccVolume(vol) // 出来高の描画 .ccMA(avg,"#FFFFFF"); // 移動平均線の描画
メソッド | 説明 |
---|---|
.candleChart(data,options) | チャート描画の基本メソッドです。データとオプションを引数として与えると、オプションに沿ったローソク足を描画します。引数にはオプションのみ、データのみを与えることも可能です。 |
.ccTick(data) | ローソク足を描画します。画面クリアしませんのですでにローソクや移動平均線があった場合、単純に上書きします。 |
.ccVolume(vol) | 出来高を描画します。引数の配列中最大値から自動で個々の高さを調整します。 |
.ccMA(avg,color) | 移動平均線を描画します。スプライン補間で値の補間を行います。データ次第で移動平均以外のまったく別の値を表示することも可能です。 |
.ccClear() | ローソクチャートを初期化します。設定色で塗りつぶして基本罫線を引き直します。 |
.ccStatus() | チャートに設定されている値を取得します。※メソッドチェーンが繋がらなくなります。 |
4) オプション
チャートの背景色やローソクの太さなど、オプション指定することで多様なチャートを描画可能です。
オプションは以下のようにオブジェクト形式で複数設定が可能です。
$("#cv01").candleChart(tick,{ 'width' : 600, 'bgColor': "#2F4F4F", 'cdLineColor': "#FFF", ・・・ });
オプション | デフォルト値 | 説明 |
---|---|---|
width | 400 | チャートを表示するcanvasの幅 |
height | 300 | チャートを表示するcanvasの高さ |
ofX | 50 | canvasとチャートの間の左右余白 |
ofY | 30 | canvasとチャートの間の上下余白 |
bgColor | #FFF | 背景色 |
cdWidth | 5 | ローソクの太さ |
cdLineColor | #000 | ローソクの芯と線の色 |
cdUpColor | #FFF | 上昇時のローソクの色 |
cdDownColor | #000 | 下降時のローソクの色 |
voColor | #CCC | 出来高の色 |
liColor | #CCC | 罫線の色 |
maColor | #00F | 移動平均線の色 |
liNum | 5 | 縦罫線の数 |
upper | 250 | チャートの上限値 |
lower | 100 | チャートの下限値 |
autoScale | false | チャート上限値と下限値を自動計算するかどうか。 |
チャートの上限・下限を自動計算する場合、横罫線の数値も自動で計算されますので、きりのいい数字ではなくなります。複数のチャートで上限・下限を揃えたりすることもあると思いますので、デフォルトでは自動計算しない設定になっています。
その他
ソースや課題の管理、バグトラッキングにはgithubを利用しています。適当にご利用ください。また、バグの報告、環境テスト結果などお気づきの点はtwitterアカウントかメールまでお気軽にどうぞ。
github: http://github.com/shunito/jqCandleChart/
@shunito