OpenLaszloアドバンスド・テクニック（5） Page 2/3
折れ線チャート、棒グラフ、ローソク足の合成表示
ネットエイト
小野 圭二
2006/8/9
■複雑なチャートの作成
ローソク足／出来高チャートでは、日付ごとの株価と移動平均線および、日付ごとの出来高を一度に表示するのが通例です。日付ごとの株価と移動平均線はともに折れ線チャートで表され、片方は「ローソク足」という独特のデータポイントを使用し、片方はデータポイントを使用しないで線だけで表示するというスタイルの違いがあります。そして、出来高チャートは棒グラフです。これらを1つのビューで表すにはどうすればいいのでしょう？
まずは折れ線グラフを考えてみます。前項で、<linechart>タグで外観を指定し、<dataseries>タグでデータバインドを行うと述べました。ということは、複数の折れ線グラフは<dataseries>を複数設定すればよさそうです。しかも、幸いなことに、日付ごとの株価と移動平均線はX／Y軸ともに範囲が一緒です。
<linechart … >
<dataseries datapath= … >
<datacolumn name="x" … >
<dataseries>
<!-- 日付ごとの株価チャートのデータバインド -->
</dataseries>
<dataseries>
<!-- 移動平均チャートのデータバインド -->
</dataseries>
</dataseries>
…
…
</linechart> |
| リスト2 折れ線グラフを複数作成するためのタグ構造 |
リスト2のように、1つのチャートに複数のグラフを描こうとしたら、単に<dataseries>でバインドすればいいのです。後は、<linechart>タグ、<horizontalaxis>タグ、<verticalaxis>タグがうまくやってくれます。
ただ、このままでは日付ごとの株価チャートと移動平均チャートの「スタイル」は一緒になってしまいます。ローソク足を付けたり、データポイントを表示しなかったり、単純に線色を変えるなど、それぞれのチャートごとにスタイルを変えるためには<linechart>タグのstyle属性を使用します。style属性では、<chartstyle>タグで記述された内容で折れ線グラフの概観が指定されます。さらに、<datastylelist>タグを使って、描画される折れ線グラフ個々の概観を指定できます。
<chartstyle … >
<datastylelist name= … >
<datastyle>
<!-- 折れ線グラフ1のスタイル -->
</datastyle>
<datastyle>
<!-- 折れ線グラフ2のスタイル -->
</datastyle>
</datastylelist>
</chartstyle> |
| リスト3 チャートのスタイルを指定するタグ構造 |
リスト3のように<datastylelist>で記述されたスタイルは、<dataseries>とどのように関連付けられるのでしょうか。実はこのへんが分かっていません。nameやstyle属性で呼べればよさそうなものですが……。執筆時点で確認できるのは、「<dataseries>に記述された順番と<datastylelist>に記述された順番は一致する」ということだけです（この辺がとてもベータ版っぽいですね）。それでは、このタグ構造を踏まえてローソク足／出来高チャートの「スタイルライブラリ」を見てみましょう。
<?xml version="1.0" encoding="UTF-8" ?>
<library>
<!--
ローソク足チャート用スタイル
-->
<chartstyle name="style1">
<!--
描画領域の指定 linecolor：領域枠線色
fillcolor：領域背景色
linesize ：領域枠線の太さ
-->
<plotstyle name="plot" linecolor="0xffffff"
fillcolor="0xfffff0" linesize="3"/>
<!--
グラフ背景の指定 注意：描画領域の外側
-->
<chartbgstyle name="chartbgstyle">
<linestyle name="line" size="3" color="0xffffff"/>
<regionstyle name="region" color="0xffffff"/>
</chartbgstyle>
<!--
軸線指定 x軸
-->
<axisstyle name="haxisstyle">
<tickstyle name="tick" color="0x000000"
position="outside"
length="5" size="1"/>
</axisstyle>
<!--
軸線指定 y軸
-->
<axisstyle name="vaxisstyle" >
<tickstyle name="tick" color="0x000000"
position="outside"
length="5" size="1"/>
</axisstyle>
<!--
data pointの描画
-->
<datastylelist name="datastyles">
<datastyle>
<pointstyle name="point" width="10" height="30"
image="./img/white.jpg"/> <!-- ←下記注
-->
<linestyle name="line" color="0x0000ff" size="3"/>
<regionstyle name="region" color="0x00FF00FF"
opacity="0.8" />
<labelstyle name="label" fontsize="9"
fontcolor="0x000000"
linecolor="0x000000" fillcolor="0xFFFFC1"
linesize="2" fontangle="45"/>
<labelstyle name="tip" fontsize="10"
fontcolor="0xff0000"
linecolor="0x000000" fillcolor="0xFFFFC1"
linesize="0"/>
</datastyle>
<datastyle>
<pointstyle name="point" width="6" height="6"
color="0x00FF00" opacity="0"/>
<linestyle name="line" color="0x00ff00" size="1"/>
<regionstyle name="region" color="0xB71CB3"
opacity="0.8"/>
<labelstyle name="label" fontsize="8"
fontcolor="0x000000" linecolor="0x000000"
fillcolor="0xffffc1" linesize="2"
fontangle="45"/>
<labelstyle name="tip" fontsize="10"
fontcolor="0x000000" linecolor="0x000000"
fillcolor="0xFFFFC1" linesize="2"/>
</datastyle>
</datastylelist>
</chartstyle>
<!--
出来高チャート用スタイル
-->
<chartstyle name="style2">
<!--
描画領域の指定 linecolor：領域枠線色
fillcolor：領域背景色
linesize ：領域枠線の太さ
-->
<plotstyle name="plot" linecolor="0xffffff"
fillcolor="0xfffff0" linesize="3"/>
<!--
グラフ背景の指定 注意：描画領域の外側
-->
<chartbgstyle name="chartbgstyle">
<linestyle name="line" size="5" color="0xffffff"/>
<regionstyle name="region" color="0xffffff"/>
</chartbgstyle>
<!--
軸線指定 x軸
-->
<axisstyle name="haxisstyle">
<labelstyle name="label" fontsize="16"
fontcolor="0x000000" fontangle="90"/>
<tickstyle name="tick" position="outside"
length="10" size="2">
<labelstyle name="label" fontsize="10"
fontcolor="0x000000" fontangle="90"/>
</tickstyle>
<linestyle name="axisline" color="0x000000" size="2"/>
<linestyle name="gridline" color="0xffffff" size="1"/>
</axisstyle>
<!--
軸線指定 y軸
-->
<axisstyle name="vaxisstyle" >
<labelstyle name="label" fontsize="16"
fontcolor="0x000000" fontangle="90"/>
<tickstyle name="tick" color="0x000000"
position="outside" length="10" size="2">
<labelstyle name="label" fontsize="12"
fontcolor="0x000000"/>
</tickstyle>
<linestyle name="axisline" color="0x000000" size="2" />
<linestyle name="gridline" color="0xffffff" size="1"/>
</axisstyle>
<!--
data pointの描画
-->
<datastylelist name="datastyles">
<datastyle>
<pointstyle name="point" width="10" height="10"/>
<linestyle name="line" color="0x0000aa"/>
<regionstyle name="region" color="0x0000aa"/>
<labelstyle name="label" font="serif" fontsize="12"
fontcolor="0xffffff" linecolor="0x000000"
fillcolor="0xFF3399" linesize="3"
fontangle="90"/>
<labelstyle name="tip" font="serif" fontsize="10"
fontcolor="0x000000" opacity="0.6"
linecolor="0x993399" fillcolor="0xFF99FF"
linesize="1"/>
</datastyle>
</datastylelist>
</chartstyle>
</library> |
リスト4 ローソク足／出来高チャートのスタイルライブラリ
（complexchartstyleclass.lzx）
注：ローソク足で使用しているwhite.jpgはこちらからダウンロードし、このファイルのあるディレクトリから見て「./img/white.jpg」にコピーして使用してください。 |
チャートごとに<chartstyle>タグを使って設定しているのが分かります。そして、「style1」の<datastylelist>タグ内には2つのスタイルがあります。最初の<datastyle>がローソク足チャートのスタイルを決めていて、2番目の<datastyle>が移動平均線のスタイルを決めています。このように、描画するチャートが複数あってそれらのスタイルを変える場合には、<datastyle>も複数設定してやればいいのが分かります。「style2」は出来高チャートのスタイルを決めているものです。
 |
2/3 |
 |
INDEX |
OpenLaszloアドバンスド・テクニック（5）
折れ線チャート、棒グラフ、ローソク足の合成表示 |
| |
Page1
はじめに
基本的なチャートの作成 |
 |
Page2
複雑なチャートの作成 |
| |
Page3
ローソク足／出来高チャートの完成 |
