# Диаграммы - Human documentation: [https://docs.univer.ai/ru-RU/guides/sheets/features/charts](https://docs.univer.ai/ru-RU/guides/sheets/features/charts) - Agent Markdown: [https://docs.univer.ai/ru-RU/guides/sheets/features/charts.md](https://docs.univer.ai/ru-RU/guides/sheets/features/charts.md) - Requested language: `ru-RU` - Content language: `ru-RU` - Documentation version: `1.2.0` - Source: [sheets/features/charts.ru-RU.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/sheets/features/charts.ru-RU.mdx) --- #### Package metadata ```json { "mobile": true, "preset": [ { "client": "@univerjs/preset-sheets-advanced", "locale": "@univerjs/preset-sheets-advanced/locales/ru-RU", "style": "@univerjs/preset-sheets-advanced/lib/index.css" } ], "plugins": [ { "client": "@univerjs-pro/chart-ui", "locale": "@univerjs-pro/chart-ui/locale/ru-RU", "style": "@univerjs-pro/chart-ui/lib/index.css" }, { "client": "@univerjs-pro/sheets-chart", "locale": "@univerjs-pro/sheets-chart/locale/ru-RU", "facade": "@univerjs-pro/sheets-chart/facade" }, { "client": "@univerjs-pro/sheets-chart-ui", "locale": "@univerjs-pro/sheets-chart-ui/locale/ru-RU", "style": "@univerjs-pro/sheets-chart-ui/lib/index.css" } ], "license": true, "server": false } ``` Диаграммы визуализируют данные листа с помощью пакетов модели и интерфейса. > Interactive example: [Open the playground](/playground/sheets/charts) ## Режим плагинов #### 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 ChartUIRuRU from '@univerjs-pro/chart-ui/locale/ru-RU' import { UniverSheetsChartPlugin } from '@univerjs-pro/sheets-chart' import { UniverSheetsChartUIPlugin } from '@univerjs-pro/sheets-chart-ui' import SheetsChartUIRuRU from '@univerjs-pro/sheets-chart-ui/locale/ru-RU' import SheetsChartRuRU from '@univerjs-pro/sheets-chart/locale/ru-RU' 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.RU_RU, locales: { [LocaleType.RU_RU]: mergeLocales(ChartUIRuRU, SheetsChartRuRU, SheetsChartUIRuRU), }, }) univer.registerPlugin(UniverSheetsChartPlugin) univer.registerPlugin(UniverSheetsChartUIPlugin) ``` ## Поддержка мобильных устройств Сначала настройте [мобильный редактор](https://docs.univer.ai/ru-RU/guides/sheets/getting-started/installation.md#mobile-support). В коде инициализации режима плагинов на этой странице замените указанные настольные регистрации мобильными экспортами тех же пакетов **до открытия документа**. Сохраните модели, стили, локализации и импорты Facade; не регистрируйте оба варианта. | Пакет | Настольная регистрация | Мобильная регистрация | | ------------------------------- | --------------------------- | --------------------------------- | | `@univerjs-pro/sheets-chart-ui` | `UniverSheetsChartUIPlugin` | `UniverSheetsChartMobileUIPlugin` | ## Режим предустановок Функция диаграмм входит в `@univerjs/preset-sheets-advanced` и требует предустановку рисования во время выполнения. #### 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 UniverPresetSheetsAdvancedRuRU from '@univerjs/preset-sheets-advanced/locales/ru-RU' import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core' import UniverPresetSheetsCoreRuRU from '@univerjs/preset-sheets-core/locales/ru-RU' import { UniverSheetsDrawingPreset } from '@univerjs/preset-sheets-drawing' import UniverPresetSheetsDrawingRuRU from '@univerjs/preset-sheets-drawing/locales/ru-RU' 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.RU_RU, locales: { [LocaleType.RU_RU]: mergeLocales( UniverPresetSheetsCoreRuRU, UniverPresetSheetsDrawingRuRU, UniverPresetSheetsAdvancedRuRU, ), }, presets: [UniverSheetsCorePreset(), UniverSheetsDrawingPreset(), UniverSheetsAdvancedPreset()], }) ``` ## Создание и обновление диаграмм `worksheet.newChart(type)` создаёт независимый конструктор. Диаграмма появится на листе только после передачи результата `build()` в `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' }) ``` Сеттеры вставленного `chart` применяются сразу. Используйте `toBuilder(type)` вместе с `update(info)`, когда нужна полная независимая копия или смена типа. `exportImage()` возвращает `undefined`, если UI-рендерер не может создать изображение. Получайте активные диаграммы через `worksheet.getCharts()` и `worksheet.getChart(id)`. Для удаления вызовите `await chart.remove()`, а общие темы ECharts регистрируйте методом `univerAPI.registerTheme(name, theme)`. ## Многоуровневые оси категорий Если соседние столбцы источника образуют иерархию, передайте их индексы, начиная с нуля и от корня к листьям, в `setCategoryFields()` и включите многоуровневую ось. ```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) ``` Вызовите `clearCategoryFields()`, чтобы удалить упорядоченное сопоставление. `setMultiLevelCategoryAxis(false)` сохраняет выбранные поля и отключает только иерархическое отображение. ## Поддерживаемые типы диаграмм `univerAPI.Enum.ChartTypeString` предоставляет `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` и `Chord`. Общие параметры конструктора описаны в [справочнике Chart Facade](https://docs.univer.ai/ru-RU/reference/facade/chart.md). ## Скрытые данные и отдельные категории `setPlotVisibleOnly(false)` включает значения скрытых строк и столбцов; `getPlotVisibleOnly()` читает настройку. `setSeriesToCategory()` сопоставляет индексы полей значений с индексами категорий. Индексы относятся к исходным векторам и не меняются при фильтрации видимых рядов. Пропущенные записи используют общие категории, `{}` очищает переопределения. Для данных A:D ряд D может использовать категории C, а ряд B — общую категорию A. ```ts const chart = worksheet.getCharts()[0] if (!chart) throw new Error('No chart') chart.setPlotVisibleOnly(false) chart.setSeriesToCategory({ 3: [2] }) ``` Для агрегированных отчётов см. [сводные диаграммы](https://docs.univer.ai/ru-RU/guides/sheets/features/pivot-chart.md). ## Трёхмерные диаграммы Для 3D-вариантов используется та же регистрация плагинов. Выберите тип 3D и настройте вид через отдельный конструктор. Поддерживаются `Line3D`, `Column3D`, `ColumnStacked3D`, `ColumnPercentStacked3D`, `Bar3D`, `BarStacked3D`, `BarPercentStacked3D`, `Pie3D`, `Area3D`, `AreaStacked3D` и `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` применяется к диаграммам с осями при `rightAngleAxes: false`. `clearThreeD()` сбрасывает параметры вида, сохраняя тип 3D и ось глубины; для неё используйте `clearDepthAxis()`. У трёхмерных диаграмм с осями нет API вторичных осей и линий тренда. `Pie3D` — круговая диаграмма без отверстия. ## Логарифмические числовые оси Числовые оси двумерных линейных, областных, столбчатых, линейчатых и комбинированных диаграмм поддерживают `scaleType: 'log'`. Используйте `setYAxis()` для вертикальной оси и `setXAxis()` для горизонтальной числовой оси линейчатой диаграммы. `setRightYAxis()` настраивает существующую вторичную ось. Основание по умолчанию — `10`. Конечное значение `logBase` должно лежать от `2` до `1000`, допускаются дробные значения, например `2.5`. Границы оси должны быть положительными. Нулевые и отрицательные точки не отображаются на логарифмической шкале, исходные данные сохраняются. Процентные накопительные и 3D-диаграммы не поддерживают логарифмические оси. ```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(), ) ``` Постройте и вставьте новую диаграмму либо примените изменения через `await chart.update(builder.build())`. `scaleType: 'linear'` удаляет основание логарифма; другие изменения оси сохраняют шкалу.