Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

「Wijmo(ウィジモ) 5」新版で追加されたFinancialChartを使いこなす

ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用 第5回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

FinancialChartのチャート型式

 FinancialChartでは金融分野で用いられる様々なチャート型式をサポートしています。チャート形式はwj-financial-chartディレクティブのchart-type属性で指定します。チャート型式によっては表示に複数のデータが必要になるため、表示するデータを指定するbinding属性に複数データをカンマ区切りで指定する必要があります。主なチャート型式と、binding属性に指定するデータを表2に示します。

表2 FinancialChartで表示できる主なチャート型式
名称名 チャート型式 binding属性に指定するデータ
Line 線グラフ 任意の1系列
Area 面グラフ 任意の1系列
Column 棒グラフ 任意の1系列
Candlestick ローソク足 高値、安値、始値、終値
HeikinAshi 平均足 高値、安値、始値、終値
Renko 練行足 高値、安値、始値、終値
Kagi カギ足 高値、安値、始値、終値
LineBreak 新値足 高値、安値、始値、終値
ColumnVolume カラムボリューム 任意の1系列、出来高
EquiVolume エクイボリューム 高値、安値、始値、終値、出来高
CandleVolume ローソクボリューム 高値、安値、始値、終値、出来高
ArmsCandleVolume アームキャンドルボリューム 高値、安値、始値、終値、出来高

 この中でローソク足を表示する例をリスト3に示します。

リスト3 ローソク足を表示(002_wijmo_financialchart2a.html)
<!-- FinancialChart表示 ...(1)-->
<wj-financial-chart items-source="chartData"
                    binding-x="date"
                    chart-type="Candlestick"
                    style="width:640px;height:300px;">
    <!-- データ系列 ...(2)-->
    <wj-financial-chart-series binding="high,low,open,close">
    </wj-financial-chart-series>
</wj-financial-chart>

 (1)で、wj-financial-chartディレクティブのchart-type属性にローソク足を表す「Candlestick」を指定します。また(2)のbinding属性には「高値、安値、始値、終値」の順になるように、対応するデータ名を「high,low,open,close」とカンマ区切りで指定します。

 リスト3を実行すると図3のようにローソク足が表示されます。

図3 ローソク足を表示(002_wijmo_financialchart2a.html)
図3 ローソク足を表示(002_wijmo_financialchart2a.html)

 ダウンロードできるサンプルファイルには、リスト3を修正してローソク足以外の複数グラフ型式を切り替えて表示できるようにした例(003_wijmo_financialchart2b.html)を含めています。

FlexChartの機能も利用可能

 FinancialChartはFlexChartをベースとしているため、FlexChartが備えるさまざまな機能をFinancialChartでも利用可能です。

チャートに補助線とラベルを表示するLineMarker

 LineMarkerはチャート内にテキストと縦横の補助線を表示します。wj-financial-chart内にリスト4のようにwj-flex-chart-line-markerディレクティブで記述します。

リスト4 LineMarkerの実装例(004_wijmo_financialchart3.html)
<!-- LineMarker -->
<wj-flex-chart-line-marker lines="Vertical"
                           interaction="Drag"
                           content="getMarkerContent"
                           position-changed="markerChanged(s, e)">
</wj-flex-chart-line-marker>

 主な属性を表3に示します。linesにはデフォルト値の他にHorizontal(横線)やBoth(縦横)、interactionはMove(マウス移動に線が追従)が指定できます。ここではlinesにVertical(縦線)、interactionにDrag(ドラッグで線を移動)を指定しています。

表3 LineMarkerの主な属性
属性名 意味 デフォルト値
lines 表示する線 None(表示なし)
interaction 線の動作 None(動作なし)
content 表示テキストを取得するメソッド (指定なし)
position-changed 線の位置が変更された場合のイベントハンドラ (指定なし)

 LineMarkerのJavaScript実装をリスト5に示します。

リスト5 LineMarkerの処理(004_wijmo_financialchart3.html)
// マーカー位置変更のハンドラ ...(1)
$scope.markerChanged = function (sender, e) {
    // 対応するデータを取得 ...(2)
    var hitTestInfo = $scope.chart.series[0].hitTest(e.x, NaN);
    // 取得できたら表示文字列を作成 ...(3)
    if (hitTestInfo.item != null) {
        markerContent = hitTestInfo.item.date
                      + "<br/>"
                      + hitTestInfo.item.close;
    }
};

// マーカー文字列を取得 ...(4)
$scope.getMarkerContent = function() {
    return markerContent;
};

 リスト4のposition-changed属性に指定したマーカー位置変更イベントハンドラ(1)の、第1引数senderはイベント発生元のオブジェクト、第2引数eは座標です。

 (2)のhitTestメソッドで、チャート上の座標(第1引数:x座標、第2引数:y座標)に対応するデータをデータ系列から取得します。ここではx座標のみで判定するためy座標にNaNを指定します。

 (3)では(2)で取得したデータから表示テキストを作成して変数markerContentに格納しています。markerContentの内容はリスト4のcontent属性に指定したgetMarkerContentメソッド(4)で返却します。

 リスト4、5を実行すると図4のようにマーカーが表示されます。マーカーはドラッグで位置を変更できます。

図4 LineMarkerを表示(004_wijmo_financialchart3.html)
図4 LineMarkerを表示(004_wijmo_financialchart3.html)

チャートの範囲を選択するRangeSelector

 RangeSelectorは範囲を指定するスライダーをチャートに表示します。wj-flex-chart-range-selectorディレクティブでリスト6のように記述します。

リスト6 RangeSelectorの実装例(005_wijmo_financialchart4.html)
<!-- RangeSelector -->
<wj-flex-chart-range-selector
                range-changed="rangeChanged(s, e)">
</wj-flex-chart-range-selector>

 range-changed属性に指定しているイベントハンドラはリスト7のように記述します。(1)でRangeSelectorを取得し、(2)でmin、maxプロパティから範囲を取得してチャートに設定します。

リスト7 RangeSelectorの処理(005_wijmo_financialchart4.html)
// RangeSelectorの変更時処理
$scope.rangeChanged = function (sender, e) {
    // チャートとRangeSelectorを取得 ...(1)
    var chart = $scope.chart;
    var rangeSelector = sender;
    if (chart != null && rangeSelector != null) {
        // min、maxをRangeSelectorの選択範囲で設定 ...(2)
        chart.axisX.min = rangeSelector.min;
        chart.axisX.max = rangeSelector.max;
    }
};

 なおRangeSelectorを利用するためにはscriptタグでwijmo.chart.interaction.min.jsへの参照を記述する必要があります。

 リスト6、7を実行すると図5のように表示され、下のチャートに表示されたRangeSelectorで指定した範囲が上のチャートに反映されます。

図5 RangeSelectorを表示(005_wijmo_financialchart4.html)
図5 RangeSelectorを表示(005_wijmo_financialchart4.html)

データのおおまかな変化を表示する移動平均線

 移動平均線はデータの細かい変動を省略しておおまかな傾向を表示します。移動平均線を表示するにはwj-flex-chart-moving-averageディレクティブでリスト8のように記述します。

リスト8 移動平均線の実装例(006_wijmo_financialchart5a.html)
<!-- データ系列(移動平均線) -->
<wj-flex-chart-moving-average binding="close"
                              name="移動平均"
                              type ="Simple"
                              period="2">

 type属性に移動平均の種類、period属性に移動平均するデータ数を指定します。ここではそれぞれ「Simple」「2」を設定して、直近の2個の値を単純に平均するよう指定しています

 なお移動平均線を利用するためにはscriptタグでwijmo.chart.analytics.min.jsへの参照を記述する必要があります。

 リスト8を実行すると、実データに対して移動平均を適用したグラフが表示されます。

図6 移動平均線を表示(006_wijmo_financialchart5a.html)
図6 移動平均線を表示(006_wijmo_financialchart5a.html)

 サンプルファイルにはtypeとperiod属性を切り替えて表示する例(007_wijmo_financialchart5b.html)を含めていますので参考にしてください。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5