Segmentaciones y líneas de tiempo

Headless compatible

Las segmentaciones filtran tablas, tablas dinámicas y gráficos dinámicos por miembros del origen. Las líneas de tiempo filtran campos de fecha originales compatibles de un informe dinámico; no admiten columnas de tablas, campos de texto, campos calculados ni campos de agrupación derivados.

Modo de complemento

Instalación

Shell
pnpm add @univerjs-pro/sheets-slicer @univerjs-pro/sheets-slicer-ui

Uso

Añada lo siguiente a la configuración de Sheets, con el soporte de dibujo y el origen de tabla o tabla dinámica configurados. Cargue el idioma y registre los complementos antes de crear el libro.

TypeScript
import { UniverSheetsSlicerPlugin } from '@univerjs-pro/sheets-slicer'import { UniverSheetsSlicerUIPlugin } from '@univerjs-pro/sheets-slicer-ui'import SheetsSlicerUILocale from '@univerjs-pro/sheets-slicer-ui/locale/es-ES'import { LocaleType } from '@univerjs/core'import '@univerjs-pro/sheets-slicer/facade'import '@univerjs-pro/sheets-slicer-ui/lib/index.css'univerAPI.loadLocales(LocaleType.ES_ES, SheetsSlicerUILocale)univer.registerPlugin(UniverSheetsSlicerPlugin)univer.registerPlugin(UniverSheetsSlicerUIPlugin)

Modo preestablecido

Instalación

Shell
pnpm add @univerjs/presets @univerjs/preset-sheets-core @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced

Uso

El preset avanzado incluye modelos, UI y API Facade de segmentadores y líneas de tiempo. Combínelo con los presets Core y Drawing y sus traducciones. Si ya lo usa, añada slicer a esa configuración sin registrarlo de nuevo. Configure la licencia según usar una licencia.

TypeScript
import { UniverSheetsAdvancedPreset } from '@univerjs/preset-sheets-advanced'import AdvancedLocale from '@univerjs/preset-sheets-advanced/locales/es-ES'import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import CoreLocale from '@univerjs/preset-sheets-core/locales/es-ES'import { UniverSheetsDrawingPreset } from '@univerjs/preset-sheets-drawing'import DrawingLocale from '@univerjs/preset-sheets-drawing/locales/es-ES'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.ES_ES,  locales: {    [LocaleType.ES_ES]: mergeLocales(CoreLocale, DrawingLocale, AdvancedLocale),  },  presets: [    UniverSheetsCorePreset({ container: 'app' }),    UniverSheetsDrawingPreset(),    UniverSheetsAdvancedPreset({ slicer: { maxMemberWindowSize: 200 } }),  ],})

Con un Worker, configure useWorker: true en el preset avanzado y registre UniverSheetsAdvancedWorkerPreset() en el Worker; también incluye el cálculo de segmentadores.

Crear una segmentación

Este ejemplo utiliza una tabla dinámica en I1 de la hoja activa con un campo de origen llamado Region. Obtenga su ID original estable con getSourceFieldsInfo(); no pase nombres visibles ni ID de campos del informe a newSlicer().

TypeScript
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() vincula el constructor a su origen. build() solo prepara la configuración; insertSlicer() crea el control. La hoja de destino puede ser distinta de la de origen, pero ambas deben pertenecer al mismo libro. Para un origen de tabla, use fWorksheet.newSlicer(columnId).setTableReference({ subUnitId, tableId }), donde columnId es el ID estable de la columna de la tabla.

Crear una línea de tiempo

El siguiente ejemplo continúa con la misma tabla dinámica y requiere un campo de fecha original llamado Date. newTimeline() valida el origen y rechaza los campos no compatibles. Las API de rangos de la línea de tiempo utilizan valores de serie de Excel según el sistema de fechas del libro, no objetos JavaScript Date.

TypeScript
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(),)

Buscar controles y observar cambios

Use getSlicer(viewId) / getSlicers() y getTimeline(viewId) / getTimelines() en la hoja que contiene el control. viewId es el ID devuelto por getId() del control, no su ID de dibujo.

Suscríbase a SlicerAdded, SlicerChanged, SlicerRemoved, TimelineAdded, TimelineChanged y TimelineRemoved mediante univerAPI.addEvent(). Los eventos describen cambios locales confirmados, no el guardado remoto ni la finalización del renderizado. Llame a dispose() en la suscripción cuando ya no sea necesaria.

Referencia de API:

Consultar miembros y compartir filtros

Pase valores de origen tipados a setSelection(): el número 1, la cadena '1' y un valor en blanco son distintos. No pase etiquetas ni índices visibles. El filtro se comparte entre todas las vistas de la misma caché y los informes conectados. En una Table sustituye el filtro de esa columna y conserva los demás. Use clearFilter() para quitarlo.

TypeScript
import { FilterSelectionMode, RecordValueType } from '@univerjs/core'const accepted = await slicer.setSelection({  mode: FilterSelectionMode.Include,  values: [{ type: RecordValueType.String, value: 'EMEA' }],})

getItems({ start, count }) consulta una ventana sin cambiar la selección. Solicita 100 miembros de forma predeterminada, limitados por maxMemberWindowSize (entero positivo, 200 por defecto). Conserve las selecciones fuera de la ventana. setConnections() sustituye las conexiones de informes dinámicos; getConnectionCandidates() obtiene candidatos compatibles. La edición necesita permisos en las hojas correspondientes. Véase FSheetSlicer.

Condiciones de fecha de la línea de tiempo

setSelection({ startDate, endDate, useWholeDay: true }) amplía los límites fraccionarios a días completos y mantiene exclusivo el final entero. Sin useWholeDay, el intervalo es exactamente [startDate, endDate). Una condición fija compartida desde la tabla dinámica puede no ser continua: léala con getDateCondition(). En ese caso, getSelection() devuelve undefined, lo que por sí solo no indica ausencia de filtro.

¿Cómo es esta guía?

© 2026 DreamNum Co., Ltd.