Web SDK

チャート

プラグイン情報

チャート機能を登録する

スライドのチャート機能はモデルパッケージと UI パッケージで構成されます。@univerjs-pro/chart-ui は共通の編集コントロール、ロケール、スタイルを提供します。

TypeScript
import ChartUIJaJP from '@univerjs-pro/chart-ui/locale/ja-JP'import { UniverSlidesChartPlugin } from '@univerjs-pro/slides-chart'import { UniverSlidesChartUIPlugin } from '@univerjs-pro/slides-chart-ui'import SlidesChartUIJaJP from '@univerjs-pro/slides-chart-ui/locale/ja-JP'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.JA_JP, mergeLocales(ChartUIJaJP, SlidesChartUIJaJP))univer.registerPlugin(UniverSlidesChartPlugin)univer.registerPlugin(UniverSlidesChartUIPlugin)

チャート要素を含む可能性があるプレゼンテーションを開く、または読み込む前に登録してください。

モバイル対応

まずモバイルエディターを設定します。このページのプラグインモードの初期化コードで、以下のデスクトップ登録を同じパッケージのモバイル版に置き換え、文書を開く前に完了してください。モデル、スタイル、言語ファイル、Facade は維持し、両方を同時に登録しないでください。

パッケージデスクトップの登録モバイルの登録
@univerjs-pro/slides-chart-uiUniverSlidesChartUIPluginUniverSlidesChartMobileUIPlugin

チャートを作成・更新する

slide.newChart(type) は独立したビルダーを作成します。build() の結果を slide.insertChart(info) に渡すまで、スライドには何も追加されません。

TypeScript
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 に対する setter は即時反映されます。完全な独立コピーや種類の変更が必要な場合は、toBuilder(type) と update(info) を使います。画像を提供できる UI レンダラーがない場合、exportImage() は undefined を返します。

slide.getCharts() と slide.getChart(id) でライブチャートを取得します。削除するときは await chart.remove() を呼びます。Slides ビルダーには setPlaceholder()、setStroke()、setZOrder() が追加されています。

複数レベルのカテゴリ軸

インラインの階層データでは、ルートからリーフの順にカテゴリフィールドを選択し、複数レベル表示を有効にします。

TypeScript
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 を明示的に設定する場合は、先に登録します。モバイルでも同じ設定を使用します。インライン配列には不要です。

Shell
pnpm add @univerjs-pro/chart-embed
TypeScript
import { UniverChartEmbedPlugin } from '@univerjs-pro/chart-embed'univer.registerPlugin(UniverChartEmbedPlugin)

コピーした値を保持せず Sheet 範囲を参照する場合は、リソース参照を setSource() に渡します：

TypeScript
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 リファレンスを参照してください。

共有ビルダーは 3D グラフ設定と対数値軸にも対応します。スライドでは、このページの slide.newChart() にインラインデータまたは文書データ参照を渡してください。

このガイドはいかがですか？

© 2026 DreamNum Co., Ltd.