対象読者
jQueryや最新のWeb技術に興味のある人。データ視覚化に興味のある人。
必要環境
『jQueryで地震分布図を作成しよう』においても言及されているように、開発環境やプラットフォームには依存しません。コード編集用のエディタと動作確認用のブラウザのみを用意してください。ただし、今回利用するigDataChartコントロールは下記の機能を利用しています。対応していないブラウザでは正しく動作しません。
- HTML5マークアップ：CANVAS
- HTML5 API：キャンバス
現在のような過渡期では、キャンバス機能が使えないブラウザではその旨を表示したり、別の表現方法に差し替えたりする方法を検討しましょう。
コンポーネントの取得
はじめてIgnite UIを使用する場合は、事前にパッケージを取得する必要があります。Windowsインストーラー形式、あるいは必要ファイルのみがパッケージされた圧縮ファイルをインフラジスティックス社のWebページからダウンロードしてください（サイトへの登録が必要になります）。
この製品は有償ですが、20日間すべての機能を試用できる無償トライアル版として利用が可能です。
また、下記記事で紹介されているグリッドについては、商用利用可能な無料版が公開されています。
Ignite UIについて
「Ignite UI」はjQuery、jQuery UI、jQuery MobileをベースとしたHTML5/CSS対応コントロールスイートです。原稿執筆時点での最新バージョンは2013 Volume1となっており、モバイルデバイス、デスクトップ対応のリッチWebアプリケーションを構築するためのコントロールを数多く提供しています。特定の開発環境に依存していませんが、Visual Studioを利用する場合は、ASP.NET MVCのRazor構文でUI部分（View）を構築できるようになっており、Entity Frameworkなど今までのWeb資産を有効に活用できます。このIgnite UIを含め、インフラジスティックス社のコントロールを使用したサンプルについては、オンラインサンプルで確認することができます。
igDataChartについて
前述のとおり、HTML5のキャンバス機能を利用した高機能、高速チャートです。100万点もの大量データをストレスなく表示できることを目指して開発が行われました。また、今回利用するHTML5版だけにとどまらず、WPF、Silverlight、Windows UI（XAML、WinJS）、iOSそれぞれのプラットフォームにおいて共通の機能セットを持ったコントロールとして提供されています。
チャートを財務チャートとして表示
本題に入る前に、今回の記事は前回の記事のサンプルをスタート地点としていますが、jQueryおよびjQuery UIのバージョンアップを実施し、下記の部分が変更となっている点に注意してください。
<!-- 必要なスクリプトファイルの読み込み --> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
また、前回はチャートタイプをlineとして折れ線を表示していましたが、バインドしたデータは株価の情報なので、今回は財務チャートに変更したうえでインタラクション機能を利用します。財務チャートとして利用する場合、軸の設定以外に最低限下記のプロパティをシリーズオブジェクトに設定することになります。
| プロパティ名 | 説明 | 設定値 |
|---|---|---|
| type | 財務チャートを表すシリーズタイプ | financial |
| opemnMemberPath | 始値を表すデータへのバインド | Start |
| lowMemberPath | 安値を表すデータへのバインド | Low |
| highMemberPath | 高値を表すデータへのバインド | High |
| closeMemberPath | 終値を表すデータへのバインド | End |
$("#igDataChart1").igDataChart({
// … 省略
// シリーズの設定
series:
[
{
name: "stockSeries",
type: "financial",
xAxis: "axisX",
yAxis: "axisY",
openMemberPath: "Start",
lowMemberPath: "Low",
highMemberPath: "High",
closeMemberPath: "End",
title: "株価"
}
});
ページを開くと、ローソク足チャートが表示されました。
トレンドラインの追加
ローソク足チャートは、通常移動平均線などのトレンドラインと共にユーザーの目に触れる機会が多いものです。このigDataChartはさまざまなトレンドラインを実装しているため、トレンドラインを手動で計算し、表示させる必要がありません。
igDataChartが提供しているトレンドラインの種類は下記のとおりです。
| trendLineType | 説明 | trendLineType | 説明 |
|---|---|---|---|
| None | 表示なし | linearFit | リニアフィット |
| quadraticFit | 二次多項式フィット | cubicFit | 三次多項式フィット |
| quarticFit | 四次多項式フィット | logarithmFit | 対数フィット |
| exponentialFit | 指数フィット | powerLawFit | べき乗フィット |
| simpleAverage | 単純移動平均 | exponentialAverage | 指数移動平均 |
| modifiedAverage | 修正移動平均 | culmativeAverage | 累積移動平均 |
| weightedAverage | 加重移動平均 |
このトレンドラインを移動平均線で利用する場合は、次のプロパティをシリーズ内で定義します。
| プロパティ名 | 説明 | 設定値 |
|---|---|---|
| trendLineType | トレンドラインの種類 | simpleAverage |
| trendLinePeriod |
トレンドラインを計算するためのデータの期間
初期値：7
|
7 |
| trendLineThickness |
トレンドラインの太さ
初期値：1.5
|
4 |
| trendLineBrush | トレンドラインの色 | Red |
上記の設定を追加したシリーズ設定は下記のとおりです。
$("#igDataChart1").igDataChart({
// … 省略
// シリーズの設定
series:
[
{
name: "stockSeries",
type: "financial",
xAxis: "axisX",
yAxis: "axisY",
openMemberPath: "Start",
lowMemberPath: "Low",
highMemberPath: "High",
closeMemberPath: "End",
trendLineType: "simpleAverage",
trendLineThickness: 4,
trendLineThickness: "red",
trendLinePeriod: 7,
title: "株価"
}
});
これで赤色の移動平均線がページに表示されました。
このほかのトレンドラインや、計算期間を変更した場合の表示については、オンラインサンプルで確認できます。
拡大、縮小機能および十字ポインターの有効化
トレンドラインを利用し、数値の推移の傾向を示すことができるようになりましたが、次にユーザーに特定のエリアの拡大、縮小機能を提供できるようにしましょう。拡大、縮小機能は縦方向のズーム可否を設定するhorizontalZoomable、横方向のズーム可否を設定するverticalZoomableで別々に定義できるようになっています。例えば長期間のデータで、値の振れ幅が小さい場合は横方向のみの拡大、縮小を行わせるということが可能になります。
horizontalZoomable: true, verticalZoomable: true
上記の設定を追加すると、ユーザーがチャート領域の拡大、縮小を行えるようになります。
スクリーンショットではマウスでの拡大、縮小時の様子を示しています。矩形での領域設定以外にもマウスホイールでの拡大縮小や、タッチインタラクションである、スプレッド、ピンチによる拡大、縮小にも対応しています。
さて、このままでは全体を表示しているのか、あるいは一部を拡大しているのかを伝える術がなく、ユーザーにとっては不親切です。この問題を解決するため、概要を表示させるオプションを有効化します。
overviewPlusDetailPaneVisibility: "visible"
このオプションを利用することで、現在の表示領域に全体のどこの部分が表示されているかを確認することができます。
凡例によるチャートデータの説明
最後にこのチャートがどういったチャートであるかを示す凡例を追加するため、凡例用のHTML要素を設定します。
<body>
<table>
<tbody>
<tr>
<td>
<!-- チャートの領域 -->
<div id="igDataChart1"></div>
</td>
<td style="vertical-align: top">
<!-- 凡例の領域 -->
<div id="legend"></div>
</td>
</tr>
</tbody>
</table>
</body>
コードでは、legendプロパティを設定します。
legend: { element: "legend", type: "legend" }
これで必要な情報を提示しつつ、ユーザーがより細かい情報を見ることができるようになりました。
ここまでのすべてのコードは、次のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>igDataChart</title>
<!-- 必要なスクリプトファイルの読み込み -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js" type="text/javascript"></script>
<!-- Infragistics Loader を読み込み -->
<script src="IG/js/infragistics.loader.js" type="text/javascript"></script>
<!-- チャートデータを読み込み -->
<script src="SampleData.js" type="text/javascript"></script>
<script type="text/javascript">
$(function ()
{
// Infragistics Loader で igDataChart 関連リソースを呼び出します。
$.ig.loader({
scriptPath: 'IG/js',
cssPath: 'IG/css',
resources: 'igDataChart.*',
ready: function ()
{
// リソースがロードされた段階で処理を開始します。
// チャートの初期化を行います。
$("#igDataChart1").igDataChart({
dataSource: jpStockData,
width: "800px",
height: "600px",
// 軸の定義
axes:
[
{
// X 軸
name: "axisX",
type: "categoryX",
label: "DateData"
},
{
// Y 軸
name: "axisY",
type: "numericY"
}
],
// シリーズの設定
series:
[
{
name: "stockSeries",
type: "financial",
xAxis: "axisX",
yAxis: "axisY",
openMemberPath: "Start",
lowMemberPath: "Low",
highMemberPath: "High",
closeMemberPath: "End",
title: "株価",
trendLineType: "simpleAverage",
trendLineThickness: 4,
trendLineBrush: "red",
trendLinePeriod: 7
}
],
horizontalZoomable: true,
verticalZoomable: true,
overviewPlusDetailPaneVisibility: "visible",
legend: { element: "legend", type: "legend" }
});
}
});
});
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<!-- チャートの領域 -->
<div id="igDataChart1"></div>
</td>
<td style="vertical-align: top">
<!-- 凡例の領域 -->
<div id="legend"></div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
まとめ
今回はHTML5対応jQueryコンポーネントである、Ignite UIのigDataChartのさまざまな機能を有効化し、データの提示により意味を持たせたり、ユーザーの操作に応じて表示領域を変更する機能を紹介しました。コンポーネントが実現する機能を活用することで、それぞれを一から作るという工数を削減することが可能になります。ぜひ、試してみてください。次回はチャートに渡すデータの設定方法の詳細について解説を行います。
