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 - ローソク足チャート

トレンドラインの追加

 ローソク足チャートは、通常移動平均線などのトレンドラインと共にユーザーの目に触れる機会が多いものです。このigDataChartはさまざまなトレンドラインを実装しているため、トレンドラインを手動で計算し、表示させる必要がありません。

 igDataChartが提供しているトレンドラインの種類は下記のとおりです。

表2 トレンドラインの種類
trendLineType 説明 trendLineType 説明
None 表示なし linearFit リニアフィット
quadraticFit 二次多項式フィット cubicFit 三次多項式フィット
quarticFit 四次多項式フィット logarithmFit 対数フィット
exponentialFit 指数フィット powerLawFit べき乗フィット
simpleAverage 単純移動平均 exponentialAverage 指数移動平均
modifiedAverage 修正移動平均 culmativeAverage 累積移動平均
weightedAverage 加重移動平均    

 このトレンドラインを移動平均線で利用する場合は、次のプロパティをシリーズ内で定義します。

表3 トレンドラインの設定値
プロパティ名 説明 設定値
trendLineType トレンドラインの種類 simpleAverage
trendLinePeriod
トレンドラインを計算するためのデータの期間
初期値:7
7
trendLineThickness
トレンドラインの太さ
初期値:1.5
4
trendLineBrush トレンドラインの色 Red

 上記の設定を追加したシリーズ設定は下記のとおりです。

コード例3 トレンドラインを追加
$("#igDataChart1").igDataChart({
    // … 省略

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

 これで赤色の移動平均線がページに表示されました。

図2 トレンドラインが追加されたチャート
図2 - トレンドラインが追加されたチャート

 このほかのトレンドラインや、計算期間を変更した場合の表示については、オンラインサンプルで確認できます。

拡大、縮小機能および十字ポインターの有効化

 トレンドラインを利用し、数値の推移の傾向を示すことができるようになりましたが、次にユーザーに特定のエリアの拡大、縮小機能を提供できるようにしましょう。拡大、縮小機能は縦方向のズーム可否を設定するhorizontalZoomable、横方向のズーム可否を設定するverticalZoomableで別々に定義できるようになっています。例えば長期間のデータで、値の振れ幅が小さい場合は横方向のみの拡大、縮小を行わせるということが可能になります。

コード例4 拡大、縮小機能の有効化
horizontalZoomable: true,
verticalZoomable: true

 上記の設定を追加すると、ユーザーがチャート領域の拡大、縮小を行えるようになります。

図3 マウスによる矩形の拡大領域設定
図3 - マウスによる矩形の拡大領域設定
図4 拡大後
図4 - 拡大後

 スクリーンショットではマウスでの拡大、縮小時の様子を示しています。矩形での領域設定以外にもマウスホイールでの拡大縮小や、タッチインタラクションである、スプレッド、ピンチによる拡大、縮小にも対応しています。

 さて、このままでは全体を表示しているのか、あるいは一部を拡大しているのかを伝える術がなく、ユーザーにとっては不親切です。この問題を解決するため、概要を表示させるオプションを有効化します。

コード例5 ナビゲーション用のウィンドウを表示させるコード
overviewPlusDetailPaneVisibility: "visible"

 このオプションを利用することで、現在の表示領域に全体のどこの部分が表示されているかを確認することができます。

図5 全体のうちのどの領域が表示されているかを確認することができる
図5 - 全体のうちのどの領域が表示されているかを確認することができる

凡例によるチャートデータの説明

 最後にこのチャートがどういったチャートであるかを示す凡例を追加するため、凡例用のHTML要素を設定します。

コード例6 凡例用の領域を設定
<body>
    <table>
        <tbody>
            <tr>
                <td>
                    <!-- チャートの領域 -->
                    <div id="igDataChart1"></div>
                </td>
                <td style="vertical-align: top">
                    <!-- 凡例の領域 -->
                    <div id="legend"></div>
                </td>
            </tr>
        </tbody>
    </table>
</body>

 コードでは、legendプロパティを設定します。

コード例7 凡例の設定
legend: { element: "legend", type: "legend" }
図6 凡例が表示された
図6 - 凡例が表示された

 これで必要な情報を提示しつつ、ユーザーがより細かい情報を見ることができるようになりました。

 ここまでのすべてのコードは、次のようになります。

コード例8 すべてを実装したコード
<!DOCTYPE html>
 
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>igDataChart</title>
        <!-- 必要なスクリプトファイルの読み込み -->
        <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>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.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: "stockSeries",
                                    type: "financial",
                                    xAxis: "axisX",
                                    yAxis: "axisY",
                                    openMemberPath: "Start",
                                    lowMemberPath: "Low",
                                    highMemberPath: "High",
                                    closeMemberPath: "End",
                                    title: "株価",
                                    trendLineType: "simpleAverage",
                                    trendLineThickness: 4,
                                    trendLineBrush: "red",
                                    trendLinePeriod: 7
                                }
                            ],
                            horizontalZoomable: true,
                            verticalZoomable: true,
                            overviewPlusDetailPaneVisibility: "visible",
                            legend: { element: "legend", type: "legend" }
                        });
                    }
                });
            });
        </script>
    </head>
<body>
    <table>
        <tbody>
            <tr>
                <td>
                    <!-- チャートの領域 -->
                    <div id="igDataChart1"></div>
                </td>
                <td style="vertical-align: top">
                    <!-- 凡例の領域 -->
                    <div id="legend"></div>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

まとめ

 今回はHTML5対応jQueryコンポーネントである、Ignite UIのigDataChartのさまざまな機能を有効化し、データの提示により意味を持たせたり、ユーザーの操作に応じて表示領域を変更する機能を紹介しました。コンポーネントが実現する機能を活用することで、それぞれを一から作るという工数を削減することが可能になります。ぜひ、試してみてください。次回はチャートに渡すデータの設定方法の詳細について解説を行います。

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

著者プロフィール

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