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

トレンドラインの追加

　ローソク足チャートは、通常移動平均線などのトレンドラインと共にユーザーの目に触れる機会が多いものです。この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 トレンドラインが追加されたチャート

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

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

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

コード例4 拡大、縮小機能の有効化

horizontalZoomable: true,
verticalZoomable: true

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

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

図4 拡大後

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

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

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

overviewPlusDetailPaneVisibility: "visible"

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

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