# スライサーとタイムライン - Human documentation: [https://docs.univer.ai/ja-JP/guides/sheets/features/slicer](https://docs.univer.ai/ja-JP/guides/sheets/features/slicer) - Agent Markdown: [https://docs.univer.ai/ja-JP/guides/sheets/features/slicer.md](https://docs.univer.ai/ja-JP/guides/sheets/features/slicer.md) - Requested language: `ja-JP` - Content language: `ja-JP` - Documentation version: `1.4.0` - Source: [sheets/features/slicer.ja-JP.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/sheets/features/slicer.ja-JP.mdx) --- #### Package metadata ```json { "preset": [ { "client": "@univerjs/preset-sheets-advanced", "locale": "@univerjs/preset-sheets-advanced/locales/ja-JP", "style": "@univerjs/preset-sheets-advanced/lib/index.css", "headless": "unsupported" } ], "plugins": [ { "client": "@univerjs-pro/sheets-slicer", "facade": "@univerjs-pro/sheets-slicer/facade", "headless": "supported" }, { "client": "@univerjs-pro/sheets-slicer-ui", "locale": "@univerjs-pro/sheets-slicer-ui/locale/ja-JP", "style": "@univerjs-pro/sheets-slicer-ui/lib/index.css", "headless": "unsupported" } ], "license": true, "server": false } ``` スライサーはソースのメンバーでテーブル、ピボットテーブル、ピボットグラフを絞り込みます。タイムラインは対応するピボットの元の日付フィールドを絞り込みます。テーブル列、テキスト、計算フィールド、派生グループフィールドはタイムラインのソースにできません。 ## プラグインモード ### インストール ```package-install npm install @univerjs-pro/sheets-slicer @univerjs-pro/sheets-slicer-ui ``` ### 使い方 既存の [Sheets 設定](https://docs.univer.ai/ja-JP/guides/sheets/getting-started/installation.md)に以下を追加し、[描画機能](https://docs.univer.ai/ja-JP/guides/sheets/features/images.md)と、ソースとなる[テーブル](https://docs.univer.ai/ja-JP/guides/sheets/features/table.md)または[ピボットテーブル](https://docs.univer.ai/ja-JP/guides/sheets/features/pivot-table.md)を設定します。ワークブックを作成する前に言語パックを読み込み、プラグインを登録してください。 ```ts import { UniverSheetsSlicerPlugin } from '@univerjs-pro/sheets-slicer' import { UniverSheetsSlicerUIPlugin } from '@univerjs-pro/sheets-slicer-ui' import SheetsSlicerUILocale from '@univerjs-pro/sheets-slicer-ui/locale/ja-JP' import { LocaleType } from '@univerjs/core' import '@univerjs-pro/sheets-slicer/facade' import '@univerjs-pro/sheets-slicer-ui/lib/index.css' univerAPI.loadLocales(LocaleType.JA_JP, SheetsSlicerUILocale) univer.registerPlugin(UniverSheetsSlicerPlugin) univer.registerPlugin(UniverSheetsSlicerUIPlugin) ``` ## プリセットモード ### インストール ```package-install npm install @univerjs/presets @univerjs/preset-sheets-core @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced ``` ### 使い方 Advanced プリセットにはスライサーとタイムラインのモデル、UI、Facade API が含まれます。Core と Drawing プリセットを組み合わせ、ロケールも統合してください。既に Advanced を使用している場合は再登録せず、既存設定に `slicer` を追加します。ライセンスは[ライセンス設定](https://docs.univer.ai/ja-JP/server/license.md)を参照してください。 ```ts import { UniverSheetsAdvancedPreset } from '@univerjs/preset-sheets-advanced' import AdvancedLocale from '@univerjs/preset-sheets-advanced/locales/ja-JP' import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core' import CoreLocale from '@univerjs/preset-sheets-core/locales/ja-JP' import { UniverSheetsDrawingPreset } from '@univerjs/preset-sheets-drawing' import DrawingLocale from '@univerjs/preset-sheets-drawing/locales/ja-JP' import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets' import '@univerjs/preset-sheets-core/lib/index.css' import '@univerjs/preset-sheets-drawing/lib/index.css' import '@univerjs/preset-sheets-advanced/lib/index.css' const { univerAPI } = createUniver({ locale: LocaleType.JA_JP, locales: { [LocaleType.JA_JP]: mergeLocales(CoreLocale, DrawingLocale, AdvancedLocale), }, presets: [ UniverSheetsCorePreset({ container: 'app' }), UniverSheetsDrawingPreset(), UniverSheetsAdvancedPreset({ slicer: { maxMemberWindowSize: 200 } }), ], }) ``` [Worker](https://docs.univer.ai/ja-JP/guides/sheets/getting-started/worker.md) 使用時は Advanced に `useWorker: true` を設定し、Worker 内で `UniverSheetsAdvancedWorkerPreset()` を登録します。スライサーの計算プラグインも含まれます。 ## スライサーを作成する 以下の例では、アクティブなシートの I1 にあるピボットテーブルと、`Region` というソースフィールドを使用します。`getSourceFieldsInfo()` で元のフィールドの安定した ID を取得してください。表示名やレポートのフィールド ID は `newSlicer()` に渡せません。 ```ts const fWorkbook = univerAPI.getActiveWorkbook() const fWorksheet = fWorkbook?.getActiveSheet() if (!fWorkbook || !fWorksheet) throw new Error('No active worksheet') const pivotTable = fWorkbook.getPivotTableByCell( fWorkbook.getId(), fWorksheet.getSheetId(), 0, 8, ) const regionField = pivotTable?.getSourceFieldsInfo().find((field) => field.name === 'Region') if (!pivotTable || !regionField) throw new Error('Region source field not found') const slicer = await fWorksheet.insertSlicer( pivotTable.newSlicer(regionField.id) .setCaption(regionField.name) .setPosition('N2') .build(), ) ``` `pivotTable.newSlicer()` はビルダーをソースに結び付けます。`build()` は設定を作成するだけで、`insertSlicer()` がコントロールを挿入します。配置先とソースのシートは異なっていても構いませんが、同じワークブック内である必要があります。テーブルをソースにする場合は `fWorksheet.newSlicer(columnId).setTableReference({ subUnitId, tableId })` を使用します。`columnId` はテーブル列の安定した ID です。 ## タイムラインを作成する 同じピボットテーブルを使用する次の例には、`Date` という元の日付フィールドが必要です。`newTimeline()` はソースを検証し、未対応のフィールドを拒否します。タイムラインの範囲 API は、JavaScript の `Date` オブジェクトではなく、ワークブックの日付システムに従う Excel シリアル値を使用します。 ```ts const dateField = pivotTable.getSourceFieldsInfo().find((field) => field.name === 'Date') if (!dateField) throw new Error('Date source field not found') const timeline = await fWorksheet.insertTimeline( pivotTable.newTimeline(dateField.id) .setCaption(dateField.name) .setLevel(univerAPI.Enum.TimelineLevel.Month) .setPosition('N18') .build(), ) ``` ## コントロールの検索と変更の監視 配置先のワークシートで `getSlicer(viewId)` / `getSlicers()` と `getTimeline(viewId)` / `getTimelines()` を呼び出します。`viewId` はコントロールの `getId()` が返す ID であり、描画 ID ではありません。 `univerAPI.addEvent()` で `SlicerAdded`、`SlicerChanged`、`SlicerRemoved`、`TimelineAdded`、`TimelineChanged`、`TimelineRemoved` を購読できます。これらは確定したローカルの変更を通知し、リモート保存や描画完了を示すものではありません。不要になった購読は `dispose()` で解除してください。 API リファレンス： - [FSheetSlicer](https://docs.univer.ai/ja-JP/reference/facade/sheet-slicer.md) - [FSheetSlicerBuilder](https://docs.univer.ai/ja-JP/reference/facade/sheet-slicer-builder.md) - [FSheetTimeline](https://docs.univer.ai/ja-JP/reference/facade/sheet-timeline.md) - [FSheetTimelineBuilder](https://docs.univer.ai/ja-JP/reference/facade/sheet-timeline-builder.md) - [FEventName](https://docs.univer.ai/ja-JP/reference/facade/events.md#univerjs-prosheets-slicer) ## メンバーの取得と共有フィルター `setSelection()` には型付きの元データを渡します。数値 `1`、文字列 `'1'`、空白は別のメンバーです。表示ラベルや一覧のインデックスは渡せません。フィルターは同じキャッシュの全ビューと接続先レポートで共有されます。Table ソースでは対象列のフィルターを置き換え、他の列は維持します。解除には `clearFilter()` を使います。 ```ts import { FilterSelectionMode, RecordValueType } from '@univerjs/core' const accepted = await slicer.setSelection({ mode: FilterSelectionMode.Include, values: [{ type: RecordValueType.String, value: 'EMEA' }], }) ``` `getItems({ start, count })` は一部分だけを取得し、選択を変更しません。既定で 100 件、上限は正の整数の `maxMemberWindowSize`（既定値 200）です。ページ外の選択も保持してください。`setConnections()` はピボットレポートの接続を置き換えます。`getConnectionCandidates()` で互換性のある候補を取得できます。編集には対象シートの権限が必要です。[FSheetSlicer](https://docs.univer.ai/ja-JP/reference/facade/sheet-slicer.md)を参照してください。 ## タイムラインの日付条件 `setSelection({ startDate, endDate, useWholeDay: true })` は小数の境界を日単位に拡張し、整数の終了値は含めません。`useWholeDay` がない場合、区間は正確に `[startDate, endDate)` です。ピボットテーブルから共有された固定日付条件は連続区間とは限らないため、`getDateCondition()` で読み取ります。この場合 `getSelection()` は `undefined` を返すので、それだけでフィルターなしとは判断できません。