Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

HTML5対応チャートコンポーネントを利用したデータ視覚化入門 その2 - さまざまな機能を使って利用者にわかりやすくデータを提示しよう

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

 前回は、HTML5、jQueryを利用し実現するigDataChartにデータを表示させました。今回は追加の機能を利用し、よりユーザーにとっての使い勝手やデータの視認性を高めるように設定しましょう。

目次

対象読者

 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版だけにとどまらず、WPFSilverlightWindows UI(XAML、WinJS)iOSそれぞれのプラットフォームにおいて共通の機能セットを持ったコントロールとして提供されています。

チャートを財務チャートとして表示

 本題に入る前に、今回の記事は前回の記事のサンプルをスタート地点としていますが、jQueryおよびjQuery UIのバージョンアップを実施し、下記の部分が変更となっている点に注意してください。

コード例1 jQueryライブラリの更新
<!-- 必要なスクリプトファイルの読み込み -->
<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として折れ線を表示していましたが、バインドしたデータは株価の情報なので、今回は財務チャートに変更したうえでインタラクション機能を利用します。財務チャートとして利用する場合、軸の設定以外に最低限下記のプロパティをシリーズオブジェクトに設定することになります。

表1 財務シリーズの設定値
プロパティ名 説明 設定値
type 財務チャートを表すシリーズタイプ financial
opemnMemberPath 始値を表すデータへのバインド Start
lowMemberPath 安値を表すデータへのバインド Low
highMemberPath 高値を表すデータへのバインド High
closeMemberPath 終値を表すデータへのバインド End
コード例2 ローソク足チャートを表示するコード
$("#igDataChart1").igDataChart({
    // … 省略

    // シリーズの設定
    series: 
    [
        {
            name: "stockSeries",
            type: "financial",
            xAxis: "axisX",
            yAxis: "axisY",
            openMemberPath: "Start",
            lowMemberPath: "Low",
            highMemberPath: "High",
            closeMemberPath: "End",
            title: "株価"
        } 
});

 ページを開くと、ローソク足チャートが表示されました。

図1 ローソク足チャート
図1 - ローソク足チャート

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

著者プロフィール

バックナンバー

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

もっと読む

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