# チャート - Human documentation: [https://docs.univer.ai/ja-JP/guides/sheets/features/charts](https://docs.univer.ai/ja-JP/guides/sheets/features/charts) - Agent Markdown: [https://docs.univer.ai/ja-JP/guides/sheets/features/charts.md](https://docs.univer.ai/ja-JP/guides/sheets/features/charts.md) - Requested language: `ja-JP` - Content language: `ja-JP` - Documentation version: `1.1.0` - Source: [sheets/features/charts.ja-JP.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/sheets/features/charts.ja-JP.mdx) --- #### Package metadata ```json { "mobile": true, "preset": [ { "client": "@univerjs/preset-sheets-advanced", "locale": "@univerjs/preset-sheets-advanced/locales/ja-JP", "style": "@univerjs/preset-sheets-advanced/lib/index.css" } ], "plugins": [ { "client": "@univerjs-pro/chart-ui", "locale": "@univerjs-pro/chart-ui/locale/ja-JP", "style": "@univerjs-pro/chart-ui/lib/index.css" }, { "client": "@univerjs-pro/sheets-chart", "locale": "@univerjs-pro/sheets-chart/locale/ja-JP", "facade": "@univerjs-pro/sheets-chart/facade" }, { "client": "@univerjs-pro/sheets-chart-ui", "locale": "@univerjs-pro/sheets-chart-ui/locale/ja-JP", "style": "@univerjs-pro/sheets-chart-ui/lib/index.css" } ], "license": true, "server": false } ``` チャートは、チャートモデルと UI パッケージを使ってワークシートのデータを可視化します。 > 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 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) ``` ## モバイル対応 まず[モバイルエディター](https://docs.univer.ai/ja-JP/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 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)` に渡すまで、ワークシートには何も追加されません。 ```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` に対する setter は即時反映されます。完全な独立コピーや種類の変更が必要な場合は、`toBuilder(type)` と `update(info)` を使います。画像を提供できる UI レンダラーがない場合、`exportImage()` は `undefined` を返します。 `worksheet.getCharts()` と `worksheet.getChart(id)` でライブチャートを取得します。削除するときは `await chart.remove()` を呼び、共有 ECharts テーマは `univerAPI.registerTheme(name, theme)` で登録します。 ## 複数レベルのカテゴリ軸 隣接するソース列が階層を構成する場合は、ルートからリーフの順に 0 始まりのインデックスを `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` を使用できます。 共通のビルダー設定は[チャート Facade リファレンス](https://docs.univer.ai/ja-JP/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/ja-JP/guides/sheets/features/pivot-chart.md)を利用できます。 ## 3D グラフ 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) ``` 軸を持つグラフでは、`rightAngleAxes: false` のときに `perspective` が適用されます。`clearThreeD()` は 3D の種類と奥行き軸を維持して視点設定を消去します。奥行き軸は `clearDepthAxis()` で消去します。3D 軸グラフは第 2 軸と近似曲線を公開せず、`Pie3D` は穴のない円グラフです。 ## 対数値軸 2D の折れ線、面、縦棒、横棒、組み合わせグラフの値軸に `scaleType: 'log'` を設定できます。縦方向の値軸は `setYAxis()`、横棒グラフの横方向の値軸は `setXAxis()` を使います。`setRightYAxis()` は既存の第 2 値軸を設定します。 底の既定値は `10` です。`logBase` は `2`～`1000` の有限数で、`2.5` などの小数も使えます。軸の境界は正数にしてください。ゼロと負数の点は元データを変更せず描画対象から除外されます。100% 積み上げと 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'` は底を削除します。他の軸プロパティの更新では現在のスケールを保持します。