Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

トレンドラインの追加

 ローソク足チャートは、通常移動平均線などのトレンドラインと共にユーザーの目に触れる機会が多いものです。この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 - 全体のうちのどの領域が表示されているかを確認することができる

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

著者プロフィール

バックナンバー

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

もっと読む

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