syncfusion-angular-circular-3d-chart

Syncfusion Angular Circular 3D Chart の実装

このスキルを使用するタイミング

次のような場合に、このスキルを使用します。

• Angular アプリケーションで、3D 円形チャートをゼロから作成する
• 比例データを可視化するために、円グラフやドーナツグラフを表示する
• データラベルに位置設定やテンプレートを追加してカスタマイズする
• チャート内の空のデータポイントを適切に処理する
• カスタム書式やテンプレートを使ってツールチップを設定する
• チャートの操作性を高めるために凡例を設定してカスタマイズする
• 可視化にタイトルやサブタイトルを追加する
• チャートを画像や PDF としてエクスポートまたは印刷する
• キーボード操作やスクリーンリーダーに対応し、アクセシビリティを確保する

---

コンポーネントの概要

Syncfusion Angular Circular 3D Chart コンポーネントは、3 次元の円グラフやドーナツグラフの可視化を作成するための強力なソリューションです。スマートなラベル配置、カスタムのデータラベルテンプレート、ツールチップの書式設定、包括的なエクスポート機能など、インタラクティブな機能を備え、複数のデータ表現に対応しています。このコンポーネントはスタンドアロンアーキテクチャを採用した Angular 21 以降向けに設計されており、すべてのユーザーが利用しやすいよう、アクセシビリティ機能も含まれています。

主な機能

• チャートの種類： 3D 表現に対応した円グラフとドーナツグラフ
• データラベル： 自動配置、カスタムテンプレート、コネクター線、書式設定オプション
• 空のポイント： 欠損データポイントや値が 0 のデータポイントを適切に処理
• ツールチップ： カスタム書式、ヘッダー、HTML テンプレート
• 凡例： 配置、操作、スタイルを設定可能
• タイトル： カスタマイズ可能なメインタイトルとサブタイトルに対応
• エクスポート／印刷： 高品質な出力で PNG、SVG、PDF 形式に対応
• アクセシビリティ： WCAG 準拠、キーボード操作、ARIA 属性

---

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

API リファレンス

📄 参照： references/api-reference.md

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージの設定
• 最初の 3D 円形チャートを作成する
• 基本的なコンポーネント設定
• CSS とテーマのインポート
• 最小限の動作例

円グラフとドーナツグラフの設定

📄 参照： references/pie-donut-types.md

• 円グラフの実装
• innerRadius を使用したドーナツグラフの実装
• チャートの種類を切り替える
• 半径のカスタマイズとさまざまな半径のチャート
• 系列の設定とデータのマッピング
• データソースからポイントの色をマッピングする

データラベルと空のポイント

📄 参照： references/data-labels-empty-points.md

• データラベルを有効化し、位置を設定する（内側／外側）
• テンプレートを使用したデータラベルの書式設定
• コネクター線のカスタマイズ
• 空のポイントの検出と処理
• ポイントの色のカスタマイズ
• 条件に応じた表示方法

インタラクティブ機能：ツールチップ、凡例、選択

📄 参照： references/interactivity-legends-tooltips.md

• ツールチップの有効化と設定
• ツールチップのヘッダーとカスタム書式設定
• HTML を使用したツールチップのテンプレート
• 凡例の配置とカスタマイズ
• 凡例の操作（系列の表示／非表示）
• ポイントと系列の選択

外観、タイトル、スタイル

📄 参照： references/appearance-titles-styling.md

• タイトルとサブタイトルの設定
• 系列用のカスタムカラーパレット
• ポイントの色のカスタマイズ
• 系列のスタイル設定オプション
• テーマの適用とカスタマイズ
• 枠線と塗りつぶしのスタイル設定

印刷、エクスポート、アクセシビリティ

📄 参照： references/print-export-accessibility.md

• チャートを PNG、SVG、PDF としてエクスポートする
• 印刷機能の設定
• WCAG 2.1 準拠のガイドライン
• キーボード操作のサポート
• ARIA 属性とラベル
• スクリーンリーダー向けの最適化

---

クイックスタートの例

次の最小限の例から始められます。

import { Component } from '@angular/core';
import { CircularChart3DComponent, CircularChartSeriesCollectionDirective, CircularChartSeriesDirective } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CircularChart3DComponent, CircularChartSeriesCollectionDirective, CircularChartSeriesDirective],
  template: `
    <ejs-circularchart3d id="container" [tooltip]="{ enable: true }">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series [dataSource]="chartData" xName="x" yName="y" type="Pie">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class AppComponent {
  chartData = [
    { x: 'Product A', y: 25 },
    { x: 'Product B', y: 20 },
    { x: 'Product C', y: 30 },
    { x: 'Product D', y: 25 }
  ];
}

---

よくあるパターン

パターン 1：データラベル付き円グラフ

明確なラベル付きで割合を可視化する場合：

@Component({
  template: `
    <ejs-circularchart3d>
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="data" 
          xName="name" 
          yName="value" 
          type="Pie"
          [dataLabel]="{ visible: true, position: 'Outside', name: 'x' }">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class PieChartComponent {
  data = [
    { name: 'Sales', value: 40 },
    { name: 'Marketing', value: 30 },
    { name: 'Support', value: 20 },
    { name: 'Operations', value: 10 }
  ];
}

パターン 2：凡例とツールチップ付きドーナツグラフ

インタラクティブなドーナツグラフを使用する場合：

export class DonutChartComponent {
  @ViewChild('chart')
  public chart!: CircularChart3DComponent;

  data = [
    { x: 'Chrome', y: 45, color: '#5DADE2' },
    { x: 'Firefox', y: 25, color: '#F39C12' },
    { x: 'Safari', y: 20, color: '#48C9B0' },
    { x: 'Edge', y: 10, color: '#E74C3C' }
  ];

  seriesSettings = {
    dataSource: this.data,
    xName: 'x',
    yName: 'y',
    pointColorMapping: 'color',
    innerRadius: '50%',
    type: 'Pie'
  };

  tooltipSettings = {
    enable: true,
    format: '${point.x}: ${point.y}%'
  };

  legendSettings = {
    visible: true,
    position: 'Bottom'
  };
}

パターン 3：カスタムデータラベルテンプレート付きグラフ

動的な値を含む書式設定済みラベルを使用する場合：

export class CustomLabelChartComponent {
  data = [
    { category: 'Jan', sales: 35 },
    { category: 'Feb', sales: 28 },
    { category: 'Mar', sales: 34 }
  ];

  dataLabelTemplate = '<div>${point.x}: ${point.y}K</div>';

  dataLabelSettings = {
    visible: true,
    template: this.dataLabelTemplate,
    position: 'Outside'
  };
}

---

主要なプロパティのリファレンス

プロパティ	型	目的
type	string	グラフの種類：「Pie」または「Donut」
dataSource	any[]	グラフ用のデータオブジェクトの配列
xName	string	カテゴリ／ラベルに使用するデータプロパティ
yName	string	値に使用するデータプロパティ
innerRadius	string	ドーナツの穴のサイズ（0～100％、Pie：0％、Donut：40～60％）
radius	string	グラフの半径（デフォルト：幅または高さの小さい方の80％）
pointColorMapping	string	データポイントの色に使用するデータプロパティ
dataLabel	DataLabelSettings	ラベルの設定（表示、位置、テンプレート）
tooltip	TooltipSettings	ツールチップの設定（有効化、形式、テンプレート、ヘッダー）
legendSettings	LegendSettings	凡例の位置と動作
title	string	グラフのタイトルテキスト
subTitle	string	グラフのサブタイトルテキスト
enableSmartLabels	boolean	ラベルが重ならないよう自動で配置します（デフォルト：true）
emptyPointSettings	EmptyPointSettings	欠損データポイントを処理します

---

一般的なユースケース

1. 市場シェアの分布： 円グラフを使用して、製品またはサービスの市場シェアを可視化します
2. 予算の配分： ドーナツグラフで部門ごとの予算の内訳を表示します
3. ユーザーの人口統計： 地域、年齢、その他のカテゴリ別にオーディエンスの分布を表示します
4. 売上構成： 製品ラインまたは地域別の売上貢献度を比較します
5. 品質指標： 品質に関する問題のカテゴリを割合として表します
6. アンケート結果： アンケート回答の分布と割合を可視化します

---

詳しくは、Syncfusion Angular Circular 3D Chart のドキュメントをご覧ください。