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

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

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

 同様に「過去株価一覧」もクラス化します(リスト4)。

 

 

 

 

 

 

 

<?xml version="1.0" encoding="UTF-8" ?>
<library>                               <!-- Step1 -->
  <!--                                       Step3
  <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>
  -->
  <class name="stockdata">             <!-- Step2 -->
    <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>
  </class>                              <!-- Step2 -->
  <!--                                       Step3
  </canvas>
  -->
</library>                              <!-- Step1 -->
リスト4 クラス化された過去株価一覧(stockdata.lzx)

 そして、これらを組み込んだ画面チャートがリスト5となります。

<?xml version="1.0" encoding="UTF-8" ?>
<canvas>
  <include href="dailychart.lzx"/>  <!-- 当日株価チャートクラス -->
  <include href="stockdata.lzx"/>   <!-- 過去株価一覧クラス -->

  <dataset name="meigara">
    <company id="1">(株)ABC社</company>
    <company id="2">(株)XYZ社</company>
  </dataset>

  <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>

  <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>

  <class name="chartview" onmousedown="bringToFront();drg.apply()"
         onmouseup="drg.remove()" clip="true">
    <dragstate name="drg"/>
    <method event="ony">
      <![CDATA[
        var upper_y = 0;
        var lower_y = canvas.height;
        var now_y   = this.y;
        var height  = this.height; 
        if( now_y < upper_y ) this.setAttribute( 'y', upper_y );
        if( lower_y < (now_y+height) )
            this.setAttribute( 'y', lower_y-height );
      ]]>
    </method>
    <method event="onx">
      <![CDATA[
        var left_x  = 0;
        var right_x = canvas.width;
        var now_x   = this.x;
        var width   = this.width;
        if( now_x < left_x ) this.setAttribute( 'x', left_x );
        if( right_x < (now_x+width) )
            this.setAttribute( 'x', right_x-width );
      ]]>
    </method>
  </class>

  <class name="chkb" extends="checkbox" fontsize="14" visible="false">
    <method event="onclick">
      Debug.write( this.text + ":" + this.value );
    </method>
  </class>

  <!-- 
    銘柄、表示チャート選択ビュー
  -->
  <view name="cont" width="${canvas.width}"
        height="${canvas.height*0.2}">
    <simplelayout axis="x"/>
    <!-- 銘柄選択 -->
    <view name="stocklist" width="${parent.width*0.4}"
          height="${parent.height}" bgcolor="red">
      <text x="50" y="20" fontsize="14">銘柄:</text>
      <combobox name="cbox" x="90" y="20" defaulttext="銘柄選択"
                editable="false">
        <textlistitem datapath="meigara:/company"
                      text="$path{'text()'}" value="$path{'@id'}"/>
        <method event="onselect">
          var obj = this.getSelection();
          var id = obj.getValue();
          Debug.write( "id: " + id );

          with( canvas.cont.chartselect ){
            if( !cs1.visible ){
              for( var i=0; i<subviews.length; i++ ){
                subviews[i].setVisible( true );
              }

              cs1.setValue( true );
            }
          }
        </method>
      </combobox>
    </view>
    <!-- 表示チャート選択 -->
    <view name="chartselect" width="${parent.width*0.6}"
          height="${parent.height}"  bgcolor="green">
      <chkb name="cs1" x="10" y="10" text="ローソク足・出来高チャート"/>
      <chkb name="cs2" x="10" y="30" text="当日株価チャート"/>
      <chkb name="cs3" x="10" y="50" text="過去株価一覧"/>
    </view>
  </view>
  <!-- 
    チャート表示ビュー
  -->
  <view name="chartarea" y="${parent.cont.height+1}"
        width="${canvas.width}" height="${canvas.height*0.8}">
    <!-- ローソク足・出来高チャートビュー -->
    <chartview name="candlechart" x="0" y="0"
               width="${parent.width/2}"
               height="${parent.height/2}" bgcolor="blue"
               visible="${canvas.cont.chartselect.cs1.value}"/>
    <!-- リアルタイム株価チャートビュー -->
    <chartview name="realtimechart" x="${parent.width/2}" y="0"
               width="${parent.width/2}" height="${parent.height/2}"
               bgcolor="silver"
               visible="${canvas.cont.chartselect.cs2.value}">
      <dailychart width="${parent.width}" height="${parent.height}"/>       <!-- 当日株価チャートクラス -->
    </chartview>
    <!-- 株価一覧ビュー -->
    <chartview name="datalist" x="0" y="${parent.height/2}"
               width="${parent.width}" height="${parent.height/2}"
               bgcolor="yellow"
               visible="${canvas.cont.chartselect.cs3.value}">
      <stockdata width="${parent.width}" height="${parent.height}"/>       <!-- 過去株価一覧クラス -->
    </chartview>
  </view>
</canvas>
リスト5 画面ビュー

 リスト5は、前回の画面チャートプログラムに、各クラス分を追加しただけです。ただし、<chartview>クラスにclip属性を追加しています。このclip属性を設定することで、描画範囲にクラスコンポーネントを固定できます(図3)。

図3 リアルタイム株価チャート(画面をクリックすると拡大します)

 今回はコードだらけになってしまいましたが、このようにコンポーネントをアプリケーションとして作成して試験を行い、その後にクラス化して使用することが簡単にできます。第2回「Webアプリと連携するためのコーディング基礎」で、LZXファイルとJSPのようなサーバサイドプログラムを分離して開発できると述べましたが、LZXファイル自体もコンポーネントごとに開発できるので、並行開発が容易になっています。

 次回は、残りのローソク足・出来高チャートを組み込むことと、クラスをよりクラスらしくします。お楽しみに。(次回へ続く)

  4/4  

 INDEX

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




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

注目のテーマ

HTML5+UX 記事ランキング

本日 月間