Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

 データを分かりやすく視覚化するポピュラーな手段として、最も利用される方法の一つにチャートがあります。膨大な数字の羅列では相関関係が分かりにくい場合でも、領域やバーの高さで素早く判断を行うことが可能で、報告や説明といった業務では特に多く利用されています。今回は、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版だけにとどまらず、WPFSilverlightWindows 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 シリーズのチャートタイプにラインを指定
図1 シリーズのチャートタイプにラインを指定

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

著者プロフィール

バックナンバー

連載:Infragistics NetAdvantageチュートリアル

もっと読む

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