Graphiques

Enregistrer la prise en charge des graphiques

La prise en charge des graphiques Slides se compose d’un package de modèle et d’un package d’interface. @univerjs-pro/chart-ui fournit les contrôles, les locales et les styles partagés.

import ChartUIFrFR from '@univerjs-pro/chart-ui/locale/fr-FR'import { UniverSlidesChartPlugin } from '@univerjs-pro/slides-chart'import { UniverSlidesChartUIPlugin } from '@univerjs-pro/slides-chart-ui'import SlidesChartUIFrFR from '@univerjs-pro/slides-chart-ui/locale/fr-FR'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.FR_FR, mergeLocales(ChartUIFrFR, SlidesChartUIFrFR))univer.registerPlugin(UniverSlidesChartPlugin)univer.registerPlugin(UniverSlidesChartUIPlugin)

Enregistrez cette prise en charge avant d’ouvrir ou d’importer une présentation susceptible de contenir des graphiques.

Prise en charge mobile

Configurez d’abord l’éditeur mobile. Dans l’initialisation en mode plugin de cette page, remplacez les inscriptions de bureau ci-dessous par les exports mobiles des mêmes paquets avant d’ouvrir un document. Conservez modèles, styles, traductions et imports Facade ; n’enregistrez pas les deux variantes.

Créer et mettre à jour un graphique

slide.newChart(type) crée un builder détaché. Le graphique n’est ajouté à la diapositive que lorsque le résultat de build() est transmis à 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' })

Les setters du chart inséré s’appliquent immédiatement. Utilisez toBuilder(type) avec update(info) pour obtenir une copie détachée complète ou changer de type. exportImage() renvoie undefined si aucun moteur de rendu UI ne peut produire l’image.

Utilisez slide.getCharts() et slide.getChart(id) pour obtenir les graphiques actifs. Appelez await chart.remove() pour en supprimer un. Les builders Slides ajoutent setPlaceholder(), setStroke() et setZOrder().

Axes de catégories multiniveaux

Pour des données hiérarchiques en ligne, sélectionnez les champs de catégorie de la racine vers les feuilles et activez le rendu multiniveau :

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)

Lier des données Sheet

Les données de graphique référencées nécessitent UniverChartEmbedPlugin. Installez-le et enregistrez-le une seule fois à l’initialisation, avant d’ouvrir la présentation. Si vous configurez explicitement UniverEmbedPlugin, enregistrez-le en premier. La configuration est identique sur mobile ; les tableaux de valeurs intégrés ne nécessitent pas ce 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)

Passez une référence de ressource à setSource() lorsque le graphique doit suivre une plage Sheet au lieu de stocker des valeurs copiées :

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)

Consultez la référence Chart Facade pour la configuration partagée.

Les constructeurs partagés prennent aussi en charge les graphiques 3D et les axes logarithmiques. Pour Slides, utilisez slide.newChart() avec les données intégrées ou référencées présentées ici.