Gráficos

Registrar compatibilidad con gráficos

La compatibilidad con gráficos de diapositivas consta de un paquete de modelo y un paquete de interfaz de usuario. @univerjs-pro/chart-ui proporciona controles de editor, entradas de configuración regional y estilos compartidos.

import ChartUIEsES from '@univerjs-pro/chart-ui/locale/es-ES'import { UniverSlidesChartPlugin } from '@univerjs-pro/slides-chart'import { UniverSlidesChartUIPlugin } from '@univerjs-pro/slides-chart-ui'import SlidesChartUIEsES from '@univerjs-pro/slides-chart-ui/locale/es-ES'import { LocaleType, mergeLocales } from '@univerjs/core'import '@univerjs-pro/chart-ui/facade'import '@univerjs-pro/chart-ui/lib/index.css'import '@univerjs-pro/slides-chart-ui/lib/index.css'import '@univerjs-pro/slides-chart/facade'univerAPI.loadLocales(LocaleType.ES_ES, mergeLocales(ChartUIEsES, SlidesChartUIEsES))univer.registerPlugin(UniverSlidesChartPlugin)univer.registerPlugin(UniverSlidesChartUIPlugin)

Registre la compatibilidad con gráficos antes de abrir o importar una presentación que pueda contener elementos de gráficos.

Compatibilidad móvil

Configure primero el editor móvil. En la inicialización en modo plugin de esta página, sustituya los registros de escritorio siguientes por las exportaciones móviles de los mismos paquetes antes de abrir un documento. Conserve modelos, estilos, traducciones e importaciones Facade; no registre ambas variantes.

Crear y actualizar gráficos

slide.newChart(type) crea un constructor independiente. El gráfico no se añade a la diapositiva hasta que se pasa el resultado de build() a slide.insertChart(info).

const presentation = univerAPI.getActivePresentation()if (!presentation) throw new Error('No active presentation')const slide = presentation.getActiveSlide()const info = slide  .newChart(univerAPI.Enum.ChartTypeString.Column)  .setSource([    ['Month', 'Revenue', 'Cost'],    ['Jan', 120, 80],    ['Feb', 180, 96],    ['Mar', 240, 132],  ])  .setTitle('Quarterly revenue')  .setAbsolutePosition(80, 120)  .setSize(520, 320)  .setZOrder(1)  .build()const chart = await slide.insertChart(info)chart.setLegend({ visible: true }).bringToFront()const updatedInfo = chart.toBuilder(univerAPI.Enum.ChartTypeString.Line).setSubtitle('FY 2026').build()await chart.update(updatedInfo)const svg = await chart.exportImage({ format: 'svg' })

Los métodos de configuración del chart insertado se aplican de inmediato. Use toBuilder(type) con update(info) cuando necesite una copia completa independiente o cambiar el tipo. exportImage() devuelve undefined si no hay un renderizador de UI capaz de generar la imagen.

Use slide.getCharts() y slide.getChart(id) para obtener gráficos activos. Llame a await chart.remove() para eliminar uno. Los constructores de Slides añaden setPlaceholder(), setStroke() y setZOrder().

Ejes de categorías multinivel

Para datos jerárquicos en línea, seleccione los campos de categoría de la raíz a las hojas y active la representación multinivel:

const info = slide  .newChart(univerAPI.Enum.ChartTypeString.Column)  .setSource([    ['Region', 'Quarter', 'Revenue'],    ['North', 'Q1', 120],    ['North', 'Q2', 148],    ['South', 'Q1', 98],    ['South', 'Q2', 132],  ])  .setCategoryFields([0, 1])  .setMultiLevelCategoryAxis(true)  .setValueFields([2])  .setAbsolutePosition(80, 120)  .setSize(520, 320)  .build()await slide.insertChart(info)

Vincular datos de Sheet

Los datos de gráficos que hacen referencia a otros documentos requieren UniverChartEmbedPlugin. Instálalo y regístralo una vez durante la inicialización, antes de abrir la presentación. Si configuras UniverEmbedPlugin explícitamente, regístralo primero. La configuración es la misma en móvil; los arrays de valores en línea no necesitan este plugin.

pnpm add @univerjs-pro/chart-embed

npm install @univerjs-pro/chart-embed

yarn add @univerjs-pro/chart-embed

bun add @univerjs-pro/chart-embed

import { UniverChartEmbedPlugin } from '@univerjs-pro/chart-embed'univer.registerPlugin(UniverChartEmbedPlugin)

Pase una referencia de recurso a setSource() cuando el gráfico deba seguir un rango de Sheet en lugar de guardar valores copiados:

const info = slide  .newChart(univerAPI.Enum.ChartTypeString.Column)  .setSource({    unit: { selector: 'sales-workbook', type: 'sheet' },    part: {      kind: 'range',      sheetName: 'Data',      range: 'A1:B20',      ref: 'Data!A1:B20',    },  })  .setAbsolutePosition(120, 80)  .setSize(640, 360)  .build()const chart = await slide.insertChart(info)

Consulte la referencia de Chart Facade para ver la configuración compartida.

Los constructores compartidos también admiten configuración 3D y ejes logarítmicos. En Slides, use slide.newChart() con datos integrados o referenciados como en esta página.