Диаграммы

Регистрация поддержки диаграмм

Поддержка диаграмм Slides состоит из пакета модели и пакета интерфейса. @univerjs-pro/chart-ui предоставляет общие элементы редактирования, локали и стили.

import ChartUIRuRU from '@univerjs-pro/chart-ui/locale/ru-RU'import { UniverSlidesChartPlugin } from '@univerjs-pro/slides-chart'import { UniverSlidesChartUIPlugin } from '@univerjs-pro/slides-chart-ui'import SlidesChartUIRuRU from '@univerjs-pro/slides-chart-ui/locale/ru-RU'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.RU_RU, mergeLocales(ChartUIRuRU, SlidesChartUIRuRU))univer.registerPlugin(UniverSlidesChartPlugin)univer.registerPlugin(UniverSlidesChartUIPlugin)

Зарегистрируйте поддержку диаграмм до открытия или импорта презентации, которая может содержать такие элементы.

Поддержка мобильных устройств

Сначала настройте мобильный редактор. В коде инициализации режима плагинов на этой странице замените указанные настольные регистрации мобильными экспортами тех же пакетов до открытия документа. Сохраните модели, стили, локализации и импорты Facade; не регистрируйте оба варианта.

Создание и обновление диаграмм

slide.newChart(type) создаёт независимый конструктор. Диаграмма появится на слайде только после передачи результата build() в 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' })

Сеттеры вставленного chart применяются сразу. Используйте toBuilder(type) вместе с update(info), когда нужна полная независимая копия или смена типа. exportImage() возвращает undefined, если UI-рендерер не может создать изображение.

Получайте активные диаграммы через slide.getCharts() и slide.getChart(id). Для удаления вызовите await chart.remove(). Конструктор Slides добавляет методы setPlaceholder(), setStroke() и setZOrder().

Многоуровневые оси категорий

Для встроенных иерархических данных выберите поля категорий от корня к листьям и включите многоуровневое отображение:

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)

Привязка данных Sheet

Для данных диаграмм, ссылающихся на другие документы, нужен UniverChartEmbedPlugin. Установите и зарегистрируйте его один раз при инициализации, до открытия презентации. Если вы явно настраиваете UniverEmbedPlugin, зарегистрируйте его первым. На мобильных устройствах используется та же настройка; для встроенных массивов данных этот плагин не нужен.

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)

Передайте ссылку на ресурс в setSource(), если диаграмма должна следовать за диапазоном Sheet, а не хранить скопированные значения:

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)

Общая конфигурация описана в справочнике Chart Facade.

Общие конструкторы также поддерживают трёхмерные диаграммы и логарифмические оси. Для Slides используйте slide.newChart() со встроенными данными или ссылкой на данные, как показано на этой странице.