レンジセレクタ付きチャート

!++++

Ver.6　[ 機能を見る ] [ 機能設定を見る ]
※Ver5のサンプルは用意しておりません。

!----

1. はじめに

本サンプルは、グラフ下部にレンジセレクタを表示する設定例です。
レンジセレクタで選択した期間・範囲に応じて、上部グラフの表示内容を制御します。

2. 利用条件

この機能を利用するには、グラフオプションの有償ライセンスが必要です。

3. サンプル機能の内容と確認ポイント

本サンプルでは、グラフブロックを配置した画面 を基に、Client-side JavaScript を利用してグラフ下部にレンジセレクタを表示しています。
レンジセレクタ上で期間範囲をドラッグ操作により指定した場合、指定された範囲が上部グラフの表示範囲として適用されます。
なお、レンジ指定は、レンジセレクタ上をクリックすることで解除されます。
 

設定の手順は次の通りです。

1. 事前準備（グラフブロック）
   レンジセレクタの表示対象となるグラフブロックを用意します。
    
2. Client-side JavaScriptの設定
   機能設定画面の Client-side JavaScript にてレンジセレクタ機能を有効化します。

🔍 確認いただけるポイント

1. グラフ下部にレンジセレクタが表示されること

2. レンジセレクタ上でドラッグ操作により期間範囲を指定できること

3. 指定した期間範囲が上部グラフの表示範囲として適用されること

4. レンジ指定を解除すると、上部グラフが全期間表示に戻ること

4. 画面イメージ

!++++

使用したコード一覧

• resizeContents_end()
   

!----