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

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

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

■はじめに

　この連載も今回を含めて残り2回となりました。今回は株価チャートのUI（ユーザー・インターフェイス）部分を構築します。

　チャート機能は、本稿の執筆時点でLZXリファレンスに「This component is of Beta quality and is subject to change.」とあるようにベータ版であり、その使用方法リファレンスもわずかです。その代わり、テストプログラムがOpenLaszloパッケージに同梱されていますので、こちらを参照するといいでしょう。

  • チャートテストプログラムの場所
    <OpenLaszloインストールパス>\OpenLaszlo Server 3.3\Server\
    lps-3.3\lps\components\charts\test\integral

　このパスには「barchart」「linechart」「columnchart」「piechart」の各ディレクトリがあり、その中にテストプログラムがいくつかあります。下記のURLのようにテストプログラムにアクセスすると、これらテストプログラムがどの様な動きをするか見ることができます。

  • linechartディレクトリのtest_line_01.lzxを動かしてみる
    http://localhost:8080/lps-3.3/lps/components/charts/test/
    integral/linechart/test_line_01.lzx

　また、第3回の後にOpenLaszloのバージョン3.3.1がリリースされました。これはこれまでにないほど小さなバグフィックス変更ですが、よく使われる<simplelayout>のバグフィックスですのでバージョンアップしておくといいでしょう。そのほかに3.3から3.3.1での変更点はありません。

　さらに、次期メジャーバージョンのOpenLaszlo Legalsの発表が行われました。LegalsではOpenLaszloのコンパイルターゲットとしてFlash9とDHTMLを加え、マルチランタイム環境対応を目指しています。公表されているLegals PR1バージョンは、マルチランタイムデモのLZPIXをSWF／DHTMLどちらにもコンパイルできるものがパッケージとしてダウンロードできます。

　Legalsのロードマップは、「Legals Project Plan」（Wikiページ）によると、2006年9月にDev版が、12月にFinal版がそれぞれリリースされる予定です。

　Legalsについては下記も参考にしてください。ちなみにLegalsとは、このプロジェクトを開始することを決めるランチミーティングをしていた、ボストンのレストラン名だそうです。

■当日株価チャートの実装

　まずは一番簡単そうな「当日株価チャート」を作成します。これは株価の時系列データを折れ線グラフで表すものです。折れ線グラフはline chartになります。取りあえずダミーデータを用意して折れ線グラフを書いてみます。

　その前に、X軸／Y軸の軸名に日本語を使えるようにするために、コンポーネントタグの<horizontalaxis>と<verticalaxis>を使用している各コンポーネントファイルのhorizontalaxis.lzxとverticalaxis.lzxに「<?xml version="1.0" encoding="UTF-8" ?>」を追加します。

  • <OpenLaszloインストールパス>\OpenLaszlo Server 3.2\Server\
    lps-3.2\lps\components\charts\common\horizontalaxis.lzx

    <?xml version="1.0" encoding="UTF-8" ?>　←これを追加する
    <library>
    　……
    　……
  • <OpenLaszloインストールパス>\OpenLaszlo Server 3.2\Server\
    lps-3.2\lps\components\charts\common\verticalaxis.lzx

    <?xml version="1.0" encoding="UTF-8" ?>　←これを追加する
    <library>
    　……
    　……

　追加したらOpenLaszloを再起動してください。当日株価チャート（dailychart.lzx）をリスト1に示します。

<?xml version="1.0" encoding="UTF-8" ?>
<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>

  <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>
</canvas>
リスト1　当日株価チャート（dailychart.lzx）

　リスト1はアプリケーションとして作成しています。この状態でいろいろとテストができます（図1）。

図1　当日株価チャート

　「stockdaily」データセットは実際にはサーバから定期的に読み込むようにしますが、現時点はこのままにしておきます。

　 1/4

　INDEX

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




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

注目のテーマ

HTML5＋UX 記事ランキング

本日 月間
＠IT