ダウンロード サンプルファイル (3.2 MB)
データを分かりやすく視覚化するポピュラーな手段として、最も利用される方法の一つにチャートがあります。膨大な数字の羅列では相関関係が分かりにくい場合でも、領域やバーの高さで素早く判断を行うことが可能で、報告や説明といった業務では特に多く利用されています。今回は、HTML5対応コンポーネントスイートであるIgnite UIに含まれているigDataChartを利用し表示する方法を紹介します。
対象読者
jQueryや最新のWeb技術に興味のある人。データ視覚化に興味のある人。
必要環境
「jQueryで地震分布図を作成しよう」においても言及されているように、開発環境やプラットフォームには依存しません。コード編集用のエディタと動作確認用のブラウザのみを用意してください。ただし、今回利用するigDataChartコントロールは下記の機能を利用しています。対応していないブラウザでは正しく動作しません。
- HTML5マークアップ：CANVAS
- HTML5API：キャンバス
現在のような過渡期では、キャンバス機能が使えないブラウザではその旨を表示したり、別の表現方法に差し替えたりする方法も検討しましょう。
コンポーネントの取得
はじめて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それぞれのプラットフォームにおいて共通の機能セットを持ったコントロールとして提供されています。
本稿では入門編として、データ形式並びにチャートの種類の解説、その他チャート要素について紹介します。また、これらの詳細はオンラインヘルプで詳しく説明されています。
対応しているデータ形式
igDataChartは、次の構造のデータをチャートに表現できます。
- JSON形式（クライアント、Web、WCFサービスから）
- XML形式（クライアント、Web、WCFサービスから）
- JavaScript配列
- IQueryable<T>（ASP.NET MVCを利用した場合のみ）
これらのデータは、チャート内部でigDataSourceオブジェクトによって管理されます。igDataSourceオブジェクトについてはこちらを参照してください。チャートのみ利用する場合は、このオブジェクトを意識する必要はありません。
シリーズ
このigDataChartではシリーズというオブジェクトで棒、柱状、ラインなど、チャートの種類を設定し、データへのマッピングを定義します。現在サポートされているチャートの種類については、表1を参照してください。
| 棒 | 柱状 | ライン | エリア |
|---|---|---|---|
| スプライン | スプラインエリアチャート | ウォーターフォール | ロウソク足 |
| OHLC | 極座標散布図 | 極座標折れ線チャート | 極座標エリアチャート |
| ラジアル折れ線チャート | ラジアル柱状チャート | ラジアル円チャート | 範囲エリアチャート |
| 範囲柱状チャート | バブル | 散布図 | 散布図-折れ線 |
それぞれのチャートの種類に合わせて、データのマッピングを設定する必要があります。例えばラインチャートの場合は、valueMemberPathというプロパティにチャートデータを表す項目を設定します。
この記事は参考になりましたか？
- Infragistics NetAdvantageチュートリアル連載記事一覧
-
- HTML5対応チャートコンポーネントを利用したデータ視覚化入門 その2 - さまざまな機能...
- HTML5対応チャートコンポーネントを利用したデータ視覚化入門 その1 - チャートを表示...
- jQueryで地震分布図を作成しよう
- この記事の著者
-
インフラジスティックス・ジャパン株式会社 池原 大然（イケハラ ダイゼン）
国内ベンチャー企業にて.NETエンジニアとして開発に従事、2007年インフラジスティックス・ジャパンに入社。現在デベロッパー エバンジェリストとして、.NETやWPF/Silverlight製品や技術の啓蒙活動を行う。Microsoft MVP for Client App Dev 2010/04 ...
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社
この記事は参考になりましたか？
この記事をシェア
