Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

今回使用するデータ

 前述のとおり、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フォルダーを作成
図2 HTMLページと同じ階層にIGフォルダーを作成
図3 css,jsフォルダーにはIgnite UIのリソースがコピーされている
図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>

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

著者プロフィール

バックナンバー

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

もっと読む

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