ローソク足を表示するjQueryプラグイン「jqCandleChart」

作ったのはだいぶ前な気がしますが、jqCandleChartというjQueryプラグインを書いたので紹介します。
f:id:uraito:20101212000656j:image

何をするもの?

ローソク足を描画するプラグインです。
現在のところ、Firefox3.6、Google Chorome、SafariiOS4などに対応したブラウザで手軽にローソク足チャートを描画できます。ただし、excanvasでは正常に動かないようなので古いIE系では動きません。

使い方

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/
@