トレンドラインの追加
ローソク足チャートは、通常移動平均線などのトレンドラインと共にユーザーの目に触れる機会が多いものです。このigDataChartはさまざまなトレンドラインを実装しているため、トレンドラインを手動で計算し、表示させる必要がありません。
igDataChartが提供しているトレンドラインの種類は下記のとおりです。
| trendLineType | 説明 | trendLineType | 説明 |
|---|---|---|---|
| None | 表示なし | linearFit | リニアフィット |
| quadraticFit | 二次多項式フィット | cubicFit | 三次多項式フィット |
| quarticFit | 四次多項式フィット | logarithmFit | 対数フィット |
| exponentialFit | 指数フィット | powerLawFit | べき乗フィット |
| simpleAverage | 単純移動平均 | exponentialAverage | 指数移動平均 |
| modifiedAverage | 修正移動平均 | culmativeAverage | 累積移動平均 |
| weightedAverage | 加重移動平均 |
このトレンドラインを移動平均線で利用する場合は、次のプロパティをシリーズ内で定義します。
| プロパティ名 | 説明 | 設定値 |
|---|---|---|
| trendLineType | トレンドラインの種類 | simpleAverage |
| trendLinePeriod |
トレンドラインを計算するためのデータの期間
初期値：7
|
7 |
| trendLineThickness |
トレンドラインの太さ
初期値：1.5
|
4 |
| trendLineBrush | トレンドラインの色 | Red |
上記の設定を追加したシリーズ設定は下記のとおりです。
$("#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: "株価"
}
});
これで赤色の移動平均線がページに表示されました。
このほかのトレンドラインや、計算期間を変更した場合の表示については、オンラインサンプルで確認できます。
拡大、縮小機能および十字ポインターの有効化
トレンドラインを利用し、数値の推移の傾向を示すことができるようになりましたが、次にユーザーに特定のエリアの拡大、縮小機能を提供できるようにしましょう。拡大、縮小機能は縦方向のズーム可否を設定するhorizontalZoomable、横方向のズーム可否を設定するverticalZoomableで別々に定義できるようになっています。例えば長期間のデータで、値の振れ幅が小さい場合は横方向のみの拡大、縮小を行わせるということが可能になります。
horizontalZoomable: true, verticalZoomable: true
上記の設定を追加すると、ユーザーがチャート領域の拡大、縮小を行えるようになります。
スクリーンショットではマウスでの拡大、縮小時の様子を示しています。矩形での領域設定以外にもマウスホイールでの拡大縮小や、タッチインタラクションである、スプレッド、ピンチによる拡大、縮小にも対応しています。
さて、このままでは全体を表示しているのか、あるいは一部を拡大しているのかを伝える術がなく、ユーザーにとっては不親切です。この問題を解決するため、概要を表示させるオプションを有効化します。
overviewPlusDetailPaneVisibility: "visible"
このオプションを利用することで、現在の表示領域に全体のどこの部分が表示されているかを確認することができます。
