syncfusion-react-accumulation-chart

Syncfusion React Accumulation Charts の実装

Syncfusion の React Accumulation Chart コンポーネント（AccumulationChartComponent）を実装するための包括的なスキルです。Pie、Doughnut、Funnel、Pyramid チャートなど、円形および階層型のデータビジュアライゼーションを提供し、豊富なインタラクティブ機能、エクスポート機能、完全なアクセシビリティサポートを備えています。

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

次のような場合にこのスキルを使用してください。

• 比率データを表示する Pie チャートや Doughnut チャートを作成する
• 階層型またはプロセスのビジュアライゼーション用に Funnel チャートや Pyramid チャートを実装する
• パーセンテージベースまたはカテゴリ別のデータを円形レイアウトで表示する
• ツールチップ、凡例、データラベルなどのインタラクティブ機能を追加する
• 重なりを避けるためのスマートラベルの配置を実装する
• ドリルダウンまたは複数階層の Accumulation チャートを作成する
• 特定のデータポイントを強調するために Explode 効果を適用する
• 視認性を高めるために小さなデータ値をグループ化する
• テーマ、色、パターンを使ってチャートの外観をカスタマイズする
• 空のデータポイントや欠損データポイントを適切に処理する
• WCAG に準拠したアクセシブルなデータビジュアライゼーションを実装する

コンポーネントの概要

Syncfusion React Accumulation Chart コンポーネントは、次の 4 種類の主要なチャートを提供します。

• Pie Chart： データの比率を表すスライスに分割された円形チャート
• Doughnut Chart： 中央に空洞がある Pie チャート（内側の半径を設定可能）
• Funnel Chart： 段階的な減少を示す逆三角形（販売ファネル、コンバージョン率）
• Pyramid Chart： 階層型データを示す三角形（人口ピラミッド、組織構造）

主な機能：

• 重なりを避けるスマートラベル
• 値またはポイント数に基づくグループ化
• インタラクティブなツールチップと凡例
• 強調のための Explode 効果
• 角度をカスタマイズできる Semi-pie チャート
• 複数階層のドリルダウン機能
• モダンな外観にするための角丸
• パターン塗りつぶしとカスタムカラー

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

はじめに

📄 参照： references/getting-started.md

• @syncfusion/ej2-react-charts パッケージのインストール
• React プロジェクトのセットアップ（Vite または Create React App）
• AccumulationChartComponent のインポート
• CSS テーマの登録
• データバインディングを使った最初の Pie チャートの作成
• AccumulationSeriesCollectionDirective パターンの理解
• 基本的なシリーズ設定（xName、yName、dataSource）

Pie チャートと Doughnut チャート

📄 参照： references/pie-doughnut-charts.md

• PieSeries のインジェクションによる基本的な Pie チャートの作成
• 半径のカスタマイズ（デフォルトは 80％、カスタム値の設定）
• Pie の中心の位置指定（centerX、centerY プロパティ）
• innerRadius を使った Doughnut チャートの作成
• さまざまな半径の Pie チャート（スライスごとに異なるサイズ）
• startAngle と endAngle を使った Semi-pie チャートの作成
• データソースからの色とテキストのマッピング
• モダンな丸みのあるスライスにするための角丸
• マウスホバー時の境界線の表示／非表示
• パターン塗りつぶしの適用（ストライプ、ドット、グリッド）
• pointClick イベントを使った複数階層のドリルダウン
• pointRender イベントを使ったポイントのカスタマイズ

Funnel チャートと Pyramid チャート

📄 参照： references/funnel-pyramid-charts.md

• FunnelSeries のインジェクションによる Funnel チャートの作成
• Funnel のサイズのカスタマイズ（幅と高さ）
• ネックのサイズ設定（neckWidth、neckHeight）
• セグメント間の間隔（gapRatio は 0～1）
• Funnel の描画モード（Standard または Trapezoidal）
• PyramidSeries のインジェクションによる Pyramid チャートの作成
• Pyramid の描画モード（Linear または Surface）
• Pyramid のサイズのカスタマイズ
• Explode 効果（explode、explodeOffset、explodeIndex）
• Funnel／Pyramid 用のスマートなデータラベルの配置

データラベル

📄 参照: references/data-labels.md

• データラベルの有効化（visible プロパティ、AccumulationDataLabel のインジェクション）
• ラベルの配置（内側と外側）
• データラベルの回転（angle と enableRotation）
• 重なりを防ぐスマートラベル（enableSmartLabels）
• ラベルテキストの書式設定（数値形式 n、p、c）
• HTML によるカスタムデータラベルテンプレート
• コネクター線のカスタマイズ（type、color、width、length、dashArray）
• データソースからのテキストマッピング（name プロパティ）
• textRender イベントによるラベルのカスタマイズ
• テキストの折り返し（textWrap、maxWidth）
• ラベルへのパーセンテージ表示（textRender とテンプレートによる方法）

凡例の設定

📄 参照: references/legend.md

• 凡例の有効化（AccumulationLegend のインジェクション）
• 位置と配置（左、右、上、下、中央、遠方、近傍）
• 凡例項目の順序の反転
• 凡例の形状のカスタマイズ（Circle、Rectangle、Triangle など）
• 凡例と凡例項目のサイズ設定
• 項目数が多い場合の自動ページネーション
• 長いラベルのテキスト折り返し（textWrap、maximumLabelWidth）
• 凡例クリック切り替え時のアニメーション
• 凡例タイトルの設定とスタイル指定
• 矢印によるページ移動（enablePages false）
• 凡例項目のパディング調整
• レイアウトオプション（水平、垂直、maximumColumns を指定した自動）
• HTML によるカスタム凡例テンプレート
• 凡例項目の幅の固定

ツールチップのカスタマイズ

📄 参照: references/tooltip.md

• ツールチップの有効化（AccumulationTooltip のインジェクション）
• カスタムツールチップヘッダー
• 書式文字列（${point.x}、${point.y}、${series.name}）
• データソースからのツールチップマッピング（tooltipMappingName）
• HTML／React コンポーネントによるカスタムツールチップテンプレート
• ツールチップ位置の固定（location プロパティ）
• ツールチップのスタイルと外観

データのグループ化

📄 参照: references/grouping.md

• 値のしきい値によるグループ化（groupTo プロパティ）
• データポイント数によるグループ化
• グループ化モードの設定（値とポイント）
• カスタムグループ名とラベル
• グループの外観のカスタマイズ
• 視覚化を改善するためにグループ化を使用する場面

注釈

📄 参照: references/annotations.md

• AccumulationAnnotation のインジェクションによる注釈の追加
• 注釈のコンテンツと HTML テンプレート
• 注釈の配置（x、y 座標）
• 座標の単位（ピクセルとポイント）
• 1 つのチャートに複数の注釈を設定
• 注釈の動的な更新

カスタマイズとスタイル設定

📄 参照: references/customization.md

• pointRender イベントによるデータポイント単位のカスタマイズ
• カスタム配色とパレット
• データポイントごとの色の設定（fill プロパティ）
• 枠線のカスタマイズ（幅、色）
• スライスへのパターン塗りつぶし（applyPattern）
• データ値に基づくデータポイント固有のスタイル設定
• 条件付きスタイル設定のパターン

アクセシビリティ機能

📄 参照: references/accessibility.md

• WCAG 2.1 準拠機能
• キーボードナビゲーションのサポート（Tab、矢印キー）
• ARIA 属性の設定
• スクリーンリーダーのサポートと通知
• ハイコントラストモードへの対応
• 高度なアクセシビリティ設定
• フォーカスインジケーターと可視フォーカス

空のデータポイントの処理

📄 参照: references/empty-points.md

• null、undefined、NaN のデータの処理
• 空のデータポイントのモード（Zero、Drop、Average、Gap）
• 空のデータポイントの外観のカスタマイズ
• 空のデータポイントの塗りつぶしと枠線の設定
• 各空のデータポイントモードの使いどころ

外観とテーマ設定

📄 参照: references/appearance-theming.md

• 組み込みテーマ（Material、Bootstrap、Fluent、Tailwind、Fabric）
• テーマのインポートと適用
• スライスのグラデーション塗りつぶし
• タイトルとサブタイトルの設定
• データの動的更新とアニメーション
• チャートの寸法とレスポンシブなサイズ設定

エクスポートと印刷

📄 読む： references/export-print.md

• Export モジュールを使用したエクスポート機能の有効化
• 画像形式（PNG、JPEG）へのエクスポート
• PDF および SVG へのエクスポート
• beforeExport イベントによるエクスポートのカスタマイズ
• チャートの印刷機能
• 複数のチャートのエクスポート
• エクスポート後のイベント処理
• ファイル名の規則とベストプラクティス

API リファレンス

📄 読む： references/api-reference.md

• AccumulationChartComponent のプロパティに関する完全なリファレンス
• AccumulationSeriesDirective のプロパティ
• すべてのメソッド（export、print、setAnnotationValue、calculateBounds）
• すべてのイベント（ライフサイクル、レンダリング、マウス、選択、エクスポート）
• 共通のモデルインターフェイス（LegendSettings、TooltipSettings、DataLabel）
• モジュールサービスとインジェクション要件
• イベント引数のインターフェイス
• 選択パターンのリファレンス
• テーマのリファレンス
• TypeScript による完全な使用例

クイックスタートの例

基本的な円グラフを作成するための最小限の例を示します。

import { 
  AccumulationChartComponent, 
  AccumulationSeriesCollectionDirective, 
  AccumulationSeriesDirective,
  Inject,
  AccumulationLegend,
  AccumulationDataLabel,
  AccumulationTooltip,
  PieSeries
} from '@syncfusion/ej2-react-charts';

function App() {
  const data = [
    { x: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
    { x: 'Safari', y: 24.6, text: 'Safari: 24.6%' },
    { x: 'Edge', y: 5.0, text: 'Edge: 5.0%' },
    { x: 'Firefox', y: 4.8, text: 'Firefox: 4.8%' },
    { x: 'Others', y: 4.3, text: 'Others: 4.3%' }
  ];

  return (
    <AccumulationChartComponent 
      id='pie-chart'
      title='Browser Market Share'
      legendSettings={{ visible: true }}
      tooltip={{ enable: true }}
      enableSmartLabels={true}
    >
      <Inject services={[
        AccumulationLegend, 
        AccumulationDataLabel, 
        AccumulationTooltip, 
        PieSeries
      ]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          radius='90%'
          dataLabel={{
            visible: true,
            position: 'Outside',
            name: 'text'
          }}
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

よくあるパターン

パターン 1：凡例付きドーナツグラフ

<AccumulationChartComponent 
  id='doughnut-chart'
  legendSettings={{ visible: true, position: 'Right' }}
>
  <Inject services={[AccumulationLegend, PieSeries]} />
  <AccumulationSeriesCollectionDirective>
    <AccumulationSeriesDirective
      dataSource={data}
      xName='category'
      yName='value'
      innerRadius='40%'  // Creates doughnut hole
      radius='100%'
    />
  </AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>

パターン 2：データラベル付きファンネルチャート

<AccumulationChartComponent id='funnel-chart'>
  <Inject services={[FunnelSeries, AccumulationDataLabel]} />
  <AccumulationSeriesCollectionDirective>
    <AccumulationSeriesDirective
      dataSource={salesData}
      xName='stage'
      yName='count'
      type='Funnel'
      neckWidth='25%'
      neckHeight='5%'
      gapRatio={0.08}
      dataLabel={{ visible: true, position: 'Outside' }}
    />
  </AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>

パターン 3：半円グラフ（ゲージ形式）

<AccumulationSeriesDirective
  dataSource={data}
  xName='x'
  yName='y'
  startAngle={270}  // Start from bottom
  endAngle={90}     // End at bottom (semi-circle)
  radius='100%'
  innerRadius='40%'
  dataLabel={{ visible: true, position: 'Inside' }}
/>

パターン 4：切り離し円グラフ

<AccumulationSeriesDirective
  dataSource={data}
  xName='product'
  yName='sales'
  explode={true}           // Enable click-to-explode
  explodeOffset='10%'      // Distance when exploded
  explodeIndex={2}         // Explode third slice by default
  explodeAll={false}       // Don't explode all at once
/>

API リファレンス

AccumulationChartComponent のプロパティ

コアプロパティ

プロパティ	型	デフォルト	説明
dataSource	Object[] | DataManager	''	チャートのデータソース
series	AccumulationSeriesModel[]	-	系列設定のコレクション
title	string	null	チャートのメインタイトル
subTitle	string	null	メインタイトルの下に表示されるサブタイトル
width	string	null	チャートの幅（'100px'、'100%'）
height	string	null	チャートの高さ（'100px'、'100%'）
theme	AccumulationTheme	'Material'	ビジュアルテーマ（Material、Bootstrap5、Fluent、Tailwind など）
background	string	null	背景色（hex または rgba）
backgroundImage	string	null	背景画像の URL

機能プロパティ

プロパティ	型	デフォルト	説明
enableSmartLabels	boolean	true	スマートな配置によりラベルの重なりを防ぎます
enableAnimation	boolean	true	チャートの描画時にアニメーションを有効にします
enableBorderOnMouseMove	boolean	true	マウスホバー時に境界線を表示します
enableExport	boolean	true	エクスポート機能を有効にします（JPEG、PNG、SVG、PDF）
useGroupingSeparator	boolean	false	数値に桁区切り文字を使用します
enablePersistence	boolean	false	ページの再読み込み後もコンポーネントの状態を保持します
enableRtl	boolean	false	右から左への描画を有効にします
enableHtmlSanitizer	boolean	false	信頼できない HTML 値をサニタイズします

インタラクティブプロパティ

プロパティ	型	デフォルト	説明
selectionMode	AccumulationSelectionMode	'None'	ポイントの選択モード（'None'、'Point'）
selectionPattern	SelectionPattern	'None'	選択したポイントのパターン（Chessboard、Dots など）
highlightMode	AccumulationHighlightMode	'None'	ポイントのハイライトモード（'None'、'Point'）
highlightPattern	SelectionPattern	'None'	ハイライトしたポイントのパターン
highlightColor	string	''	ハイライトしたポイントの色
isMultiSelect	boolean	false	複数のポイントの選択を許可します
selectedDataIndexes	IndexesModel[]	[]	初期状態で選択されるポイントのインデックス

レイアウトプロパティ

プロパティ	型	デフォルト	説明
center	PieCenterModel	{x: '50%', y: '50%'}	円グラフの中心位置
margin	MarginModel	-	グラフの余白（左、右、上、下）
border	BorderModel	-	グラフの枠線（色、幅）
legendSettings	LegendSettingsModel	-	凡例の設定
tooltip	TooltipSettingsModel	-	ツールチップの設定
annotations	AccumulationAnnotationSettingsModel[]	-	グラフの注釈
centerLabel	CenterLabelModel	-	グラフ中央のラベル

アクセシビリティプロパティ

プロパティ	型	デフォルト	説明
accessibility	AccessibilityModel	-	スクリーンリーダー向けのアクセシビリティ設定
focusBorderColor	string	null	カスタムのフォーカス枠線の色
focusBorderWidth	number	1.5	フォーカス枠線の幅（ピクセル単位）
focusBorderMargin	number	0	フォーカス枠線の余白（ピクセル単位）
locale	string	'en-US'	ローカライズ用のカルチャ文字列

AccumulationSeriesDirective プロパティ

プロパティ	型	デフォルト	説明
type	string	'Pie'	グラフの種類（'Pie'、'Funnel'、'Pyramid'）
dataSource	Object[]	-	系列のデータ配列
xName	string	-	カテゴリ／ラベル値のプロパティ名
yName	string	-	数値のプロパティ名
radius	string	'80%'	円グラフ／ドーナツグラフの外半径
innerRadius	string	'0%'	内半径（ドーナツの穴）
startAngle	number	0	開始角度（0～360 度）
endAngle	number	360	終了角度（0～360 度）
explode	boolean	false	クリックでスライスを分離する機能を有効化
explodeAll	boolean	false	すべてのスライスを初期状態で分離
explodeIndex	number	-	デフォルトで分離するスライスのインデックス
explodeOffset	string	'30%'	スライスを分離する距離
neckWidth	string	'20%'	ファンネルの首部分の幅
neckHeight	string	'20%'	ファンネルの首部分の高さ
gapRatio	number	0	ファンネル／ピラミッドのセグメント間の間隔（0～1）
width	string	'80%'	ファンネル／ピラミッドの幅
height	string	'80%'	ファンネル／ピラミッドの高さ
groupTo	string	-	グループ化の値／件数のしきい値
groupMode	string	'Value'	グループ化モード（'Value'、'Point'）
pointColorMapping	string	-	データポイントの色に使用するプロパティ名
borderRadius	number	0	角丸スライスの角の半径
applyPattern	boolean	false	スライスにパターン塗りつぶしを適用

メソッド

メソッド	パラメーター	説明
export()	type: ExportType, fileName: string	グラフをエクスポート（JPEG、PNG、SVG、PDF）
print()	id?: string[] | string | Element	グラフを印刷
calculateBounds()	-	グラフの境界を計算
setAnnotationValue()	annotationIndex: number, content: string	注釈を動的に更新

イベント

イベント	引数の型	説明
load	IAccLoadedEventArgs	チャートの読み込み前
loaded	IAccLoadedEventArgs	チャートの読み込み後
seriesRender	IAccSeriesRenderEventArgs	系列の描画前
pointRender	IAccPointRenderEventArgs	各ポイントの描画前
textRender	IAccTextRenderEventArgs	データラベルの描画前
legendRender	ILegendRenderEventArgs	凡例の描画前
legendClick	IAccLegendClickEventArgs	凡例項目がクリックされたとき
annotationRender	IAnnotationRenderEventArgs	注釈の描画前
tooltipRender	ITooltipRenderEventArgs	ツールチップの描画前
pointClick	IPointEventArgs	ポイントがクリックされたとき
pointMove	IPointEventArgs	ポイント上にマウスが移動したとき
chartMouseClick	IMouseEventArgs	チャートがクリックされたとき
chartMouseDown	IMouseEventArgs	マウスダウンイベント時
chartMouseUp	IMouseEventArgs	マウスアップイベント時
chartMouseMove	IMouseEventArgs	チャート上にマウスが移動したとき
chartMouseLeave	IMouseEventArgs	マウスがチャートから離れたとき
chartDoubleClick	IMouseEventArgs	チャートがダブルクリックされたとき
animationComplete	IAccAnimationCompleteEventArgs	アニメーションの完了後
selectionComplete	IAccSelectionCompleteEventArgs	選択の完了後
resized	IAccResizeEventArgs	ウィンドウのサイズ変更後
beforeResize	IAccBeforeResizeEventArgs	ウィンドウのサイズ変更前
beforePrint	IPrintEventArgs	印刷開始前
beforeExport	IExportEventArgs	エクスポート開始前
afterExport	IAfterExportEventArgs	エクスポート完了後

主なプロパティの概要

プロパティ	用途	値の例
type	チャートの種類	'Pie'、'Funnel'、'Pyramid'
radius	外側のサイズ	'90%'、'100%'
innerRadius	ドーナツの穴	'0%'（円）、'40%'（ドーナツ）
startAngle / endAngle	スライスの範囲	0～360
explode	分離表示を有効化	true、false
neckWidth / neckHeight	ファネルの首部分	'25%'、'5%'
gapRatio	セグメント間隔	0～1
enableSmartLabels	スマートな配置	true、false

よくあるユースケース

1. 市場シェア分析： 競合分布を示す円グラフ／ドーナツグラフ
2. セールスファネル： 各段階のコンバージョンを追跡するファネルチャート
3. 予算配分： 支出カテゴリを示す円グラフ
4. アンケート結果： 割合の内訳を示すドーナツグラフ
5. 人口統計： 年齢分布を示すピラミッドチャート
6. プロセス効率： 離脱率を示すファネルチャート
7. ポートフォリオ分布： 資産配分を示す円グラフ
8. ウェブサイトのトラフィックソース： リファラーデータを含むドーナツグラフ
9. プロジェクトの時間配分： リソース分布を示す円グラフ
10. 顧客セグメンテーション： コホート分析用の複数の円グラフ

ヒントとベストプラクティス

• 小さなスライスが多い場合は、重なりを防ぐためにスマートラベルを使用します
• 見やすくするため、値が小さい項目（< 5%）は「その他」のカテゴリにまとめます
• 中央に主要な指標を表示する場合は、円グラフよりドーナツグラフを選びます
• 段階をより明確に比較するには、ファネルモードに**'Trapezoidal'を使用**します
• ラベルが煩雑にならないよう、詳細情報にはツールチップを有効にします
• 十分なコントラストが得られる適切な色を選びます
• テキストによる代替情報とキーボード操作を用意し、アクセシビリティを考慮します
• 重要なデータポイントを強調する場合に限り、分離表示の効果を使用します
• データポイントが8個以上あるチャートでは、enableSmartLabelsをtrueに設定します
• アプリケーション内のほかのチャートとテーマを統一します

関連コンポーネント

包括的なダッシュボードを構築する際は、Accumulation Chartsと以下を組み合わせます：

• トレンド分析用の折れ線／エリアチャート
• 比較用の棒／縦棒チャート
• プロジェクトのタイムライン用のガントチャート
• 階層的な比例データ用のツリーマップ