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

当日株価を折れ線グラフで表示してみよう

ネットエイト
小野 圭二
2006/7/7

■画面ビューへの組み込み

　ローソク足・出来高チャートは長くなるので次回に回します。前回に作成した画面ビューにリスト1、リスト2の各コンポーネントを組み込んでみましょう。

　まずはリスト1の当日株価チャートです。リスト1では<canvas>とすることで独立したOpenLaszloアプリケーションとして開発・試験を行いました。これを画面ビューに組み込むにはクラス化して組み込むのが簡単です。OpenLaszloアプリケーションをクラス化するのは簡単で、<canvas>タグを<library>タグに変更するだけです。そしてクラス化したLZXファイルは<include>タグを使ってOpenLaszloアプリケーションに組み込めるのです。それではリスト1の当日株価チャートをクラス化します。

クラス化のステップ
Step1 <canvas>タグを<library>タグにする
Step2 <class>タグで囲う
Step3 <dataset>をOpenLaszloアプリケーション（この場合は画面ビュー）に移動する
Step4 OpenLaslzoアプリケーションに<include>でクラスファイルの読み込みを追記する

　これでクラス化作業は終了です。これでアプリケーションとして開発・試験を行ったものをクラスとして組み込むことができました。後はいくつかのレイアウト調整を行うだけです。

<?xml version="1.0" encoding="UTF-8" ?>
<library>                               <!-- Step1 -->
  <!--                                       Step3
  <canvas>
    <dataset name="stockdaily">
      <records>
        <record time="9"  price="9980"/>
        <record time="10" price="10000"/>
        <record time="11" price="10010"/>
        <record time="12" price="10010"/>
      </records>
      <stockprice todaymax="10,010" todaymin="9,980"
                  nowprice="10,010"/>
    </dataset>
  -->
  <class name="dailychart">             <!-- Step2 -->
    <simplelayout axis="x" spacing="5"/>
    <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>
          <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>

      <horizontalaxis name="haxis" title="時間" maximum="16"
                      minimum="9" fixedRange="true" interval="1"
                      type="linear" columnName="x"
                      titleLocation="low" majorTickEnabled="true"
                      minorTickEnabled="true"
                      tickMarksLabelsEnabled="true"/>
      <verticalaxis name="vaxis"  title="￥" interval="50" 
                    type="linear" columnName="y"
                    titleLocation="low" minorTickEnabled="true"
                    tickMarksLabelsEnabled="true" />
    </linechart>

    <view datapath="stockdaily:/stockprice" fontsize="14">
      <text x="0" y="0">高値</text>
      <text x="50" y="0" datapath="@todaymax"/>
      <text x="0" y="20">安値</text>
      <text x="50" y="20" datapath="@todaymin"/>
      <text x="0" y="40">株価</text>
      <text x="50" y="40" datapath="@nowprice"/>
    </view>
  </class>                              <!-- Step2 -->
  <!--                                       Step3 
  </canvas>
  -->
</library>                              <!-- Step1 -->
リスト3　クラス化された当日株価チャート（dailychart.lzx）

　 3/4

　INDEX

OpenLaszloアドバンスド・テクニック（4）
　当日株価を折れ線グラフで表示してみよう
  Page1
はじめに
当日株価チャートの実装
  Page2
過去株価一覧の実装
Page3
画面ビューへの組み込み
  Page4
画面ビューへの組み込み（続き）




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

注目のテーマ

HTML5＋UX 記事ランキング

本日 月間
＠IT