syncfusion-angular-3d-chart

Syncfusion Angular 3D Chart の実装

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

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

• Angular アプリケーションで 3D チャートを一から作成する
• インタラクティブな 3D ビジュアライゼーション（バー、カラム、積み上げ形式）でデータを表示する
• チャートの外観、色、スタイルをカスタマイズする
• さまざまな種類（カテゴリ、数値、日時、対数）の軸を設定する
• ツールチップ、選択、データラベル、凡例などのインタラクティブ機能を追加する
• ローカルまたはリモートのデータをデータバインディングする
• チャートを画像または PDF としてエクスポート、印刷する
• スクリーンリーダーとキーボード操作のアクセシビリティを確保する
• 寸法と 3D の遠近設定を扱う

---

コンポーネントの概要

Syncfusion Angular 3D Chart コンポーネントは、インタラクティブな 3 次元データビジュアライゼーションを作成するための包括的なソリューションです。複数のチャートタイプ（バー、カラム、積み上げ構成）、高度なカスタマイズオプション、堅牢なデータバインディング機能をサポートしています。このコンポーネントは、スタンドアロンアーキテクチャを備えた Angular 21 以降向けに設計されており、アクセシビリティ機能、キーボード操作、複数のエクスポート形式に対応しています。

主な機能

• 複数のチャートタイプ： バー、カラム、積み上げバー、積み上げカラム
• 軸の種類： カテゴリ、数値、日時、対数
• インタラクティブ機能： ツールチップ、選択モード、データラベル、凡例
• カスタマイズ： 色、テーマ、スタイル、3D 寸法
• データバインディング： ローカル配列、リモートデータソース、動的更新
• エクスポート／印刷： PNG、SVG、PDF 形式
• アクセシビリティ： WCAG 準拠、ARIA 属性、キーボードサポート

---

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

API リファレンス

📄 参照： references/api-reference.md

はじめに

📄 参照： references/getting-started.md

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

チャートタイプと設定

📄 参照： references/chart-types.md

• バーチャートの実装
• カラムチャートの実装
• 積み上げカラムの設定
• 積み上げバーの設定
• チャートタイプの切り替え
• 系列の設定

軸とデータの設定

📄 参照： references/axis-customization.md

• カテゴリ軸の設定
• 数値軸の設定
• 日時軸の設定
• 対数軸のサポート
• 複数ペインの設定

📄 参照： references/axis-labels.md

• ラベルの書式設定と表示
• ラベルの位置と回転
• カスタムラベルテンプレート
• ラベルの外観のカスタマイズ

データとラベル

📄 参照： references/data-labels.md

• データラベルの有効化と配置
• ラベルの書式設定オプション
• カスタムデータラベルテンプレート
• 条件付きラベル表示

📄 参照： references/working-with-data.md

• データバインディングの方法（配列、オブジェクト）
• カテゴリデータの設定
• リモートデータの読み込み
• リアルタイムのデータ更新
• データ更新のパターン

外観とスタイル

📄 参照： references/appearance.md

• カスタムカラーパレット
• データポイントの色のカスタマイズ
• 系列のスタイル設定オプション
• テーマの適用

📄 参照： references/dimensions.md

• 3D の奥行きと遠近の制御
• チャートの幅と高さの設定
• 回転と傾きの設定
• 壁面と角のカスタマイズ

インタラクティブ機能

📄 参照： references/tool-tip.md

• ツールチップの有効化と設定
• ツールチップのテンプレートと書式設定
• カスタムスタイルの設定
• ツールチップのイベントと操作

📄 参照： references/selection.md

• ポイント選択モード
• 複数選択の設定
• 選択時のスタイル設定
• 選択イベント

📄 参照： references/legend.md

• 凡例の有効化と配置
• 凡例のカスタマイズ
• カスタム凡例項目
• 凡例の操作

高度な機能

📄 参照： references/print-export.md

• PNG、SVG、PDF としてエクスポート
• 印刷機能
• エクスポート設定オプション
• ファイル名とパス

📄 参照： references/accessibility.md

• WCAG 2.1 準拠ガイドライン
• キーボードナビゲーションのサポート
• ARIA 属性とラベル
• スクリーンリーダー向けの最適化
• 色のコントラストと視覚的なアクセシビリティ

---

クイックスタートの例

使い始めるための最小限の例を紹介します。

import { Component } from '@angular/core';
import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective],
  template: `
    <ejs-chart3d [primaryXAxis]="xAxis" [primaryYAxis]="yAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="chartData" xName="month" yName="sales" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class AppComponent {
  chartData = [
    { month: 'Jan', sales: 35 },
    { month: 'Feb', sales: 28 },
    { month: 'Mar', sales: 34 },
    { month: 'Apr', sales: 32 },
    { month: 'May', sales: 40 }
  ];

  xAxis = { valueType: 'Category' };
  yAxis = { labelFormat: '{value}%' };
}

---

一般的なパターン

パターン 1：動的データバインディング

ユーザーがリアルタイム更新を必要とする場合は、データをプロパティにバインドし、変更検出を使用します。

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]="xAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="dynamicData" xName="x" yName="y" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class DynamicChartComponent {
  dynamicData: any[] = [];

  constructor() {
    this.loadData();
    setInterval(() => this.loadData(), 5000); // Update every 5 seconds
  }

  loadData() {
    this.dynamicData = this.generateData();
  }

  private generateData() {
    return [
      { x: 'A', y: Math.random() * 100 },
      { x: 'B', y: Math.random() * 100 }
    ];
  }
}

パターン 2：複数のチャートタイプ

ユーザーが表示形式を切り替える必要がある場合：

export class MultiTypeChartComponent {
  chartType: string = 'Column';

  switchChartType(type: string) {
    this.chartType = type; // Changes 'type' in series
  }
}

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

ユーザーがブランド固有の色を使いたい場合：

@Component({
  template: `
    <ejs-chart3d [palettes]="customPalette">
      ...
    </ejs-chart3d>
  `
})
export class CustomPaletteComponent {
  customPalette = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8'];
}

---

主要な Props のリファレンス

Prop	型	用途
primaryXAxis	AxisModel	X 軸を設定します（種類、ラベル、範囲）
primaryYAxis	AxisModel	Y 軸を設定します（種類、ラベル、範囲）
dataSource	any[]	チャート用のデータオブジェクトの配列
xName	string	X 値に使用するデータプロパティ
yName	string	Y 値に使用するデータプロパティ
type	string	チャートの種類（Column、Bar、StackedColumn、StackedBar）
name	string	凡例に表示する系列名
palettes	string[]	系列用のカスタムカラー配列
enableTooltip	boolean	ホバー時にツールチップを表示します
legendSettings	LegendSettings	凡例の外観と動作を設定します
tooltip	TooltipSettings	ツールチップのテンプレートとスタイルをカスタマイズします
marker	MarkerSettings	データポイントのマーカーを設定します
dataLabel	DataLabelSettings	データラベルを有効化し、書式を設定します

---

一般的なユースケース

1. 売上ダッシュボード： 積み上げ縦棒を使用して、地域別の月間売上を表示します
2. 在庫分析： 棒グラフを使用して、倉庫ごとの在庫数を比較します
3. パフォーマンスの追跡： 複数の系列を使って、KPI の経時的な推移を可視化します
4. 比較分析： グループ化された縦棒を使って、データを並べて比較します
5. 傾向分析： アニメーション付きの遷移で、カテゴリごとの変化を追跡します
6. 予算と実績： 積み上げ設定を使って、予算と実際の支出を比較します

---

詳細については、Syncfusion Angular 3D Chart のドキュメントをご覧ください。