syncfusion-angular-accumulation-chart

Syncfusion Angular Accumulation Chart の実装

Accumulation Chart コンポーネントは、円グラフ、ドーナツグラフ、ピラミッドグラフ、ファネルグラフを使用して、カテゴリ間のデータ分布を表示する強力な可視化ツールです。このスキルでは、Angular アプリケーションで Accumulation Chart を作成、設定、カスタマイズする方法を説明します。

このスキルを使用する場面

• 円グラフ／ドーナツグラフの作成 - 比例するデータ分布を表示します
• ピラミッドグラフ／ファネルグラフの構築 - 階層型または段階的なデータを表示します
• インタラクティブ要素の追加 - ツールチップ、選択、クリックイベントを実装します
• 外観のカスタマイズ - テーマ、色、グラデーション、アニメーションを適用します
• データラベルの処理 - ラベルの配置、書式設定、テンプレートを設定します
• 凡例の管理 - グラフの凡例を追加してカスタマイズします
• 注釈の追加 - タイトル、中央ラベル、カスタム注釈を挿入します
• アクセシビリティの確保 - WCAG 準拠とキーボード操作を実装します
• 動的な更新 - リアルタイムのデータ変更とグループ化に対応します
• エクスポート／印刷 - グラフの PDF へのエクスポートや印刷機能に対応します

コンポーネントの概要

Accumulation Chart は、単一のコンポーネント内で複数のシリーズタイプをサポートします。

• 円グラフ - データの比率を表す円形の扇形
• ドーナツ（innerRadius を指定した円グラフ） - 中央が空洞になった円グラフのバリエーション（中央ラベルに対応）
• ピラミッドグラフ - ピラミッド形状に積み重ねられたデータ
• ファネルグラフ - ファネル形状のデータ可視化

ドキュメントとナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

• ng add コマンドによるインストール
• データバインディングを使用した基本的なグラフの作成
• 配列および JSON のデータ形式
• CSS のインポートとテーマの設定
• コンポーネントの初期設定

シリーズの種類と設定

📄 参照: references/series-and-types.md

• 円グラフ、ドーナツグラフ、ピラミッドグラフ、ファネルグラフの比較
• シリーズのプロパティとオプション
• 複数シリーズのレンダリング
• タイプ固有の機能とユースケース

データラベルと凡例

📄 参照: references/data-labels-and-legends.md

• データラベルの配置（内側、外側、自動）
• ラベルの書式設定とカスタムテンプレート
• ラベルの表示と重なりへの対処
• 凡例の配置とカスタマイズ
• 凡例のクリックイベントと操作

注釈とタイトル

📄 参照: references/annotations-and-titles.md

• グラフのタイトルとサブタイトル
• ドーナツグラフの中央ラベル
• テキストと画像の注釈
• 注釈の配置と整列

外観とスタイル設定

📄 参照: references/appearance-and-styling.md

• カラーパレットとテーマの選択
• アニメーションの設定とタイミング
• グラデーションと単色の塗りつぶし
• カスタム CSS によるスタイル設定
• 印刷とエクスポート機能

インタラクティブ機能

📄 参照: references/interactive-features.md

• ツールチップの設定とカスタマイズ
• 選択モード（単一、複数、なし）
• ポイントとシリーズの選択イベント
• クリックとホバーのイベントハンドラー
• 選択時のスタイル設定

アクセシビリティとレスポンシブデザイン

📄 参照: references/accessibility-and-responsive.md

• WCAG 準拠の要件
• キーボード操作のパターン
• ARIA 属性とラベル
• スクリーンリーダーのサポート
• レスポンシブなグラフのサイズ設定
• モバイルとタッチ操作のサポート

高度なシナリオ

📄 参照: references/advanced-scenarios.md

• 動的なデータ更新と再描画
• データのグループ化とフィルタリング
• 空のポイントへの対処
• 一般的なパターンとワークフロー
• EJ1 から EJ2 への移行ガイド

クイックスタートの例

基本的な円グラフ

import { Component } from '@angular/core';
import { AccumulationChartModule, PieSeriesService, AccumulationTooltipService } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AccumulationChartModule],
  providers: [PieSeriesService, AccumulationTooltipService],
  template: `
    <ejs-accumulationchart id="container" [tooltip]="{ enable: true }">
      <e-accumulation-series-collection>
        <e-accumulation-series
          [dataSource]="data"
          xName="x"
          yName="y"
          type="Pie">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `,
  styles: [`#container { height: 420px; width: 100%; }`]
})
export class AppComponent {
  data = [
    { x: 'Chrome', y: 37 },
    { x: 'Firefox', y: 28 },
    { x: 'Safari', y: 18 },
    { x: 'Others', y: 17 }
  ];
}

中央ラベル付きの基本的なドーナツ（innerRadius を指定した円グラフ）

<ejs-accumulationchart id="container">
  <e-accumulation-series-collection>
    <e-accumulation-series
      [dataSource]="data"
      xName="x"
      yName="y"
      type="Pie" innerRadius="40%"
      [dataLabel]="{ visible: true, position: 'Inside', name: 'text' }">
    </e-accumulation-series>
  </e-accumulation-series-collection>
</ejs-accumulationchart>


<div style="font-size: 18px; text-align: center;">
  Total Sales: $45,000
</div>

一般的なパターン

パターン 1：動的なデータ更新

updateData() {
  this.data = [
    { x: 'Q1', y: 25000 },
    { x: 'Q2', y: 35000 },
    { x: 'Q3', y: 42000 },
    { x: 'Q4', y: 50000 }
  ];
  // Chart automatically refreshes with new data
}

パターン 2：選択イベントの処理

onPointSelected(args: IPointEventArgs) {
  console.log('Selected point:', args.pointIndex);
  console.log('Selected value:', args.series.dataSource[args.pointIndex].y);
}

パターン 3：カスタムカラーパレット

厳密なテンプレートでも使用できる方法は 2 つあります。データモデルに合う方を選んでください。

オプション A — シリーズの [palettes]（カラー配列を循環適用）：

@Component({
  template: `
    <ejs-accumulationchart>
      <e-accumulation-series-collection>
        <e-accumulation-series
          [dataSource]="data"
          xName="x"
          yName="y"
          [palettes]="palette">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class ChartComponent {
  data = [
    { x: 'A', y: 30 },
    { x: 'B', y: 25 },
    { x: 'C', y: 20 },
    { x: 'D', y: 15 }
  ];
  palette = ['#E94649', '#F6B53F', '#6FAAB0', '#FF33F3'];
}

オプション B — シリーズの pointColorMapping（各データポイントに色を設定）：

@Component({
  template: `
    <ejs-accumulationchart>
      <e-accumulation-series-collection>
        <e-accumulation-series
          [dataSource]="data"
          xName="x"
          yName="y"
          pointColorMapping="fill">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class ChartComponent {
  data = [
    { x: 'A', y: 30, fill: '#FF6B6B' },
    { x: 'B', y: 25, fill: '#4ECDC4' },
    { x: 'C', y: 20, fill: '#45B7D1' },
    { x: 'D', y: 15, fill: '#FFA07A' }
  ];
}

⚠️ <ejs-accumulationchart> では [palette]（単数形）を使用しないでください。これは型指定された @Input() ではないため、Angular の厳密モードで NG8002 が発生します。上記の 2 つのオプションはどちらも <e-accumulation-series> に指定し、厳密モードで安全に使用できます。

### Pattern 4: Legend with Position

```typescript
<ejs-accumulationchart>
  <e-accumulation-legend
    [visible]="true"
    position="Right"
    [enableHighlight]="true">
  </e-accumulation-legend>
</ejs-accumulationchart>

主な設定プロパティ

プロパティ	型	用途
type	string	チャートの種類：「Pie」、「Doughnut」、「Pyramid」、「Funnel」
dataSource	object[]	x 値と y 値を持つデータポイントの配列
xName	string	カテゴリデータのフィールド名
yName	string	値のフィールド名
dataLabel	object	ラベルの設定（位置、書式設定）
tooltip	object	ツールチップの設定（有効化、テンプレート、書式設定）
palettes	string[]	シリーズのプロパティ — データポイントに循環適用する 16 進数または名前付きカラーの配列です。<e-accumulation-series> で [palettes]="palette" を使用します。✅ 厳密モードで安全です。
pointColorMapping	string	シリーズのプロパティ — 各データオブジェクト内でデータポイントの色を保持するフィールド名（例："fill"）です。<e-accumulation-series> で pointColorMapping="fill" を使用します。✅ 厳密モードで安全です。
animation	object	アニメーションの設定（有効化、継続時間）
startAngle	number	円またはドーナツチャートの開始角度（0～360）
explode	boolean	データポイントを分離する効果を有効にします

トラブルシューティング

❌ NG8002：「ejs-accumulationchart」の既知のプロパティではないため、「palette」にバインドできません

原因： AccumulationChartComponent の Syncfusion Angular ラッパーでは、[palette] は型指定された @Input() ではありません。Angular の厳密なテンプレートチェッカー（"strictTemplates": true）により NG8002 が発生し、ビルドが失敗します。

誤った例 — NG8002 が発生します：

<ejs-accumulationchart [palette]="chartPalette">
  <e-accumulation-series [dataSource]="data" xName="x" yName="y">
  </e-accumulation-series>
</ejs-accumulationchart>

正しい例 — オプション A：シリーズの [palettes]（カラー配列）：

<ejs-accumulationchart>
  <e-accumulation-series-collection>
    <e-accumulation-series
      [dataSource]="data"
      xName="x"
      yName="y"
      [palettes]="palette">
    </e-accumulation-series>
  </e-accumulation-series-collection>
</ejs-accumulationchart>

palette = ['#E94649', '#F6B53F', '#6FAAB0', '#FF33F3', '#228B22', '#3399FF'];
// data points need no fill field — palette colors apply cyclically

正しい例 — オプション B：シリーズの pointColorMapping（データポイントごとの色）：

<ejs-accumulationchart>
  <e-accumulation-series-collection>
    <e-accumulation-series
      [dataSource]="data"
      xName="x"
      yName="y"
      pointColorMapping="fill">
    </e-accumulation-series>
  </e-accumulation-series-collection>
</ejs-accumulationchart>

data = [
  { x: 'Electronics', y: 108310, fill: '#0ea5e9' },
  { x: 'Clothing',    y: 68280,  fill: '#6366f1' },
  { x: 'Grocery',     y: 51210,  fill: '#10b981' },
  { x: 'Furniture',   y: 34140,  fill: '#f59e0b' },
  { x: 'Others',      y: 22760,  fill: '#94a3b8' }
];

重要なルール： [palettes] と pointColorMapping はどちらも、チャート要素ではなく <e-accumulation-series> に指定します。

---

❌ NG8002：その他のプロパティが不明というエラー

<ejs-accumulationchart> のバインディングで同様の NG8002 エラーが発生した場合は、次の点を確認してください。

1. AccumulationChartModule がコンポーネントの imports: [...] に指定されている
2. プロパティ名が型指定された @Input() と完全に一致している（camelCase）
3. サービス（PieSeriesService など）が providers: [...] に指定されている

---

次のステップ

1. まずはじめに： 最初のチャートを設定するには、references/getting-started.md を参照してください
2. チャートの種類を選択： 種類の詳細については、references/series-and-types.md を参照してください
3. カスタマイズ： ニーズ（ラベル、凡例、インタラクティブ機能、スタイル設定など）に応じて、ほかのリファレンスを使用してください
4. 機能を拡張： 本番環境向けの実装については、references/accessibility-and-responsive.md を参照してください

API リファレンスドキュメント

包括的な API カタログ

API ガイドの全容： references/api-reference.md

すべての API ドキュメントは https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/ で参照できます

API クイックリンク

コアコンポーネント：

• AccumulationChart - メインチャートコンポーネント
• AccumulationSeries - 系列の設定
• AccumulationDataLabelSettings - データラベルの設定
• LegendSettings - 凡例の設定
• TooltipSettings - ツールチップの設定

主な列挙型：

• AccumulationType - Pie、Doughnut、Pyramid、Funnel
• AccumulationLabelPosition - 内側、外側
• LegendPosition - 上、下、左、右

イベントインターフェイス：

• IAccLoadedEventArgs - 読み込みイベント
• IAccPointRenderEventArgs - ポイントのレンダリングイベント
• IAccLegendClickEventArgs - 凡例のクリックイベント

各リファレンスガイドの最後には、関連する API リンクを含む「API リファレンスの概要」セクションがあります。

関連スキル

• 折れ線グラフ／棒グラフの実装（その他のグラフの種類）
• Angular のデータバインディングの使用
• Angular コンポーネントのスタイル設定とテーマ設定