# Gráficos - Human documentation: [https://docs.univer.ai/es-ES/guides/slides/features/charts](https://docs.univer.ai/es-ES/guides/slides/features/charts) - Agent Markdown: [https://docs.univer.ai/es-ES/guides/slides/features/charts.md](https://docs.univer.ai/es-ES/guides/slides/features/charts.md) - Requested language: `es-ES` - Content language: `es-ES` - Documentation version: `1.2.0` - Source: [slides/features/charts.es-ES.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/slides/features/charts.es-ES.mdx) --- #### Package metadata ```json { "mobile": true, "preset": [], "plugins": [ { "client": "@univerjs-pro/chart-ui", "locale": "@univerjs-pro/chart-ui/locale/es-ES", "style": "@univerjs-pro/chart-ui/lib/index.css", "facade": "@univerjs-pro/chart-ui/facade" }, { "client": "@univerjs-pro/slides-chart", "facade": "@univerjs-pro/slides-chart/facade" }, { "client": "@univerjs-pro/slides-chart-ui", "locale": "@univerjs-pro/slides-chart-ui/locale/es-ES", "style": "@univerjs-pro/slides-chart-ui/lib/index.css" } ], "license": true, "server": false } ``` ## 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. ```ts 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](https://docs.univer.ai/es-ES/guides/slides/getting-started/installation.md#mobile-support). 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. | Paquete | Registro de escritorio | Registro móvil | | ------------------------------- | --------------------------- | --------------------------------- | | `@univerjs-pro/slides-chart-ui` | `UniverSlidesChartUIPlugin` | `UniverSlidesChartMobileUIPlugin` | ## 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)`. ```ts 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: ```ts 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`](https://docs.univer.ai/es-ES/reference/packages/plugins/univerjs-pro/chart-embed.md). 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. #### npm ```bash npm install @univerjs-pro/chart-embed ``` #### pnpm ```bash pnpm add @univerjs-pro/chart-embed ``` #### yarn ```bash yarn add @univerjs-pro/chart-embed ``` #### bun ```bash bun add @univerjs-pro/chart-embed ``` ```ts 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: ```ts 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](https://docs.univer.ai/es-ES/reference/facade/chart.md) para ver la configuración compartida. Los constructores compartidos también admiten [configuración 3D](https://docs.univer.ai/es-ES/guides/sheets/features/charts.md#three-dimensional-charts) y [ejes logarítmicos](https://docs.univer.ai/es-ES/guides/sheets/features/charts.md#logarithmic-axes). En Slides, use `slide.newChart()` con datos integrados o referenciados como en esta página.