OpenLaszloアドバンスド・テクニック
OpenLaszloアドバンスド・テクニック(4) Page 2/4

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

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

過去株価一覧の実装

 次に過去の株価一覧を表示します。表示項目は「日付」「始値」「高値」「安値」「終値」「前日比」「出来高」とします。これらを一覧表示するために<grid>タグを使用してみます。こちらも取りあえずダミーデータを使います(リスト2)。

 

 

 

<?xml version="1.0" encoding="UTF-8" ?>
<canvas>
  <dataset name="stockdata">
    <records>
      <record date="6/1" start="10,010" hight="10,050" low="10,010"
              end="10,040" ratio="+30" deal="100"/>
      <record date="6/2" start="10,040" hight="10,050" low="10,010"
              end="10,010" ratio="-30" deal="100"/>
      <record date="6/3" start="10,010" hight="10,050" low="10,010"
              end="10,040" ratio="+30" deal="100"/>
      <record date="6/4" start="10,040" hight="10,050" low="10,010"
              end="10,010" ratio="-30" deal="100"/>
      <record date="6/5" start="10,010" hight="10,050" low="10,010"
              end="10,040" ratio="+30" deal="100"/>
      <record date="6/6" start="10,040" hight="10,050" low="10,010"
              end="10,010" ratio="-30" deal="100"/>
      <record date="6/7" start="10,010" hight="10,050" low="10,010"
              end="10,040" ratio="+30" deal="100"/>
      <record date="6/8" start="10,040" hight="10,050" low="10,010"
              end="10,010" ratio="-30" deal="100"/>
      <record date="6/9" start="10,010" hight="10,050" low="10,010"
              end="10,040" ratio="+30" deal="100"/>
      <record date="6/10" start="10,040" hight="10,050" low="10,010"
              end="10,010" ratio="-30" deal="100"/>
    </records>
  </dataset>

  <grid width="500" height="300" showvlines="true" showhlines="true"
        datapath="stockdata:/records">
    <gridcolumn width="${parent.width*0.1}" sortable="false">日付
      <text datapath="@date"/>
    </gridcolumn>
    <gridcolumn width="${parent.width*0.16}" sortable="false">始値
      <text datapath="@start"/>
    </gridcolumn>
    <gridcolumn width="${parent.width*0.16}" sortable="false">高値
      <text datapath="@hight"/>
    </gridcolumn>
    <gridcolumn width="${parent.width*0.16}" sortable="false">安値
      <text datapath="@low"/>
    </gridcolumn>
    <gridcolumn width="${parent.width*0.16}" sortable="false">終値
      <text datapath="@end"/>
    </gridcolumn>
    <gridcolumn width="${parent.width*0.1}" sortable="false">前日比
      <text datapath="@ratio"/>
    </gridcolumn>
    <gridcolumn width="${parent.width*0.16}" sortable="false">取引高
      <text datapath="@deal"/>
    </gridcolumn>
  </grid>
</canvas>
リスト2 過去株価一覧(stockdata.lzx)

 これもアプリケーションとして作成しています。この状態でいろいろとテストができます(図2)。

図2 過去株価一覧

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

  2/4

 INDEX

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




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

注目のテーマ

HTML5+UX 記事ランキング

本日 月間