Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

ラインチャートの設定

 それではチャートの各項目を設定していきましょう。本稿では、株価の終値のみをシンプルにラインで表示することをゴールとします。すべてのリソースが読み込まれた時点で“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 チャートに株価の終値が表示された
図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 財務シリーズ
図5 -財務シリーズ

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

まとめ

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



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

著者プロフィール

バックナンバー

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

もっと読む

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