Graphiques

Les graphiques visualisent les données de la feuille de calcul grâce aux packages de modèle et d’interface.

Mode plugin

pnpm add @univerjs-pro/chart-ui @univerjs-pro/sheets-chart @univerjs-pro/sheets-chart-ui

npm install @univerjs-pro/chart-ui @univerjs-pro/sheets-chart @univerjs-pro/sheets-chart-ui

yarn add @univerjs-pro/chart-ui @univerjs-pro/sheets-chart @univerjs-pro/sheets-chart-ui

bun add @univerjs-pro/chart-ui @univerjs-pro/sheets-chart @univerjs-pro/sheets-chart-ui

import ChartUIFrFR from '@univerjs-pro/chart-ui/locale/fr-FR'import { UniverSheetsChartPlugin } from '@univerjs-pro/sheets-chart'import { UniverSheetsChartUIPlugin } from '@univerjs-pro/sheets-chart-ui'import SheetsChartUIFrFR from '@univerjs-pro/sheets-chart-ui/locale/fr-FR'import SheetsChartFrFR from '@univerjs-pro/sheets-chart/locale/fr-FR'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/chart-ui/facade'import '@univerjs-pro/sheets-chart/facade'import '@univerjs-pro/chart-ui/lib/index.css'import '@univerjs-pro/sheets-chart-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.FR_FR,  locales: {    [LocaleType.FR_FR]: mergeLocales(ChartUIFrFR, SheetsChartFrFR, SheetsChartUIFrFR),  },})univer.registerPlugin(UniverSheetsChartPlugin)univer.registerPlugin(UniverSheetsChartUIPlugin)

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.

Mode preset

La fonctionnalité est incluse dans @univerjs/preset-sheets-advanced et nécessite le preset de dessin à l’exécution.

pnpm add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced

npm install @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced

yarn add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced

bun add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced

import { UniverSheetsAdvancedPreset } from '@univerjs/preset-sheets-advanced'import UniverPresetSheetsAdvancedFrFR from '@univerjs/preset-sheets-advanced/locales/fr-FR'import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreFrFR from '@univerjs/preset-sheets-core/locales/fr-FR'import { UniverSheetsDrawingPreset } from '@univerjs/preset-sheets-drawing'import UniverPresetSheetsDrawingFrFR from '@univerjs/preset-sheets-drawing/locales/fr-FR'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-advanced/lib/index.css'import '@univerjs/preset-sheets-core/lib/index.css'import '@univerjs/preset-sheets-drawing/lib/index.css'const { univerAPI } = createUniver({  locale: LocaleType.FR_FR,  locales: {    [LocaleType.FR_FR]: mergeLocales(      UniverPresetSheetsCoreFrFR,      UniverPresetSheetsDrawingFrFR,      UniverPresetSheetsAdvancedFrFR,    ),  },  presets: [UniverSheetsCorePreset(), UniverSheetsDrawingPreset(), UniverSheetsAdvancedPreset()],})

Créer et mettre à jour un graphique

worksheet.newChart(type) crée un builder détaché. Le graphique n’est ajouté à la feuille que lorsque le résultat de build() est transmis à worksheet.insertChart(info).

const workbook = univerAPI.getActiveWorkbook()if (!workbook) throw new Error('No active workbook')const worksheet = workbook.getActiveSheet()const info = worksheet  .newChart(univerAPI.Enum.ChartTypeString.Column)  .setSource({    range: 'A1:D6',    orientation: univerAPI.Enum.ChartSourceOrientation.Columns,  })  .setPosition('F2')  .setSize(640, 360)  .setCategoryField(0)  .setValueFields([1, 2, 3])  .setTitle('Quarterly revenue')  .build()const chart = await worksheet.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 worksheet.getCharts() et worksheet.getChart(id) pour obtenir les graphiques actifs. Appelez await chart.remove() pour en supprimer un et enregistrez les thèmes ECharts partagés avec univerAPI.registerTheme(name, theme).

Axes de catégories multiniveaux

Lorsque plusieurs colonnes source adjacentes forment une hiérarchie, transmettez leurs index de base zéro à setCategoryFields(), de la racine vers les feuilles, puis activez l’axe multiniveau.

const info = worksheet  .newChart(univerAPI.Enum.ChartTypeString.Column)  .setSource({    range: 'A1:D7',    orientation: univerAPI.Enum.ChartSourceOrientation.Columns,  })  .setCategoryFields([0, 1])  .setMultiLevelCategoryAxis(true)  .setValueFields([2, 3])  .setPosition('F2')  .build()const chart = await worksheet.insertChart(info)chart.setCategoryFields([0, 1]).setMultiLevelCategoryAxis(true)

Appelez clearCategoryFields() pour supprimer cette association ordonnée. setMultiLevelCategoryAxis(false) conserve les champs sélectionnés et désactive seulement le rendu hiérarchique.

Types de graphiques pris en charge

univerAPI.Enum.ChartTypeString fournit Line, Column, ColumnStacked, ColumnPercentStacked, Bar, BarStacked, BarPercentStacked, Pie, Donut, Area, AreaStacked, AreaPercentStacked, Radar, Scatter, Combination, WordCloud, Funnel, Bubble, Relation, Waterfall, Pareto, Sankey, Heatmap, Boxplot, Candlestick, Histogram, Treemap, Sunburst, Gauge et Chord.

Consultez la référence Facade des graphiques pour la configuration commune des générateurs.

Données masquées et catégories indépendantes

setPlotVisibleOnly(false) inclut les valeurs des lignes et colonnes masquées ; getPlotVisibleOnly() lit ce réglage. setSeriesToCategory() associe les index des champs de valeurs à ceux des catégories. Ces index désignent les vecteurs sources physiques, sans renumérotation après filtrage. Les entrées absentes héritent des catégories communes ; {} supprime les substitutions.

Pour des données en A:D, la série D peut utiliser C comme catégorie tandis que B conserve la catégorie commune A.

const chart = worksheet.getCharts()[0]if (!chart) throw new Error('No chart')chart.setPlotVisibleOnly(false)chart.setSeriesToCategory({ 3: [2] })

Pour les rapports agrégés, voir les graphiques croisés dynamiques.

Graphiques 3D

Les variantes 3D utilisent les mêmes plugins de graphique. Choisissez un type 3D, puis configurez la vue avec son constructeur indépendant.

Types disponibles : Line3D, Column3D, ColumnStacked3D, ColumnPercentStacked3D, Bar3D, BarStacked3D, BarPercentStacked3D, Pie3D, Area3D, AreaStacked3D et AreaPercentStacked3D.

const info = worksheet  .newChart(univerAPI.Enum.ChartTypeString.Column3D)  .setSource('A1:C5')  .setCategoryField(0)  .setValueFields([1, 2])  .setPosition('F18')  .setSize(640, 360)  .setThreeD({    view: { rotX: 20, rotY: 30, rightAngleAxes: false, perspective: 30 },    gapDepth: 120,  })  .build()await worksheet.insertChart(info)

perspective s’applique aux graphiques avec axes lorsque rightAngleAxes vaut false. clearThreeD() efface la vue personnalisée en conservant le type 3D et l’axe de profondeur ; utilisez clearDepthAxis() pour ce dernier. Les graphiques 3D avec axes n’exposent ni axe secondaire ni courbe de tendance. Pie3D est un secteur sans trou.

Axes de valeurs logarithmiques

Les axes numériques des graphiques 2D en courbes, aires, colonnes, barres et combinés acceptent scaleType: 'log'. Utilisez setYAxis() pour l’axe vertical et setXAxis() pour l’axe numérique horizontal des barres. setRightYAxis() configure un axe secondaire existant.

La base par défaut est 10. logBase doit être un nombre fini de 2 à 1000, y compris une fraction comme 2.5. Les bornes doivent être positives. Les valeurs nulles ou négatives sont omises du tracé sans modifier les données. Les graphiques empilés à 100 % et 3D ne prennent pas en charge les axes logarithmiques.

const info = worksheet  .newChart(univerAPI.Enum.ChartTypeString.Line)  .setSource('A1:B5')  .setYAxis({ scaleType: 'log', logBase: 10 })  .setPosition('F36')  .setSize(640, 360)  .build()const chart = await worksheet.insertChart(info)await chart.update(  chart.toBuilder(univerAPI.Enum.ChartTypeString.Line)    .setYAxis({ scaleType: 'linear' })    .build(),)

Construisez puis insérez un nouveau graphique, ou appliquez une mise à jour avec await chart.update(builder.build()). scaleType: 'linear' supprime la base ; les autres modifications d’axe conservent l’échelle.