# チャート

- Human documentation: [https://docs.univer.ai/ja-JP/guides/slides/features/charts](https://docs.univer.ai/ja-JP/guides/slides/features/charts)

- Agent Markdown: [https://docs.univer.ai/ja-JP/guides/slides/features/charts.md](https://docs.univer.ai/ja-JP/guides/slides/features/charts.md)

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.2.0`

- Source: [slides/features/charts.ja-JP.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/slides/features/charts.ja-JP.mdx)

---

#### Package metadata

```json
{
  "mobile": true,
  "preset": [],
  "plugins": [
    {
      "client": "@univerjs-pro/chart-ui",
      "locale": "@univerjs-pro/chart-ui/locale/ja-JP",
      "style": "@univerjs-pro/chart-ui/lib/index.css",
      "facade": "@univerjs-pro/chart-ui/facade"
    },
    {
      "client": "@univerjs-pro/slides-chart",
      "facade": "@univerjs-pro/slides-chart/facade"
    },
    {
      "client": "@univerjs-pro/slides-chart-ui",
      "locale": "@univerjs-pro/slides-chart-ui/locale/ja-JP",
      "style": "@univerjs-pro/slides-chart-ui/lib/index.css"
    }
  ],
  "license": true,
  "server": false
}
```

## チャート機能を登録する

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

```ts
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)
```

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

## モバイル対応

まず[モバイルエディター](https://docs.univer.ai/ja-JP/guides/slides/getting-started/installation.md#mobile-support)を設定します。このページのプラグインモードの初期化コードで、以下のデスクトップ登録を同じパッケージのモバイル版に置き換え、**文書を開く前に**完了してください。モデル、スタイル、言語ファイル、Facade は維持し、両方を同時に登録しないでください。

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

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

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

```ts
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()` が追加されています。

## 複数レベルのカテゴリ軸

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

```ts
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`](https://docs.univer.ai/ja-JP/reference/packages/plugins/univerjs-pro/chart-embed.md) が必要です。インストールし、プレゼンテーションを開く前の初期化時に一度登録してください。`UniverEmbedPlugin` を明示的に設定する場合は、先に登録します。モバイルでも同じ設定を使用します。インライン配列には不要です。

#### npm

```bash
npm install @univerjs-pro/chart-embed
```

#### pnpm

```bash
pnpm add @univerjs-pro/chart-embed
```

#### yarn

```bash
yarn add @univerjs-pro/chart-embed
```

#### bun

```bash
bun add @univerjs-pro/chart-embed
```

```ts
import { UniverChartEmbedPlugin } from '@univerjs-pro/chart-embed'

univer.registerPlugin(UniverChartEmbedPlugin)
```

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

```ts
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 リファレンス](https://docs.univer.ai/ja-JP/reference/facade/chart.md)を参照してください。

共有ビルダーは [3D グラフ設定](https://docs.univer.ai/ja-JP/guides/sheets/features/charts.md#three-dimensional-charts)と[対数値軸](https://docs.univer.ai/ja-JP/guides/sheets/features/charts.md#logarithmic-axes)にも対応します。スライドでは、このページの `slide.newChart()` にインラインデータまたは文書データ参照を渡してください。