SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Infragistics NetAdvantageチュートリアル(AD)

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

トレンドラインの追加

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

次のページ
まとめ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Infragistics NetAdvantageチュートリアル連載記事一覧

もっと読む

この記事の著者

インフラジスティックス・ジャパン株式会社 池原 大然(イケハラ ダイゼン)

国内ベンチャー企業にて.NETエンジニアとして開発に従事、2007年インフラジスティックス・ジャパンに入社。現在デベロッパー エバンジェリストとして、.NETやWPF/Silverlight製品や技術の啓蒙活動を行う。Microsoft MVP for Client App Dev 2010/04 ...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7361 2013/09/05 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング