スライダー付きチャート

!++++

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

!----

1. はじめに

本サンプルは、グラフ下部にスライダーを表示する設定例です。
スライダーおよび表示件数の指定に応じて、上部グラフの表示内容を制御します。

2. 利用条件

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

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

本サンプルでは、グラフブロックを配置した画面 を基に、Client-side JavaScript を利用して、グラフ下部に以下の操作要素を表示します。

• 件数
  グラフに表示する X 軸データの件数
• ページ移動
  ［＜］［＞］ボタンによるページ単位での移動
• スライダー
  グラフ内の表示範囲のスクロール
• 表示データ数
  グラフ内に表示されている X 軸データ数

これらの操作により、グラフの表示範囲および表示件数を切り替えます。

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

1. 事前準備（グラフブロック）
   スライダーの表示対象となるグラフブロックを用意します。  
2. Client-side JavaScriptの設定
   機能設定画面の Client-side JavaScript にて、スライダー機能のカスタマイズ処理を設定します。
   表示件数、ページ移動、スライダー操作に応じて、グラフの表示範囲を制御します。
3. CSSの設定
   機能設定画面の CSS にて、グラフおよびスライダーのスタイル設定を行います。

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

1. グラフ下部にスライダーが表示されること
2. 件数の入力により、X 軸の表示件数が切り替わること
3. ［＜］［＞］ボタンにより、ページ単位で移動できること
4. スライダー操作により、グラフの表示範囲をスクロールできること
5. スライダー右側に、表示中の X 軸データ数が表示されること

4. 画面イメージ

!++++

使用したコード一覧

• resizeContents_end()

!----