Web SDK

チャート

チャートは、チャートモデルと UI パッケージを使ってワークシートのデータを可視化します。

プラグインモード

Shell
pnpm add @univerjs-pro/chart-ui @univerjs-pro/sheets-chart @univerjs-pro/sheets-chart-ui
TypeScript
import ChartUIJaJP from '@univerjs-pro/chart-ui/locale/ja-JP'import { UniverSheetsChartPlugin } from '@univerjs-pro/sheets-chart'import { UniverSheetsChartUIPlugin } from '@univerjs-pro/sheets-chart-ui'import SheetsChartUIJaJP from '@univerjs-pro/sheets-chart-ui/locale/ja-JP'import SheetsChartJaJP from '@univerjs-pro/sheets-chart/locale/ja-JP'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.JA_JP,  locales: {    [LocaleType.JA_JP]: mergeLocales(ChartUIJaJP, SheetsChartJaJP, SheetsChartUIJaJP),  },})univer.registerPlugin(UniverSheetsChartPlugin)univer.registerPlugin(UniverSheetsChartUIPlugin)

モバイル対応

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

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

プリセットモード

チャート機能は @univerjs/preset-sheets-advanced に含まれ、実行時には描画プリセットが必要です。

Shell
pnpm add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced
TypeScript
import { UniverSheetsAdvancedPreset } from '@univerjs/preset-sheets-advanced'import UniverPresetSheetsAdvancedJaJP from '@univerjs/preset-sheets-advanced/locales/ja-JP'import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreJaJP from '@univerjs/preset-sheets-core/locales/ja-JP'import { UniverSheetsDrawingPreset } from '@univerjs/preset-sheets-drawing'import UniverPresetSheetsDrawingJaJP from '@univerjs/preset-sheets-drawing/locales/ja-JP'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.JA_JP,  locales: {    [LocaleType.JA_JP]: mergeLocales(      UniverPresetSheetsCoreJaJP,      UniverPresetSheetsDrawingJaJP,      UniverPresetSheetsAdvancedJaJP,    ),  },  presets: [UniverSheetsCorePreset(), UniverSheetsDrawingPreset(), UniverSheetsAdvancedPreset()],})

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

worksheet.newChart(type) は独立したビルダーを作成します。build() の結果を worksheet.insertChart(info) に渡すまで、ワークシートには何も追加されません。

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

worksheet.getCharts() と worksheet.getChart(id) でライブチャートを取得します。削除するときは await chart.remove() を呼び、共有 ECharts テーマは univerAPI.registerTheme(name, theme) で登録します。

複数レベルのカテゴリ軸

隣接するソース列が階層を構成する場合は、ルートからリーフの順に 0 始まりのインデックスを setCategoryFields() に渡し、複数レベル軸を有効にします。

TypeScript
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 を使用できます。

共通のビルダー設定はチャート Facade リファレンスを参照してください。

非表示データと個別カテゴリ

setPlotVisibleOnly(false) は非表示行・列の値を含め、getPlotVisibleOnly() は設定を取得します。setSeriesToCategory() は値フィールドのインデックスをカテゴリフィールドのインデックスへ対応付けます。インデックスは元データの位置で、可視系列の絞り込みで変わりません。省略した項目は共通カテゴリを使い、{} で上書きを解除します。

A:D のデータでは、D の値系列に C をカテゴリとして割り当て、B は共通の A を使用できます。

TypeScript
const chart = worksheet.getCharts()[0]if (!chart) throw new Error('No chart')chart.setPlotVisibleOnly(false)chart.setSeriesToCategory({ 3: [2] })

集計レポートにはピボットグラフを利用できます。

3D グラフ

3D グラフも同じグラフプラグイン構成を使用します。3D の種類を選択し、独立したビルダーで視点を設定します。

対応する種類は Line3D、Column3D、ColumnStacked3D、ColumnPercentStacked3D、Bar3D、BarStacked3D、BarPercentStacked3D、Pie3D、Area3D、AreaStacked3D、AreaPercentStacked3D です。

TypeScript
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)

軸を持つグラフでは、rightAngleAxes: false のときに perspective が適用されます。clearThreeD() は 3D の種類と奥行き軸を維持して視点設定を消去します。奥行き軸は clearDepthAxis() で消去します。3D 軸グラフは第 2 軸と近似曲線を公開せず、Pie3D は穴のない円グラフです。

対数値軸

2D の折れ線、面、縦棒、横棒、組み合わせグラフの値軸に scaleType: 'log' を設定できます。縦方向の値軸は setYAxis()、横棒グラフの横方向の値軸は setXAxis() を使います。setRightYAxis() は既存の第 2 値軸を設定します。

底の既定値は 10 です。logBase は 2～1000 の有限数で、2.5 などの小数も使えます。軸の境界は正数にしてください。ゼロと負数の点は元データを変更せず描画対象から除外されます。100% 積み上げと 3D グラフは対数軸に対応しません。

TypeScript
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' は底を削除します。他の軸プロパティの更新では現在のスケールを保持します。

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

© 2026 DreamNum Co., Ltd.