HTML5対応チャートコンポーネントを利用したデータ視覚化入門その1 - チャートを表示させよう

2013/08/22 14:20

ポスト

　データを分かりやすく視覚化するポピュラーな手段として、最も利用される方法の一つにチャートがあります。膨大な数字の羅列では相関関係が分かりにくい場合でも、領域やバーの高さで素早く判断を行うことが可能で、報告や説明といった業務では特に多く利用されています。今回は、HTML5対応コンポーネントスイートであるIgnite UIに含まれているigDataChartを利用し表示する方法を紹介します。

ポスト

対象読者

　jQueryや最新のWeb技術に興味のある人。データ視覚化に興味のある人。

必要環境

　「jQueryで地震分布図を作成しよう」においても言及されているように、開発環境やプラットフォームには依存しません。コード編集用のエディタと動作確認用のブラウザのみを用意してください。ただし、今回利用するigDataChartコントロールは下記の機能を利用しています。対応していないブラウザでは正しく動作しません。

HTML5マークアップ：CANVAS
HTML5API：キャンバス

　現在のような過渡期では、キャンバス機能が使えないブラウザではその旨を表示したり、別の表現方法に差し替えたりする方法も検討しましょう。

コンポーネントの取得

　はじめてIgnite UIを使用する場合は、事前にパッケージを取得する必要があります。Windowsインストーラー形式、あるいは必要ファイルのみがパッケージされた圧縮ファイルをインフラジスティックス社のWebページからダウンロードしてください（サイトへの登録が必要です）。

　この製品は有償ですが、20日間すべての機能を試用できる無償トライアル版として利用が可能です。

　また、下記記事で紹介されているグリッドについては、商用利用可能な無料版が公開されています。

「jQueryを利用した軽量・高機能なクライアントサイド実装！」

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それぞれのプラットフォームにおいて共通の機能セットを持ったコントロールとして提供されています。

　本稿では入門編として、データ形式並びにチャートの種類の解説、その他チャート要素について紹介します。また、これらの詳細はオンラインヘルプで詳しく説明されています。

対応しているデータ形式

　igDataChartは、次の構造のデータをチャートに表現できます。

JSON形式（クライアント、Web、WCFサービスから）
XML形式（クライアント、Web、WCFサービスから）
JavaScript配列
IQueryable<T>（ASP.NET MVCを利用した場合のみ）

　これらのデータは、チャート内部でigDataSourceオブジェクトによって管理されます。igDataSourceオブジェクトについてはこちらを参照してください。チャートのみ利用する場合は、このオブジェクトを意識する必要はありません。

シリーズ

　このigDataChartではシリーズというオブジェクトで棒、柱状、ラインなど、チャートの種類を設定し、データへのマッピングを定義します。現在サポートされているチャートの種類については、表1を参照してください。

表1 組み込まれているチャートの種類
棒	柱状	ライン	エリア
スプライン	スプラインエリアチャート	ウォーターフォール	ロウソク足
OHLC	極座標散布図	極座標折れ線チャート	極座標エリアチャート
ラジアル折れ線チャート	ラジアル柱状チャート	ラジアル円チャート	範囲エリアチャート
範囲柱状チャート	バブル	散布図	散布図-折れ線

　それぞれのチャートの種類に合わせて、データのマッピングを設定する必要があります。例えばラインチャートの場合は、valueMemberPathというプロパティにチャートデータを表す項目を設定します。

図1 シリーズのチャートタイプにラインを指定

軸

　データをプロットする際の基準領域を示す縦、あるいは横線です。igDataChartでは、次の種類の軸を用意しています。

表2 サポートされている軸の種類
型	説明
numericX	数値X軸、散布図、カテゴリ、財務価格シリーズの表示
numericY	数値Y軸、散布図、カテゴリ、財務価格シリーズの表示
categoryX	カテゴリX軸、散布図、カテゴリ、財務価格シリーズの表示
categoryDateTimeX	時間単位X軸、散布図、カテゴリ、財務価格シリーズの表示
categoryY	カテゴリY軸、散布図、カテゴリ、財務価格シリーズの表示
categoryAngle	カテゴリ角度軸、ポーラ、ラジアルカテゴリの表示
numericAngle	数値角度軸、ポーラ、ラジアルカテゴリの表示
numericRadius	数値半径軸、ポーラ、ラジアルカテゴリの表示

その他のチャート要素

　これまで紹介した項目のほかにチャートで実現できる項目は、下記のとおりです。

凡例チャートの表示要素の説明を記載

ナビゲーションチャート表示領域の拡大・縮小や移動

十字ポインター現在のマウスポインターの位置を表示

マーカーデータポイントの強調

トレンドライン生データからの計算値を表示

ツールチップデータの詳細の表示

　これらを踏まえて、次項からチャートを構成していきましょう。

今回使用するデータ

　前述のとおり、igDataChartではさまざまな形式をサポートしています。本稿では、2013年6月の日経平均株価データをJSON配列として設定したサンプルデータを利用します。データの一部は次のようになっています。

コード例1 SampleData.js

var jpStockData =
[
    { "Date": "4/6/2013", "Start": 13186.6, "High": 13610.25, "Low": 13060.94, "End": 13533.76 },
    { "Date": "5/6/2013", "Start": 13566.75, "High": 13711.42, "Low": 13011.16, "End": 13014.87 },
    // 以下省略
];

必要なファイルをページへ追加

　先述の「jQueryで地震分布図を作成しよう」記事内の“地図分布の作成”項と同様に、Ignite UIを利用するためには、jQuery、jQuery UIライブラリーをインポートする必要があります。また、同時にModernizrのインポートを行うことで、igDataChartがブラウザの判定に利用します。

　今回はインフラジスティックス社のサイトから“Ignite UI 2013 Vol. 1 Complete Bundle（No Installer）”をダウンロードし、HTMLファイルが配置されているフォルダーと同じに階層に“IG”フォルダーを作成し、展開された内容をコピーしました。

図2 HTMLページと同じ階層にIGフォルダーを作成

図3 css,jsフォルダーにはIgnite UIのリソースがコピーされている

　さらにIgnite UIでは、コンポーネントの利用に必要なファイルを自動的にロードするInfragistics Loaderという仕組みを提供しています。ローダーを呼び出し、下記のようなパラメータを指定することで、利用するコンポーネントに応じたファイルが自動的にページへと読み込まれたり、テーマが適用されたりと動的に設定を切り替えることが可能になります。

表3 Infragistics Loaderにおいて設定可能な項目
設定項目	概要	今回の設定値
scriptPath	Ignite UIのjsファイルが設置されているフォルダー	‘IG/js’
cssPath	Ignite UIのcssや画像など外観に関するファイルが設置されているフォルダー	‘IG/css’
resources	利用するコントロールや機能。コントロールによっては機能ごとにモジュールが分割されており、すべての機能を利用する場合はアスタリスク（*）を指定	‘igDataChart.*’
theme	利用するテーマのフォルダーを指定（任意）	設定なし
locale	ウィジットのローカライズ設定。日本語版では“ja”があらかじめ設定されている（任意）	設定なし
regional	地域設定、localeと同時に使用（任意）	設定なし

　リソースがすべて読み込まれた後に、実際のコントロールの設定を行うことになります。本稿ではリソースが読み込まれた段階でチャートの処理を行うように、ready部分を設定しました。

コード例2 Ignite UIを利用するための準備が整った状態

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>igDataChart</title>
        <!-- 必要なスクリプトファイルの読み込み -->
        <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js" type="text/javascript"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js" type="text/javascript"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.5/jquery-ui.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 ()
                    {
                        // リソースがロードされた段階で処理を開始します。
                    }
                }); 
            });
        </script>
    </head>
    <body>
    </body>
</html>

　このリソースの設定方法については、下記のヘルプトピックも参考にしてください。

チャート領域のHTMLタグ設定

　igDataChartを利用する場合、idが設定されたdiv要素をページに追加します。その後、チャートそのものの設定はコード内で行うことになります。

コード例3 チャートを表示させる領域を確保しておく

<body>
    <!-- igDataChart1 というチャート要素を設定しておく -->
    <div id="igDataChart1"></div>
</body>

ラインチャートの設定

　それではチャートの各項目を設定していきましょう。本稿では、株価の終値のみをシンプルにラインで表示することをゴールとします。すべてのリソースが読み込まれた時点で“igDataChart1”というIDが設定されている要素に対してチャートを利用することを宣言し、利用するデータソース、並びにチャート領域の幅、高さなどを設定します。

コード例4 チャートの基本的な設定

$("#igDataChart1").igDataChart({
    dataSource: jpStockData,
    width: "800px",
    height: "600px"
});

　次にこのチャートで利用する軸を設定します。X軸にはカテゴリ軸を、Y軸には数値軸を定義します。

コード例5 軸の設定

// 軸の定義
axes: [{
    // X 軸
    name: "axisX",
    type: "categoryX",
    label: "DateData"
},
{
    // Y 軸
    name: "axisY",
    type: "numericY"
}]

　さらにチャートの種類である、シリーズを定義します。

コード例6 シリーズの設定

// シリーズの設定
series: [{
   name: "startSeries",
   type: "line",
   xAxis: "axisX",
   yAxis: "axisY",
   valueMemberPath: "End"
}]

　これで、チャートにデータが反映されることになります。

図4 チャートに株価の終値が表示された

　ここまでのコードをまとめたものが、コード例7です。

コード例7 チャート表示に最低限必要なソース

<!DOCTYPE html>
 
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>igDataChart</title>
        <!-- 必要なスクリプトファイルの読み込み -->
        <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js" type="text/javascript"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js" type="text/javascript"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.5/jquery-ui.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: "endSeries",
                            type: "line",
                            xAxis: "axisX",
                            yAxis: "axisY",
                            valueMemberPath: "End"
                        }]
                    });
                    }
                });
            });
        </script>
    </head>
<body>
    <div id="igDataChart1"></div>
</body>
</html>

　これらのように、igDataChartを利用してデータ表示する場合、最低限必要な項目は次の4点です。

チャート領域
データ
軸
シリーズ

　繰り返しですが、利用する軸やシリーズによっては、複数のプロパティに値を割り当てる必要があります。詳細はオンラインヘルプを参照してください。

　今回のデータを利用し、シリーズを変更すると以下のような表示です。

図5 財務シリーズ

　このほかに先述の凡例やナビゲーション、十字ポインター、マーカーなど、よりデータを理解しやすい機能を有効にすることができます。

まとめ

　今回は、HTML5対応jQueryコンポーネントであるIgnite UIのigDataChartにおいてチャートを表示させる方法をご紹介しました。高機能かつ、高パフォーマンスなチャートを利用することで、より魅力的なクロスブラウザ対応Webアプリケーションを作成することが可能になります。ぜひ、利用者に理解しやすいデータ表現を試してみてください。次回はこのチャートに機能を追加し、ユーザーとのインタラクションを実現する方法をご紹介します。

この記事は参考になりましたか？