Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

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

 本連載では、グレープシティが提供するJavaScriptライブラリWijmo(ウィジモ)について、サンプルとともに利用例を紹介します。今回は2015年9月のアップデートで追加された新コンポーネント「FinancialChart」を取り上げます。FinancialChartを使うと、株式やFXといった金融の分野でよく利用されるチャートをWebページに表示できます。

はじめに

 Wijmo(ウィジモ)は、グレープシティがHTML/JavaScript環境に向けて提供しているJavaScriptライブラリで、WebサイトやWebアプリケーションで活用できるUI部品を利用者に提供します。

 Wijmoを含めたグレープシティのライブラリ部品は2015年9月にバージョンアップを受けて「2015J v2」となりました。このバージョンアップでWijmoに新たに追加されたのがFinancialChartで、金融分野に特化したチャート部品になっています。

FinancialChartの表示例(グレープシティのWebページより)

図1 FinancialChartの表示例(グレープシティのWebページより)

 FinancialChartは表1のような特徴を備えています。従来のチャート部品FlexChartをベースとして、金融向けの表示形式やツールを備えたものになっています。

表1 FinancialChartの特徴
概要 詳細
金融特化チャート ローソク足や平均足などの表示をサポート
金融分析ツール フィボナッチツールを提供
FlexChartと似た利用法 少ない学習コストで利用可能

 なおFinancialChartは技術的にはWijmo 5の一部として動作しますが、ライセンス的にはWijmoの最上位エディションであるWijmo Enterpriseが必要になります。

 本記事ではFinancialChartの概要と利用法を、サンプルを交えて説明していきます。

対象読者

  • WebサイトやWebアプリケーションのレベルをワンランク上げたい方
  • より軽量/高速なJavaScriptのUI部品を探している方
  • 金融分野独特のチャートを手軽に表示したい方

必要な環境

 Wijmo 5はECMAScript 5をサポートする、いわゆるモダンブラウザをターゲットにしており、WijmoのWebサイトでは以下のブラウザがサポート対象として案内されています。

  • Internet Explorer:9以上
  • Microsoft Edge:最新版
  • Google Chrome:5以上
  • Mozilla Firefox:4以上
  • Safari:5以上
  • Opera:12以上

 今回は以下の環境で動作を確認しています。

  • Windows 7 64bit版
    • Internet Explorer 11

 なお本記事のサンプルコードはAngularJS(バージョン1.3.15)およびWijmo 5のAngularJS連携機能を利用しています。Wijmo 5のAngularJS連携機能については本連載の過去記事で紹介しています。

FinancialChartの基本

 最初にFinancialChartで最低限のチャートを表示するサンプルをリスト1に示します。

リスト1 FinancialChartでチャートを表示(001_wijmo_financialchart1.html)
<!DOCTYPE html>
<html ng-app="MyApp"> <!-- モジュールを指定 ...(1)-->
<head>
<meta charset="UTF-8">
<title>Wijmo 5 FinancialChartサンプル1</title>

<!-- Wijmo ...(2)-->
<script src="http://cdn.wijmo.com/5.20152.90/controls/wijmo.min.js" type="text/javascript"></script>
<link href="http://cdn.wijmo.com/5.20152.90/styles/wijmo.min.css" rel="stylesheet" type="text/css" />

<!-- Wijmoコントロール ...(3)-->
<script src="http://cdn.wijmo.com/5.20152.90/controls/wijmo.chart.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.20152.90/controls/wijmo.chart.finance.min.js" type="text/javascript"></script>

<!-- Wijmoテーマ ...(4)-->
<link href="http://cdn.wijmo.com/5.20152.90/styles/themes/wijmo.theme.modern.min.css" rel="stylesheet" type="text/css" />

<!-- Wijmoカルチャ ...(5)-->
<script src="http://cdn.wijmo.com/5.20152.90/controls/cultures/wijmo.culture.ja.min.js " type="text/javascript"></script>

<!-- AngularJSとWijmoのAngularディレクティブ ...(6)-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.20152.90/interop/angular/wijmo.angular.min.js" type="text/javascript"></script>

<!-- 日経平均株価のデータ ...(7)-->
<script src="data/nikkei_201508-09.js" type="text/javascript"></script>

<script type="text/javascript">
    // Wijmoモジュール"wj"を指定して新規モジュールを作成
    var myApp = angular.module("MyApp", ["wj"]);

    // モジュールにコントローラーを定義
    myApp.controller("MyController", ["$scope", function($scope) {
        // 日経平均株価を設定 ...(8)
        $scope.chartData = nikkei;
    }]);
</script>
</head>

<!-- bodyタグ内でMyControllerを参照 -->
<body ng-controller="MyController">
<h1>Wijmo 5 FinancialChartサンプル1</h1>

<!-- FinancialChart表示 ...(9)-->
<wj-financial-chart items-source="chartData"
                    binding-x="date"
                    style="width:640px;height:300px;">
    <!-- データ系列(始値) ...(10)-->
    <wj-financial-chart-series name="始値" binding="open">
    </wj-financial-chart-series>
    <!-- データ系列(終値) ...(11)-->
    <wj-financial-chart-series name="終値" binding="close">
    </wj-financial-chart-series>
</wj-financial-chart>

</body>
</html>

 (1)はAngularJSのモジュール指定、(2)~(6)はWijmoとAngularJSを参照する記述です。FinancialChartを利用するには(3)のようにwijmo.chart.min.jsとwijmo.chart.finance.min.jsを参照します。

 (7)はチャートに表示するデータです。ファイルの内容はリスト2のようになっており、2015年8~9月の日経平均株価を格納したJavaScriptオブジェクト配列nikkeiを定義しています。この配列をリスト1(8)でスコープの変数chartDataに代入しています。

リスト2 チャートに表示する日経平均株価データ(nikkei_201508-09.js)
var nikkei =
[
    {
        "date": "2015年08月03日",   // 日付
        "open": 20540.21,           // 始値
        "close": 20548.11,          // 終値
        "high": 20562.2,            // 高値
        "low": 20396.5,             // 安値
        "volume": 2412340000        // 出来高
    },
// 以下繰り返し
];

 (9)のwj-financial-chartディレクティブ(独自タグ)でFinancialChartのチャート全体を記述します。items-source属性は表示するデータで、ここでは(8)で定義したchartDataを指定します。binding-x属性は横軸の指定でdate(日付)を指定します。

 (10)と(11)のwj-financial-chart-seriesディレクティブはデータ系列を表し、binding属性に指定されたデータがチャートに表示されます。ここでは(10)でopen(始値)を、(11)でclose(終値)をそれぞれ表示するようにしています。

 リスト1を実行すると図2のように、始値と終値の2本の折れ線グラフが表示されます。

図2 FinancialChartによるチャート表示(001_wijmo_financialchart1.html)
図2 FinancialChartによるチャート表示(001_wijmo_financialchart1.html)

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)を含めていますので参考にしてください。

金融動向の先読みを支援するフィボナッチツール

 金融指標の将来傾向を見通す方法の一つに「フィボナッチ数」があります。これはフィボナッチ級数に基づく黄金比の数値(0.618、0.382など)の割合で金融指標が反転するという考え方です。FinancialChartではフィボナッチ数に対応する比率をチャートに表示するフィボナッチツールが利用できます。

 フィボナッチツールを表示するにはwj-flex-chart-fibonacciディレクティブをリスト9のように記述します。uptrendはフィボナッチツールの上下どちらを100%にするかを設定する属性です。

リスト9 フィボナッチツールの表示(008_wijmo_financialchart6.html)
<!-- フィボナッチツール -->
<wj-flex-chart-fibonacci binding="close" uptrend="{{uptrend}}">
</wj-flex-chart-fibonacci>

 なおフィボナッチツールを利用するためには、scriptタグでwijmo.chart.finance.analytics.min.jsへの参照を記述する必要があります。

 リスト9を表示すると図7のように、フィボナッチ数に対応する比率がチャートに表示されます。ここではRangeSelectorと組み合わせて、フィボナッチツールの表示範囲を指定できるようにしています。uptrendにチェック(=属性をtrueに設定)するとフィボナッチツールの上下が入れ替わります。

図7 フィボナッチツールを表示(008_wijmo_financialchart6.html)
図7 フィボナッチツールを表示(008_wijmo_financialchart6.html)

まとめ

 本記事では、グレープシティのJavaScriptライブラリWijmoに追加された金融チャート部品FinancialChartを取り上げて利用法を説明しました。

 FinancialChartでは、従来のFlexChartでは表示できなかった金融分野独特のチャートをシンプルな指定で表示できます。FlexChartが提供するマーカーなどの機能がFinancialChartでも利用でき、またFinancialChart独自の分析機能としてフィボナッチツールが利用できることを紹介しました。金融チャートの表示や操作をWebページで行う必要が生じたときに、真っ先に利用を検討したい部品と言えるでしょう。

参考資料

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

著者プロフィール

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

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

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

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

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