OpenLaszloアドバンスド・テクニック（6）　Page 2/4

リアルタイム株価チャート、ついに完成！

ネットエイト
十河 学
2006/9/6

■株価データをJSPから取得

　それでは、前回まで固定データを設定していた「当日株価チャート」をJSPで動的に作成したXMLデータから取得するよう変更します。stockchart.lzx（株価チャートのメイン・アプリケーション）の47行目から固定で定義している次のコード

<dataset name="stockprice">     <records>       <record date="10" price="10100" average5="10081"               volume="1000"/>    …… </dataset>

を次のように置き換えます。

<dataset name="stockprice" type="http" src="jsp/stockprice.jsp"          request="true" />

　type属性にhttpを指定し、src属性にJSPのURLを指定することで、JSPが生成したXMLデータをhttp経由でstockpriceデータセットへ読み込むことができます。request="true"を指定することでコンポーネントの初期化時に自動的にデータを取得します。

　リクエストのタイミングを自分で指定したいという場合であれば、request="false"としておき、適当なメソッド内からstockprice.doRequest()をコールします。

　テスト用に、complexchart.lzx（第5回のリスト6）内の<dataset name="stockprice" …… >も同様に置き換えて、簡単にローソク足／出来高チャートのテストができるように設定します。ブラウザからstockchart.lzxとcomplexchart.lzxにアクセスして、リロードごとにランダムに生成されたデータのグラフが作成されることを確認してください。

■ローソク足クラスの作成

　 それではローソク足を実装してみましょう。第5回のリスト4ではwhite.jpgというダミー画像を用意して、complexchartstyleclass.lzxのpointsytleに設定していました。しかし、この方法ではすべてのポイントに同じスタイルが適用されてしまうため、ポイントごとに高さやヒゲの異なったローソク足を作りたい場合には向いていません。ここでは、ローソク足用のクラスを新しく定義し、線グラフの描画メソッドをオーバーライドしてローソク足をチャートに上書きする作戦を取りたいと思います。

　それでは、まず1つのローソク足を表示するためのcandleMarkerクラスを作成します。ファイル名はクラス名に合わせてcandleMarker.lzxとします。

　ローソク足は第3回「リアルタイム株価チャートの基盤フレームを作る」の図2に表示されていますので、ローソク足の意味を知りたい方はこちらでもう一度おさらいしておきましょう。

　このクラスは始値、終値、高値、安値、そして倍率を調節するためのプロットエリアのスケールをプロパティとして保持し、陰陽とヒゲを表します。

　それではcandleMarker.lzxという名前で新しいファイルを作成し、リスト2のようなクラスを作成します。クラス初期化時にrenderMarker()を呼び出し、与えられた値から、陰陽の色と高さ、ヒゲの長さを設定しています。このクラスではlineがヒゲを、boxが陰陽の色と始値、終値を表しています。

　このローソク足がプロットされる点は高さと幅の中心点であることから、高さは始値、終値の差に設定し、ヒゲはこのビューよりはみ出て表示されるように作成しています。candleMarkerの背景色は黒にし、boxを1ピクセルずつ内側に配置することで、枠を表現しています。boxの色は陰陽によって白か黒をrenderMakerメソッド内で設定しています。またマウスオーバー時には、各値をツールチップで表示できるよう、マウスイベントを取得して、ツールチップに各値を表示する処理を追加しています。

<library>   <class name="candleMarker" bgcolor="black">     <attribute name="start" type="number" value="0" />     <attribute name="end" type="number" value="0" />     <attribute name="high" type="number" value="0" />     <attribute name="low" type="number" value="0" />          <attribute name="plotareaXscale" value="1" />     <attribute name="plotareaYscale" value="1" />          <view name="line" x="${parent.box.width / 2}" width="1"           bgcolor="black" height="0"/>     <view name="box" x="1" y="1" width="${parent.width - 2}"           height="${parent.height - 2}" bgcolor="black" />          <method name="init">       super.init();       renderMarker();     </method>     <method name="renderMarker">       <![CDATA[       //ヒゲ      line.setHeight((this.high - this.low) * plotareaYscale);      line.setY((Math.max(this.start, this.end) - this.high) *                 (plotareaYscale * -1) - line.height);       //陰陽       var span = this.end - this.start;       if(0 < span)         box.setAttribute("bgcolor", white);       //高さ       this.setHeight((Math.abs((this.start - this.end)                                 * plotareaYscale)));       //幅       this.setWidth(plotareaXscale * 0.3);       ]]>     </method>     <handler name="onmouseover">       <![CDATA[       parent.parent.datatooltip.style =           parent.parent.style.datastyles.st2.tip;       parent.parent.datatooltip.show("高値:" + this.high + " 安値:" +           this.low + " 始値:" + this.start + " 終値:" + this.end);       ]]>     </handler>     <handler name="onmouseout">       parent.parent.datatooltip.hide();    </handler>   </class> </library>

リスト2　ローソク足を表示するためのcandleMarkerクラス（candleMarker.lzx）

2/4

INDEX
OpenLaszloアドバンスド・テクニック（6） 　リアルタイム株価チャート、ついに完成！
	Page1 はじめに JSPで株価データをランダム生成
	Page2 株価データをJSPから取得 ローソク足クラスの作成
	Page3 チャートスタイルの設定 ローソク足をチャート上に描画
	Page4 当日株価チャートの自動更新 当日株価データをjspから取得 リアルタイム株価チャートの完成

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）