# Graphiques - Human documentation: [https://docs.univer.ai/fr-FR/guides/sheets/features/charts](https://docs.univer.ai/fr-FR/guides/sheets/features/charts) - Agent Markdown: [https://docs.univer.ai/fr-FR/guides/sheets/features/charts.md](https://docs.univer.ai/fr-FR/guides/sheets/features/charts.md) - Requested language: `fr-FR` - Content language: `fr-FR` - Documentation version: `1.2.0` - Source: [sheets/features/charts.fr-FR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/sheets/features/charts.fr-FR.mdx) --- #### Package metadata ```json { "mobile": true, "preset": [ { "client": "@univerjs/preset-sheets-advanced", "locale": "@univerjs/preset-sheets-advanced/locales/fr-FR", "style": "@univerjs/preset-sheets-advanced/lib/index.css" } ], "plugins": [ { "client": "@univerjs-pro/chart-ui", "locale": "@univerjs-pro/chart-ui/locale/fr-FR", "style": "@univerjs-pro/chart-ui/lib/index.css" }, { "client": "@univerjs-pro/sheets-chart", "locale": "@univerjs-pro/sheets-chart/locale/fr-FR", "facade": "@univerjs-pro/sheets-chart/facade" }, { "client": "@univerjs-pro/sheets-chart-ui", "locale": "@univerjs-pro/sheets-chart-ui/locale/fr-FR", "style": "@univerjs-pro/sheets-chart-ui/lib/index.css" } ], "license": true, "server": false } ``` Les graphiques visualisent les données de la feuille de calcul grâce aux packages de modèle et d’interface. > Interactive example: [Open the playground](/playground/sheets/charts) ## Mode plugin #### npm ```bash npm install @univerjs-pro/chart-ui @univerjs-pro/sheets-chart @univerjs-pro/sheets-chart-ui ``` #### pnpm ```bash pnpm add @univerjs-pro/chart-ui @univerjs-pro/sheets-chart @univerjs-pro/sheets-chart-ui ``` #### yarn ```bash yarn add @univerjs-pro/chart-ui @univerjs-pro/sheets-chart @univerjs-pro/sheets-chart-ui ``` #### bun ```bash bun add @univerjs-pro/chart-ui @univerjs-pro/sheets-chart @univerjs-pro/sheets-chart-ui ``` ```ts 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](https://docs.univer.ai/fr-FR/guides/sheets/getting-started/installation.md#mobile-support). 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. | Paquet | Inscription de bureau | Inscription mobile | | ------------------------------- | --------------------------- | --------------------------------- | | `@univerjs-pro/sheets-chart-ui` | `UniverSheetsChartUIPlugin` | `UniverSheetsChartMobileUIPlugin` | ## Mode preset La fonctionnalité est incluse dans `@univerjs/preset-sheets-advanced` et nécessite le preset de dessin à l’exécution. #### npm ```bash npm install @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced ``` #### pnpm ```bash pnpm add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced ``` #### yarn ```bash yarn add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced ``` #### bun ```bash bun add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced ``` ```ts 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)`. ```ts 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. ```ts 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](https://docs.univer.ai/fr-FR/reference/facade/chart.md) 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. ```ts 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](https://docs.univer.ai/fr-FR/guides/sheets/features/pivot-chart.md). ## 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`. ```ts 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. ```ts 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.