OpenLaszloアドバンスド・テクニック
OpenLaszloアドバンスド・テクニック(5) Page 1/3

折れ線チャート、棒グラフ、ローソク足の合成表示

ネットエイト
小野 圭二
2006/8/9
次期バージョン(Legals)でFlashとAjaxの両対応を決めたオープンソース・リッチクライアント製品のOpenLaszlo。本連載では業務アプリケーションを意識したリッチクライアントの開発テクニックを紹介する。(編集部)

はじめに

- PR -

 2006年7月19日にOpenLaszloの最新バージョン、v3.3.3がリリースされました。v3.3がリリースされたのが5月18日、v3.3.1が6月7日、そして今回と毎月バージョンアップ版がリリースされています(v3.3.2はinternal releaseで公開されませんでした)。バージョンアップの内容はそれほど多くありませんが、現在使っているバージョンで「あれっ?」と思う挙動がある場合は、バグフィックスされている可能性があるのでバージョンアップをお勧めします。

 先日別件でLaszlo Systems社と打ち合わせした際に、日本でOpenLaszloを普及するために日本語ドキュメントを充実する必要があることを強く主張しました。いろいろ考えて、できるところから始めるために筆者が代表を務めるネットエイトで、PDF版入門書の公開を始めました。OpenLaszloを始めようとしている方を対象としていますので、ぜひともダウンロードしてご覧ください。内容は随時更新・改訂していきます。メールアドレスを登録すれば、更新・改訂の際はメールでお知らせします。詳しくは下記のWebサイトをご覧ください。

 さて、この連載も5回目を迎え、当初予定では今回が最終回でした。ところが、なんと終わりません。いや、終われません。書き切れなかったのです。そこで連載を1回延ばすことにしました。今回は、ローソク足/出来高チャートチャートの実装を含めて、前回コードだけ紹介した「チャート」について詳説します。

基本的なチャートの作成

 第4回「当日株価を折れ線グラフで表示してみよう」の「当日株価チャート」での折れ線グラフは以下のコードで描かれていました。

<linechart name="dailychart" width="400" height="300"
           datatipColumn="datatip" dataPointsEnabled="true"
           datatipEnabled="true"
           verticalGridLines="true" horizontalGridLines="true">

   <dataseries datapath="stockdaily:/records">
     <datacolumn name="x" columndatapath="record/@time"
                 datatype="number"/>
     <dataseries>  <!-- このdataseriesタグはなくてもいい -->
       <datacolumn name="y" columndatapath="record/@price"
                   datatype="number"/>
       <datacolumn name="datatip" columndatapath="record">
         <method name="processData" args="d">
           return d.attributes.price;
         </method>
       </datacolumn>
     </dataseries>  <!-- このdataseriesタグはなくてもいい -->
   </dataseries>

   <horizontalaxis name="haxis" title="時間" maximum="16"
                   minimum="9" fixedRange="true" interval="1"
                   type="linear" columnName="x"
                   titleLocation="low" majorTickEnabled="true" 
                   <!-- このmajorTickEnabled属性はなくてもいい -->
                   minorTickEnabled="true"
                   tickMarksLabelsEnabled="true"/>
   <verticalaxis name="vaxis"  title="¥" interval="50" 
                 type="linear" columnName="y"
                 titleLocation="low" minorTickEnabled="true"
                 tickMarksLabelsEnabled="true" />
 </linechart>
リスト1 当日株価チャート描画リストの抜粋

 ここで使われている<linechart>タグが、折れ線グラフを描くコンポーネントです(図1)。各属性の意味は以下のとおりです(表1)。

図1 <linechart>を使った折れ線グラフ

属性名 意味
datatipColumn データポイント(ここでは緑の四角の点)にカーソルを当てたときの挙動を指定。<dataseries>タグ内の<datacolumn name="datatip">が呼ばれる。ここで使われている<method>のprocessDataは<view>タグのメソッド
datatipEnabled datatipColumnで指定された挙動の実行/非実行指定
dataPointsEnabled データポイント(ここでは緑の四角の点)の表示/非表示指定
verticalGridLines 縦のけい線表示/非表示指定
horizontalGridLines 横のけい線表示/非表示指定
表1 <linechart>の各属性の意味

 このように、チャートの外観は<linechart>タグで指定されます。そしてその内側に、データをバインドするのです。

 データのバインドは<dataseries>タグで行います。そしてバインドされたデータのチャート上の位置を決めるのに必要なのが<horizontalaxis>、<verticalaxis>タグです。<dataseries>タグでは、X軸、Y軸のそれぞれの値をバインドしています。この当日株価チャートは1つのチャートに1つのデータセットを表示しますので(折れ線グラフを1つだけ描きますので)、2番目の<dataseries>タグはなくても構いません(必要となるケースは次項参照)。X軸とY軸のデータを指定すると、<horizontalaxis>と<verticalaxis>から判読して自動的にプロットしてくれます。各軸タグの属性は表2のとおりです。

属性名 意味
maximum 表示する最大軸目盛り
minimum 表示する最小軸目盛り
fixedRange maximum/minimum指定値でグラフを固定させる
interval 目盛り間隔
type linear/categoricalが指定できる(<linechart>ではlinear指定のみ有効)
columnName 軸名称
titleLocation 軸タイトルの位置をlow/hight/defaultで設定
majorTickEnabled 軸目盛り表示/非表示指定(デフォルトtrue)
minorTickEnabled 軸のサブ目盛り表示/非表示指定
tickMarksLabelsEnabled 軸目盛りラベル表示/非表示指定
表2 <horizontalaxis>/<verticalaxis>の各属性の意味

 これら属性値の中で、maximum/minimumを指定しない場合、バインドされるデータの範囲から自動的に設定されます。「当日株価チャート」では、市場取引時間帯が決まっていますので、リスト1に設定して、なおかつfixedRangeをtrueにし、表示を固定することで、万が一株価データにエラー数字が出てもチャート上では異常値で表示されますのですぐ分かります。もし、バインドされるデータ任せにすると、あり得ない数字でもその範囲を含めてチャート表示してしまい、誤った取引が発生する可能性があります。タグの属性はたくさんあり、設定しなくても適当に表示してくれますが、クリティカルシステムで利用する際にはなるべく属性値を設定するとよいでしょう。

 一応これで基本的なチャートを描くことができました。次に、数種類のデータを扱うチャートをローソク足/出来高チャートで見ていきます。

  1/3

 INDEX

OpenLaszloアドバンスド・テクニック(5)
 折れ線チャート、棒グラフ、ローソク足の合成表示
Page1
はじめに
基本的なチャートの作成
  Page2
複雑なチャートの作成
  Page3
ローソク足/出来高チャートの完成




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間
ソリューションFLASH