Диаграммы
Диаграммы визуализируют данные листа с помощью пакетов модели и интерфейса.
Режим плагинов
pnpm add @univerjs-pro/chart-ui @univerjs-pro/sheets-chart @univerjs-pro/sheets-chart-uinpm install @univerjs-pro/chart-ui @univerjs-pro/sheets-chart @univerjs-pro/sheets-chart-uiyarn add @univerjs-pro/chart-ui @univerjs-pro/sheets-chart @univerjs-pro/sheets-chart-uibun add @univerjs-pro/chart-ui @univerjs-pro/sheets-chart @univerjs-pro/sheets-chart-uiimport 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)Поддержка мобильных устройств
Сначала настройте мобильный редактор. В коде инициализации режима плагинов на этой странице замените указанные настольные регистрации мобильными экспортами тех же пакетов до открытия документа. Сохраните модели, стили, локализации и импорты Facade; не регистрируйте оба варианта.
| Пакет | Настольная регистрация | Мобильная регистрация |
|---|---|---|
@univerjs-pro/sheets-chart-ui | UniverSheetsChartUIPlugin | UniverSheetsChartMobileUIPlugin |
Режим предустановок
Функция диаграмм входит в @univerjs/preset-sheets-advanced и требует предустановку рисования во время выполнения.
pnpm add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advancednpm install @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advancedyarn add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advancedbun add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advancedimport { 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).
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() и включите многоуровневую ось.
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.
Скрытые данные и отдельные категории
setPlotVisibleOnly(false) включает значения скрытых строк и столбцов; getPlotVisibleOnly() читает настройку. setSeriesToCategory() сопоставляет индексы полей значений с индексами категорий. Индексы относятся к исходным векторам и не меняются при фильтрации видимых рядов. Пропущенные записи используют общие категории, {} очищает переопределения.
Для данных A:D ряд D может использовать категории C, а ряд B — общую категорию A.
const chart = worksheet.getCharts()[0]if (!chart) throw new Error('No chart')chart.setPlotVisibleOnly(false)chart.setSeriesToCategory({ 3: [2] })Для агрегированных отчётов см. сводные диаграммы.
Трёхмерные диаграммы
Для 3D-вариантов используется та же регистрация плагинов. Выберите тип 3D и настройте вид через отдельный конструктор.
Поддерживаются Line3D, Column3D, ColumnStacked3D, ColumnPercentStacked3D, Bar3D, BarStacked3D, BarPercentStacked3D, Pie3D, Area3D, AreaStacked3D и 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 применяется к диаграммам с осями при rightAngleAxes: false. clearThreeD() сбрасывает параметры вида, сохраняя тип 3D и ось глубины; для неё используйте clearDepthAxis(). У трёхмерных диаграмм с осями нет API вторичных осей и линий тренда. Pie3D — круговая диаграмма без отверстия.
Логарифмические числовые оси
Числовые оси двумерных линейных, областных, столбчатых, линейчатых и комбинированных диаграмм поддерживают scaleType: 'log'. Используйте setYAxis() для вертикальной оси и setXAxis() для горизонтальной числовой оси линейчатой диаграммы. setRightYAxis() настраивает существующую вторичную ось.
Основание по умолчанию — 10. Конечное значение logBase должно лежать от 2 до 1000, допускаются дробные значения, например 2.5. Границы оси должны быть положительными. Нулевые и отрицательные точки не отображаются на логарифмической шкале, исходные данные сохраняются. Процентные накопительные и 3D-диаграммы не поддерживают логарифмические оси.
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' удаляет основание логарифма; другие изменения оси сохраняют шкалу.
Насколько полезно это руководство?