タイムラインスライサー

タイムラインスライサーは、年、四半期、月、日でデータをすばやくフィルタリングできるインタラクティブなフィルターです。任意の期間を拡大したり縮小したりするのに役立つコントローラを備えたビジュアルインターフェイスを提供し、ピボットデータを表示およびフィルター処理できるようにします。

タイムラインスライサーは、ラベルフィルターを使用して、ピボットテーブルの日付フィールドでのみ機能します。タイムラインスライサーは、Slicers.addメソッドを使用してピボットテーブルに追加できます。スライサーの種類として PivotTimeline を設定し、年、四半期、月、日付などのTimelineLevel列挙体のオプションを適用して、スライサーでデータをフィルター処理する方法を指定します。

PivotTableTimelineSlicerクラスは、スライサーのUIをカスタマイズするためのさまざまなメソッドを提供します。

使用例

本使用例では、四半期ごとに製品の販売データを表示する例を表しています。

次の図に示すように、タイムラインスライサーを使用して、期間に基づいてデータを分析できます。

// 年、四半期、月のフィルターのタイムラインスライサーを追加します。
var timeline_year = sheet.slicers.add("timeline_year", pt.name(), "注文日", GC.Spread.Sheets.Slicers.TimelineStyles.dark6(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline);
timeline_year.position(new GC.Spread.Sheets.Point(600, 10));
timeline_year.level(GC.Spread.Sheets.Slicers.TimelineLevel.years);
timeline_year.showSelectionLabel(false);
timeline_year.showTimeLevel(false);
timeline_year.showHorizontalScrollbar(false);
timeline_year.height(100);
timeline_year.captionName("Years");

var timeline_quarter = sheet.slicers.add("timeline_quarter", pt.name(), "注文日", GC.Spread.Sheets.Slicers.TimelineStyles.dark1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline);
timeline_quarter.position(new GC.Spread.Sheets.Point(600, 130));
timeline_quarter.level(GC.Spread.Sheets.Slicers.TimelineLevel.quarters);
timeline_quarter.captionName("Quarters");
timeline_quarter.showSelectionLabel(false);

var timeline_month = sheet.slicers.add("timeline_month", pt.name(), "注文日", GC.Spread.Sheets.Slicers.TimelineStyles.light4(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline);
timeline_month.position(new GC.Spread.Sheets.Point(600, 290));
timeline_month.captionName("Months");
timeline_month.showTimeLevel(false);

デザイナを使用してスライサーアイテムを選択する

SpreadJSデザイナでは、ピボットテーブルスライサーアイテムを選択するために次のアクションを実行できます。

アクション：クリック/ドラッグ
モード：シングル/マルチ
追加のキー：Ctrl / Shift / None

パラメータ（アクション+モード+キー）	ケース
クリック+シングル+なし	クリックした項目を選択します。
クリック+シングル+ Ctrl クリック+マルチ+None クリック+マルチ+ Ctrl	クリックした項目の選択状態を切り替えます。
クリック+シングル+Shift	開始点からクリックアイテムインデックスまでの選択範囲を設定します。範囲内のアイテムは選択されたままで、他のアイテムは選択されないままです。
クリック+マルチ+Shift ドラッグ+マルチ+Shift	開始点からクリックアイテムインデックスまでの選択範囲を設定し、選択ステータスをtrueに設定します。（Falseにはなりません）
ドラッグ+シングル+None	ドラッグされたアイテムのステータスをtrueに設定し、その他をfalseに設定します。
ドラッグ+シングル+ Ctrl ドラッグ+マルチ+None ドラッグ+マルチ+ Ctrl	ドラッグしたアイテムの選択状態を切り替えます。
ドラッグ+シングル+Shift	開始点からドラッグ終了項目インデックスまでの選択範囲を設定します。範囲内のアイテムが選択されます。

タイムラインスライサーのカスタムスタイルの設定

SpreadJS には、ピボットテーブルタイムラインスライサーに適用できる 6 つの明色テーマと 6 つの暗色テーマがあらかじめ定義されています。ただし、スライサースタイルを追加、削除、変更することで、カスタムピボットテーブルタイムラインスライサーテーマを管理し、それをピボットテーブルスライサーに適用することができます。. タイムラインスライサーのスタイル名を設定して、これらのスタイルを使用します。タイムラインスライサーのスタイルを設定するには、GC.Spread.Sheets.WorkBook クラスの customTimelineThemes プロパティを使用します。

CustomTimelineThemesManager クラスは、カスタムタイムラインスライサーテーマを管理するための次のメソッドを提供します。

メソッド	説明
all	すべてのカスタムタイムラインスライサーテーマを取得します。
get	名前で特定のカスタムタイムラインスライサーテーマを取得します。
add	スタイルオブジェクトまたは名前を使用して、新しいカスタムタイムラインスライサーテーマを追加します。
remove	名前を指定してカスタムタイムラインスライサーテーマを削除します。
update	既存のカスタムタイムラインスライサーテーマを名前またはスタイルオブジェクトで更新します。

さらに、GC.Spread.Sheets.WorkBook クラスの defaultTimelineTheme メソッドを使用すると、デフォルトのタイムラインスライサースタイルを効果的に管理して、すべてのタイムラインスライサーで一貫した外観と操作性を確保できます。

メモ:
タイムラインスライサーのテーマ名は一意である必要があります。
たとえば、「TEST」という名前のカスタムタイムラインスライサースタイルが既にある場合、同じ名前の別のタイムラインスライサースタイルを作成することはできません。
タイムラインスライサースタイル名では大文字と小文字は区別されません。
タイムラインスライサーにスタイル名が追加されると、名前でスタイルが検索されます。スタイル名が内部スタイルと一致する場合は、直接適用されます。一致しない場合は、customStyles コレクションで対応するスタイルを検索します。見つかった場合は、そのスタイルが適用されます。見つからない場合は、既定のスタイルが使用されます。
defaultTimelineTheme は、タイムラインスライサーのスタイル名を表す文字列である必要があります。スタイルを明示的に指定せずにスライサーを作成し、この既定の名前のスタイルが存在する場合は、そのスライサーにスタイルが適用されます。
使用されていないカスタムタイムラインスライサーテーマは、Excel.IOによるExcelファイルのインポート／エクスポートではサポートされません。

次のコードサンプルは、カスタムタイムラインスライサーテーマを管理するために必要なさまざまな方法を示しています。

新しいカスタムタイムラインスライサーテーマを追加します。

const spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));

// 「custom0」という名前の新しいタイムライン スライサー テーマを追加します。
const slicerTheme = spread.customTimelineThemes.add("custom0");
const styleInfo = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
styleInfo.backColor("orange");
styleInfo.borderBottom(new GC.Spread.Sheets.Slicers.SlicerBorder(2,"solid","green"));
slicerStyle.wholeSlicerStyle(styleInfo);

カスタムタイムラインスライサーテーマを取得します。
```
spread.customTimelineThemes.get("custom0");
```
カスタムタイムラインスライサーテーマを適用します。
```
timeline.style("custom0");
```

カスタムタイムラインスライサーテーマを変更します。

既存のタイムラインスライサースタイルを変更すると、そのスタイルが以前に適用されていたすべてのスライサーが自動的に更新されます。

// カスタム タイムライン スライサー テーマを変更します。
const slicerStyle = spread.customTimelineThemes.get("custom0");
slicerStyle.wholeSlicerStyle().backColor("red");

// カスタム タイムライン スライサー テーマを更新します。
spread.customTimelineThemes.update("custom0", new GC.Spread.Sheets.Slicers.TimelineStyle());

既存のカスタムタイムラインスライサーテーマを削除します。
カスタムタイムラインスライサースタイルを削除すると、削除されたスタイルを使用していたすべてのスライサーが既定のスタイルに切り替わります。
```
// カスタム タイムライン スライサー テーマを削除します。
spread.customTimelineThemes.remove("custom0");
```

デフォルトのタイムラインスライサーテーマを設定します。

// デフォルトのタイムライン スライサー テーマを設定します。
spread.defaultTimelineTheme("custom0");

以下の手順に従って、SpreadJS デザイナを使用してタイムラインスライサースタイルを追加および書式設定することもできます。

追加されたタイムラインスライサーをクリックして [タイムライン] タブを開き、タイムライン設定を構成します。
[タイムラインスタイル] グループにある [スタイル] ボタンをクリックします。
[新しいスライサースタイル] オプションを選択すると、[新しいスライサースタイル] ダイアログが開きます。
[名前] フィールドに新しいスタイル名を入力し、スタイルを適用する [スライサーの要素] セクションから要素を選択して、[書式] をクリックし、カスタムタイムラインスライサーテーマに必要なスタイルを構成します。
ユーザーが作成したすべてのタイムラインスライサースタイルは、スライサースタイルコレクションリストの [ユーザー設定] セクションに表示されます。
カスタムタイムラインスライサースタイルを右クリックし、要件に応じて、適用、変更、複製、削除、デフォルトに設定などのアクションを実行します。

メモ: 組み込みのピボットテーブルタイムラインスライサースタイルを変更または削除することはできません。