syncfusion-aspnetcore-accumulation-chart

Syncfusion ASP.NET Core 集積チャートの実装

Syncfusion の ASP.NET Core 集積チャートコンポーネントを実装するための包括的なスキルです。このコンポーネントは、スケーラブルベクターグラフィックス（SVG）を使用して、円グラフ、ドーナツグラフ、ピラミッドチャート、ファネルチャートなどの円形データ可視化を描画します。

目次

• このスキルを使用する場面
• コンポーネントの概要
• ドキュメントとナビゲーションガイド
  • はじめに
  • チャートの種類とバリエーション
  • データ可視化機能
  • データ処理
  • 高度な機能
  • アクセシビリティ
• クイックスタートの例
  • 1. パッケージのインストール
  • 2. タグヘルパーの登録（~/Pages/_ViewImports.cshtml）
  • 3. スクリプトの追加（~/Pages/Shared/_Layout.cshtml）
  • 4. 円グラフの作成（~/Pages/Index.cshtml）
  • 5. データモデルの定義（~/Pages/Index.cshtml.cs または別のクラス）
• 一般的なパターン
  • パターン 1：中央ラベル付きドーナツグラフ
  • パターン 2：スマートラベルとツールチップ付き円グラフ
  • パターン 3：小さな値を含むグループ化データ
  • パターン 4：エクスポート機能付きファネルチャート
• API リファレンス
  • AccumulationChart クラス
  • AccumulationSeries クラス
  • AccumulationDataLabelSettings クラス
  • AccumulationChartLegendSettings クラス
  • AccumulationChartTooltipSettings クラス
  • 使用可能な列挙型
  • 関連クラス
• 主なプロパティ
  • AccumulationChart のプロパティ
  • AccumulationSeries のプロパティ
  • データラベルのプロパティ
• 一般的なユースケース
  • 1. 市場シェア分析
  • 2. 予算配分
  • 3. アンケート結果
  • 4. 営業ファネルの追跡
  • 5. 組織階層
  • 6. モバイルダッシュボード
  • 7. レポートの生成
  • 8. リアルタイム監視
• 関連コンポーネント
• ブラウザーのサポート
• 追加リソース

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

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

• ASP.NET Core アプリケーションで円グラフ、ドーナツグラフ、ピラミッドチャート、ファネルチャートを作成する
• 比例データや割合の分布を可視化する
• ピラミッドチャートやファネルチャートで階層データを表示する
• 集積チャートにデータラベル、ツールチップ、凡例を追加する
• インタラクティブ機能（スライスの切り離し、選択、ドリルダウン）を実装する
• チャート内のグループ化データや空のポイントを処理する
• 集積チャートをエクスポートまたは印刷する
• チャートのアクセシビリティを確保する（WCAG 2.2 準拠）
• チャートデータをリアルタイムで動的に更新する
• テーマ、色、グラデーションでチャートの外観をカスタマイズする

コンポーネントの概要

AccumulationChart は、データをセグメントに分割して数値の割合を示す円形のグラフィックスコンポーネントです。次の機能をサポートしています。

• チャートの種類： 円（ドーナツ型を含む）、ピラミッド、ファネル
  • 注： ドーナツ型は、円チャートに innerRadius を設定して実現します。独立した種類ではありません
• スマートラベル： 重なりを防ぐためのラベルの自動配置
• グループ化： 値または個数に基づいて小さなデータポイントを結合
• 半円チャート： 開始角度と終了角度をカスタマイズして、半円・半ドーナツを作成
• 凡例： データポイントの追加情報を表示
• ツールチップ： データポイントの詳細をインタラクティブに表示
• 空のデータポイント： 欠損データを適切に処理
• アクセシビリティ： WCAG 2.2 レベル A および AA に完全準拠
• エクスポート： PNG、JPEG、SVG、PDF 形式
• 印刷： ブラウザーからの直接印刷をサポート

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

はじめに

📄 参照先： references/getting-started.md

読むタイミング： 集積チャートを初めて設定するとき、またはインストールと基本的な実装について詳しく知りたいとき。

学習内容：

• 前提条件とシステム要件
• Syncfusion NuGet パッケージのインストール
• タグヘルパーとスクリプトリソースの登録
• 最初の円チャート／ドーナツチャートの作成
• 基本的なデータバインディング（dataSource、xName、yName）
• CSS テーマのインポートとスクリプトマネージャーの設定
• チャートの実行とテスト
• 最小限の完全な動作例

チャートの種類とバリエーション

📄 参照先： references/chart-types.md

読むタイミング： 特定のチャートの種類（円、ドーナツ、ピラミッド、ファネル）を実装するとき、またはチャートの形状や外観をカスタマイズするとき。

学習内容：

• 円チャートの実装と設定
• 内側の半径と中央ラベルを設定したドーナツチャート
• 幅、間隔、ネックをカスタマイズしたピラミッドチャート
• ネックの寸法を設定したファネルチャート
• すべてのチャートの種類における半径のカスタマイズ
• 半円・半ドーナツの開始角度と終了角度
• スライスの分離（単一および複数のデータポイント）
• チャート中央の位置設定
• 各種類の完全なコード例

データ可視化機能

📄 参照先： references/data-visualization.md

読むタイミング： データラベル、ツールチップ、凡例、色、カスタムスタイルを使ってチャートを拡張するとき。

学習内容：

• データラベルの表示、配置、テンプレート
• 重なりを防ぐスマートラベル
• 外側ラベルのコネクター線
• ツールチップの設定とテンプレート
• 凡例の位置、配置、カスタマイズ
• タイトルとサブタイトルの設定
• データポイントの色とグラデーション塗りつぶし
• データソースからのテキストマッピング
• 枠線と余白のカスタマイズ
• 完全なスタイル設定パターン

データの処理

📄 参照先： references/data-handling.md

読むタイミング： 小さな値のグループ化、欠損データの処理、チャートの動的な更新など、複雑なデータシナリオに取り組むとき。

学習内容：

• 値または個数のしきい値に基づくデータポイントのグループ化
• グループ設定（しきい値、モード、色、名前）
• 空のデータポイントの処理（null／undefined 値）
• 空のデータポイントのモード（Zero、Drop、Average、Gap）
• 動的なデータ更新とリアルタイムのシナリオ
• データソースのバインディングパターン
• データの並べ替えと順序付け
• エッジケースとトラブルシューティング

高度な機能

📄 参照先： references/advanced-features.md

読むタイミング： 注釈、エクスポート／印刷機能を実装するとき、または EJ1 から EJ2 に移行するとき。

学習内容：

• チャートの注釈（テキスト、図形、画像）
• 注釈の配置（座標、領域、整列）
• 画像形式（PNG、JPEG、SVG）へのエクスポート
• PDF へのエクスポート
• 印刷機能とカスタマイズ
• EJ1 から EJ2 への API 移行ガイド
• パフォーマンス最適化のヒント
• 複雑な実装パターン

アクセシビリティ

📄 参照： references/accessibility.md

読むタイミング： 障害のあるユーザーが利用しやすいチャートを作成する場合、または WCAG 2.2 への準拠を確保する場合。

学べること：

• WCAG 2.2 レベル A および AA への準拠機能
• キーボードナビゲーション（Tab、矢印キー、Enter）
• ARIA 属性とロール
• スクリーンリーダーのサポートと通知
• ハイコントラストテーマのサポート
• フォーカスインジケーターと視覚的なフィードバック
• 色のコントラスト要件
• アクセシブルなカラーパレット
• 支援技術を使用したテスト
• アクセシブルなチャートの完全な実装

クイックスタートの例

ASP.NET Core で円グラフをレンダリングする最小限の例を示します。

1. パッケージをインストールする

Install-Package Syncfusion.EJ2.AspNet.Core -Version <your_version_here>

2. Tag Helper を登録する（~/Pages/_ViewImports.cshtml）

@addTagHelper *, Syncfusion.EJ2

3. スクリプトを追加する（~/Pages/Shared/_Layout.cshtml）

<head>
    
    <script src=""></script>
</head>
<body>
    
    <ejs-scripts></ejs-scripts>
</body>

4. 円グラフを作成する（~/Pages/Index.cshtml）

@{
    List<PieChartData> chartData = new List<PieChartData>
    {
        new PieChartData { xValue = "Chrome", yValue = 37 },
        new PieChartData { xValue = "Firefox", yValue = 22 },
        new PieChartData { xValue = "Safari", yValue = 19 },
        new PieChartData { xValue = "Edge", yValue = 12 },
        new PieChartData { xValue = "Others", yValue = 10 }
    };
}

<ejs-accumulationchart id="pieChart" enableSmartLabels="true" title="Browser Market Share" subTitle="Pie chart showing browser usage distribution">
    <e-accumulation-series-collection>
        <e-accumulation-series dataSource="@chartData" xName="xValue" yName="yValue" name="Browsers">
            <e-accumulationseries-datalabel visible="true" position="Outside" name="text" format="p0">
                <e-connectorstyle type="Curve" length="20"></e-connectorstyle>
                <e-font fontWeight="600"></e-font>
            </e-accumulationseries-datalabel>
        </e-accumulation-series>
    </e-accumulation-series-collection>
    <e-accumulationchart-legendsettings position="Bottom" alignment="Center" toggleVisibility="true">
    </e-accumulationchart-legendsettings>
    <e-accumulationchart-tooltipsettings enable="true" format="${point.x}: <b>${point.y}%</b>" header="Browser">
    </e-accumulationchart-tooltipsettings>
</ejs-accumulationchart>

重要なポイント：

• title と subTitle は <ejs-accumulationchart> の直接の属性であり、子タグではありません
• <e-font> は <e-accumulationseries-datalabel> 内の正しい子タグであり、<e-datalabelfont> ではありません
• 小数点なしのパーセンテージには format="p0" を使用します

5. データモデルを定義する（~/Pages/Index.cshtml.cs または別のクラス）

public class PieChartData
{
    public string xValue { get; set; }
    public double yValue { get; set; }
}

結果： ブラウザーの使用状況を表示する基本的な円グラフです。

よく使われるパターン

パターン 1：中央ラベル付きドーナツグラフ

<ejs-accumulationchart id="container">
    <e-accumulation-series-collection>
        <e-accumulation-series dataSource="chartData" xName="x" yName="y" innerRadius="65%">
            
        </e-accumulation-series>
    </e-accumulation-series-collection>
    <e-accumulationchart-centerlabel text="Mobile<br>Browsers<br>Statistics">
    </e-accumulationchart-centerlabel>
    <e-accumulationchart-legendsettings visible="false">
    </e-accumulationchart-legendsettings>
</ejs-accumulationchart>

使用例： 中央のテキストで合計値を示すダッシュボードの KPI。

パターン 2：スマートラベルとツールチップ付き円グラフ

<ejs-accumulationchart id="smartLabelChart" enableSmartLabels="true" title="Market Share" subTitle="Distribution by browser">
    <e-accumulation-series-collection>
        <e-accumulation-series dataSource="@chartData" xName="xValue" yName="yValue">
            <e-accumulationseries-datalabel visible="true" 
                                          position="Outside" 
                                          name="text"
                                          format="p0">
                <e-connectorstyle type="Curve" length="20"></e-connectorstyle>
                <e-font fontWeight="600"></e-font>
            </e-accumulationseries-datalabel>
        </e-accumulation-series>
    </e-accumulation-series-collection>
    <e-accumulationchart-legendsettings position="Bottom" alignment="Center" toggleVisibility="true">
    </e-accumulationchart-legendsettings>
    <e-accumulationchart-tooltipsettings enable="true" format="${point.x}: <b>${point.y}%</b>" header="Browser">
    </e-accumulationchart-tooltipsettings>
</ejs-accumulationchart>

使用例： 小さなスライスが多数あるチャートで、ラベルの重なりを防ぎます。

パターン 3：小さな値を含むグループ化データ

<ejs-accumulationchart id="groupedChart">
    <e-accumulation-series-collection>
        <e-accumulation-series dataSource="@chartData" 
                              xName="xValue" 
                              yName="yValue"
                              groupTo="11">
        </e-accumulation-series>
    </e-accumulation-series-collection>
</ejs-accumulationchart>

使用例： 11% 未満の値を 1 つの「その他」グループにまとめます。

パターン 4：エクスポート機能付きファネルチャート

<button id="exportBtn">Export as PNG</button>

<ejs-accumulationchart id="funnelChart">
    <e-accumulation-series-collection>
        <e-accumulation-series dataSource="@chartData" 
                              xName="xValue" 
                              yName="yValue" 
                              type="Funnel"
                              neckWidth="15%"
                              neckHeight="18%">
        </e-accumulation-series>
    </e-accumulation-series-collection>
</ejs-accumulationchart>

<script>
    document.getElementById('exportBtn').onclick = function() {
        var chart = document.getElementById('funnelChart').ej2_instances[0];
        chart.export('PNG', 'funnel-chart');
    };
</script>

使用例： 画像としてエクスポートできるセールスファネルの可視化。

API リファレンス

AccumulationChart クラス

メインの累積チャートコンポーネントを表します。すべてのプロパティは Syncfusion.EJ2.Charts 名前空間で定義されています。

コンストラクター

public AccumulationChart()

コアプロパティ

プロパティ	型	デフォルト	説明	API リファレンス
Accessibility	AccumulationAccessibility	null	積層チャート要素のアクセシビリティを向上させるオプション	AccumulationAccessibility
Annotations	List<AccumulationAnnotationSettings>	null	特定のデータポイントを強調表示する注釈	AccumulationAnnotationSettings
Background	string	null	背景色（hex または rgba）	-
BackgroundImage	string	null	背景画像の URL	-
Border	AccumulationChartBorder	null	チャートの枠線設定	AccumulationChartBorder
Center	AccumulationChartCenter	null	円グラフ／ドーナツグラフの中心位置（x、y の割合）	AccumulationChartCenter
CenterLabel	AccumulationChartCenterLabel	null	ドーナツグラフの中央ラベル設定	AccumulationChartCenterLabel
DataSource	object	null	チャートのデータコレクション	-
EnableAnimation	bool	true	読み込み時にチャートのアニメーションを有効にする	-
EnableBorderOnMouseMove	bool	true	マウスホバー時に枠線を有効にする	-
EnableExport	bool	true	JPEG、PNG、SVG、PDF、XLSX、CSV へのエクスポートを有効にする	-
EnableHtmlSanitizer	bool	false	チャートコンテンツ内の信頼できない HTML をサニタイズする	-
EnablePersistence	bool	false	ページの再読み込み後もコンポーネントの状態を保持する	-
EnableRtl	bool	false	右から左へのレンダリングを有効にする	-
EnableSmartLabels	bool	true	ラベルの重なりを防ぐため、自動的に配置を調整する	-
FocusBorderColor	string	-	アクセシビリティ用のフォーカス枠線の色	-
FocusBorderMargin	double	0	フォーカス枠線の余白	-
FocusBorderWidth	double	1.5	フォーカス枠線の幅	-
Height	string	null	チャートの高さ（例："450px"、"100%"）	-
HighlightColor	string	""	ホバー時にデータポイントを強調表示する色	-
HighlightMode	AccumulationHighlightMode	None	強調表示モード：None または Point	AccumulationHighlightMode
HighlightPattern	SelectionPattern	None	系列／ポイントを強調表示するパターン	SelectionPattern
IsMultiSelect	bool	false	複数のポイント選択を有効にする（selectionMode=Point が必要）	-
LegendSettings	AccumulationChartLegendSettings	null	凡例の設定	AccumulationChartLegendSettings
Locale	string	""	文化／ローカライズの上書き（デフォルト：en-US）	-
Margin	AccumulationChartMargin	null	チャートの余白（左、右、上、下）	AccumulationChartMargin
NoDataTemplate	object	null	空のチャート状態に使用するテンプレート	-
SelectedDataIndexes	object	null	初期選択されるポイントのインデックス	-
SelectionMode	AccumulationSelectionMode	None	選択モード：None または Point	AccumulationSelectionMode
SelectionPattern	SelectionPattern	None	選択された系列／ポイントのパターン	SelectionPattern
Series	List<AccumulationSeries>	null	チャートの系列コレクション	AccumulationSeries
SubTitle	string	null	チャートのサブタイトルテキスト	-
SubTitleStyle	AccumulationChartSubTitleStyle	null	サブタイトルのフォントとスタイル	AccumulationChartSubTitleStyle
Theme	AccumulationTheme	Material	ビジュアルテーマ	AccumulationTheme
Title	string	null	チャートのタイトルテキスト	-
TitleStyle	AccumulationChartTitleStyleSettings	null	タイトルのフォントとスタイル	AccumulationChartTitleStyleSettings
Tooltip	AccumulationChartTooltipSettings	null	ツールチップの設定	AccumulationChartTooltipSettings
UseGroupingSeparator	bool	false	数値に桁区切り文字を使用する	-
Width	string	null	チャートの幅（例："100px"、"100%"）	-

イベントプロパティ

イベント	型	説明
AfterExport	string	エクスポートの完了後に発生します
AnimationComplete	string	アニメーションの完了後に発生します
AnnotationRender	string	アノテーションの描画前に発生します
BeforeExport	string	エクスポートの開始前に発生します
BeforePrint	string	印刷の開始前に発生します
BeforeResize	string	ウィンドウのサイズ変更前に発生します
ChartDoubleClick	string	ダブルクリック時に発生します
ChartMouseClick	string	マウスクリック時に発生します
ChartMouseDown	string	マウスダウン時に発生します
ChartMouseLeave	string	カーソルが離れたときに発生します
ChartMouseMove	string	マウスの移動またはホバー時に発生します
ChartMouseUp	string	マウスアップ時に発生します
LegendClick	string	凡例のクリック後に発生します
LegendRender	string	凡例の描画前に発生します
Load	string	チャートの読み込み前に発生します
Loaded	string	チャートの読み込み後に発生します
PointClick	string	ポイントがクリックされたときに発生します
PointMove	string	ポイントにホバーしたときに発生します
PointRender	string	ポイントの描画前に発生します
Resized	string	ウィンドウのサイズ変更完了後に発生します
SelectionComplete	string	選択の完了後に発生します
SeriesRender	string	系列の描画前に発生します
TextRender	string	データラベルの描画前に発生します
TooltipRender	string	ツールチップの描画前に発生します

AccumulationSeries クラス

累積チャート内のデータ系列を表します。

プロパティ

プロパティ	型	既定値	説明	API リファレンス
DataSource	object[]	null	系列データコレクション	-
XName	string	null	X 値（カテゴリ）のフィールド名	-
YName	string	null	Y 値（数値データ）のフィールド名	-
Type	string	"Pie"	系列の種類：Pie、Pyramid、Funnel（Doughnut = Pie + innerRadius）	-
Radius	string	"80%"	グラフの半径（パーセンテージまたはピクセル）	-
InnerRadius	string	"0%"	ドーナツ効果の内側の半径（パーセンテージ）	-
StartAngle	double	0	開始角度（度単位、0～360）	-
EndAngle	double	360	終了角度（度単位、0～360）	-
Explode	bool	false	クリック時の切り離しを有効にします	-
ExplodeIndex	double	null	あらかじめ切り離されたポイントのインデックス	-
ExplodeOffset	string	"10%"	切り離されたスライスが移動する距離	-
GroupTo	string	null	グループ化のしきい値（値またはパーセンテージ）	-
GroupMode	string	"Value"	グループ化モード：Value または Point	-
GroupName	string	"Others"	グループ化されたポイントの名前	-
PyramidMode	string	"Linear"	ピラミッドモード：Linear または Surface	-
FunnelMode	string	"Standard"	ファネルモード：Standard または Trapezoidal	-
NeckWidth	string	"20%"	ファネルの首部分の幅（パーセンテージ）	-
NeckHeight	string	"20%"	ファネルの首部分の高さ（パーセンテージ）	-
Width	string	"80%"	ピラミッド／ファネルの幅（パーセンテージ）	-
Height	string	"80%"	ピラミッド／ファネルの高さ（パーセンテージ）	-
GapRatio	double	0	ピラミッド／ファネルのセグメント間の間隔	-
Palettes	string[]	null	カスタムカラーパレット	-
PointColorMapping	string	null	ポイントの色を指定するフィールド名	-
PointRender	string	null	ポイントの描画前に発生するイベント	-
DataLabel	AccumulationDataLabelSettings	null	データラベルの設定	AccumulationDataLabelSettings
EmptyPointSettings	AccumulationChartEmptyPointSettings	null	空のポイントの処理	AccumulationChartEmptyPointSettings
ConnectorStyle	AccumulationChartConnector	null	コネクター線のスタイル設定	AccumulationChartConnector
Border	AccumulationChartBorder	null	系列の境界線のスタイル設定	AccumulationChartBorder
LegendShape	LegendShape	SeriesType	凡例アイコンの形状	LegendShape
TooltipMappingName	string	null	カスタムツールチップの内容に使用するフィールド	-

AccumulationDataLabelSettings クラス

データポイントに表示するデータラベルを設定します。

プロパティ

プロパティ	型	既定値	説明
Visible	bool	false	データラベルの表示／非表示
Position	string	"Outside"	ラベルの位置：Inside または Outside
Name	string	null	ラベルテキストのフィールド名
Template	string	null	ラベル用の HTML テンプレート
Format	string	null	数値形式（例："p1"、"n2"、"c2"）
TextWrap	string	"Normal"	テキストの折り返し：Normal、Wrap、AnyWhere
MaxWidth	double	null	ラベルの最大幅（ピクセル）
Font	object	null	フォントの設定
Border	object	null	ラベルの境界線の設定
ConnectorStyle	string	"Line"	コネクターの種類：Line または Curve

AccumulationChartLegendSettings クラス

グラフの凡例を設定します。

プロパティ

プロパティ	型	デフォルト	説明	API リファレンス
Visible	bool	false	凡例を表示／非表示にします	-
Position	string	"Right"	凡例の位置：Top、Bottom、Left、Right	LegendPosition
Alignment	string	"Center"	凡例の配置：Near、Center、Far	Alignment
Width	string	"0"	凡例の幅（ピクセルまたはパーセンテージ）	-
Height	string	"0"	凡例の高さ（ピクセルまたはパーセンテージ）	-
Reverse	bool	false	凡例項目の順序を逆にします	-
Layout	string	"Vertical"	レイアウト：Vertical または Horizontal	-
MaximumColumns	double	null	水平レイアウト時の最大列数	-
ShapeWidth	double	15	凡例の図形の幅	-
ShapeHeight	double	15	凡例の図形の高さ	-
Title	object	null	凡例タイトルの設定	-
Template	string	null	凡例用のカスタム HTML テンプレート	-
TextWrap	string	"Normal"	テキストの折り返し：Normal または Wrap	-
MaximumLabelWidth	double	null	凡例項目のラベルの最大幅	-
EnablePages	bool	false	凡例項目が多い場合にページ分割を有効にします	-
ToggleVisibility	bool	true	凡例をクリックしてデータポイントの表示を切り替えます	-

AccumulationChartTooltipSettings クラス

チャートのツールチップを設定します。

プロパティ

プロパティ	型	デフォルト	説明
Enable	bool	false	ツールチップを有効／無効にします
Header	string	null	カスタムツールチップヘッダー
Format	string	null	ツールチップのテキスト形式
Template	string	null	ツールチップ用の HTML テンプレート
Fill	string	null	ツールチップの背景色
Border	object	null	ツールチップの境界線の設定
TextStyle	object	null	ツールチップのテキストスタイル
Location	object	null	ツールチップの固定位置（x、y）
Opacity	double	1	ツールチップの不透明度
Shared	bool	false	共有ツールチップを表示します

使用可能な列挙型

列挙型	値	説明
AccumulationTheme	Fabric, FabricDark, Bootstrap4, Bootstrap, BootstrapDark, HighContrastLight, HighContrast, Tailwind, TailwindDark, Bootstrap5, Bootstrap5Dark, Fluent, FluentDark, Fluent2, Fluent2Dark, Fluent2HighContrast, Material3, Material3Dark, Material, MaterialDark	チャートのテーマ विकल्प
AccumulationHighlightMode	None, Point	強調表示の動作
AccumulationSelectionMode	None, Point	選択の動作
SelectionPattern	None, Chessboard, Dots, DiagonalForward, Crosshatch, Pacman, DiagonalBackward, Grid, Turquoise, Star, Triangle, Circle, Tile, HorizontalDash, VerticalDash, Rectangle, Box, VerticalStripe, HorizontalStripe, Bubble	強調表示／選択用のパターン
LegendShape	Circle, Rectangle, Triangle, Diamond, Cross, HorizontalLine, VerticalLine, Pentagon, InvertedTriangle, SeriesType	凡例アイコンの形状

関連クラス

クラス	名前空間	説明	API リファレンス
AccumulationChartBorder	Syncfusion.EJ2.Charts	境界線の設定	AccumulationChartBorder
AccumulationChartCenter	Syncfusion.EJ2.Charts	中心位置	AccumulationChartCenter
AccumulationChartMargin	Syncfusion.EJ2.Charts	余白の設定	AccumulationChartMargin
AccumulationChartConnector	Syncfusion.EJ2.Charts	コネクター線のスタイル設定	AccumulationChartConnector
AccumulationChartEmptyPointSettings	Syncfusion.EJ2.Charts	空のポイントの処理	AccumulationChartEmptyPointSettings
AccumulationAnnotationSettings	Syncfusion.EJ2.Charts	注釈の設定	AccumulationAnnotationSettings
AccumulationAccessibility	Syncfusion.EJ2.Charts	アクセシビリティのオプション	AccumulationAccessibility

主なプロパティ

AccumulationChart のプロパティ

プロパティ	型	説明	例
enableSmartLabels	boolean	ラベルの重なりを防ぐために自動配置します	true
center	object	チャートの中心位置（x、y の割合）	{x: "50%", y: "50%"}
legendSettings	object	凡例の設定（位置、配置）	{visible: true, position: 'Right'}
tooltipSettings	object	ツールチップとテンプレートの設定	{enable: true, format: '${point.x}: ${point.y}'}
title	string	チャートのタイトルテキスト	"Browser Market Share"
height	string	チャートの高さ	"450px"
width	string	チャートの幅	"100%"
theme	string	ビジュアルテーマ	"Material"
background	string	背景色	"#ffffff"

AccumulationSeries のプロパティ

プロパティ	型	説明	例
type	string	チャートの種類：Pie、Pyramid、Funnel（Doughnut は Pie と innerRadius の組み合わせ）	"Pie"
dataSource	object[]	データコレクション	@chartData
xName	string	カテゴリーラベルに使用するフィールド	"xValue"
yName	string	値に使用するフィールド	"yValue"
radius	string	チャートの半径（割合またはピクセル）	"80%"
innerRadius	string	ドーナツの内側の半径（割合）	"40%"
startAngle	number	開始角度（度）	0
endAngle	number	終了角度（度）	360
explode	boolean	クリック時のスライスの分離を有効にします	true
explodeIndex	number	あらかじめ分離するスライスのインデックス	2
explodeOffset	string	分離する距離	"10%"
groupTo	string	グループ化のしきい値	"11"
groupMode	string	グループ化の基準：Point、Value	"Value"

DataLabel のプロパティ

プロパティ	型	説明	例
visible	boolean	データラベルを表示／非表示にします	true
position	string	内側または外側	"Outside"
name	string	ラベルテキストに使用するフィールド名	"text"
template	string	カスタム HTML テンプレート	"<div>${point.x}: ${point.y}%</div>"
connectorStyle	string	線または曲線	"Curve"
font	object	フォントのカスタマイズ	{size: '12px', color: '#000'}

一般的なユースケース

1. 市場シェア分析

競合他社の割合を示す円グラフで、製品やサービスの市場分布を表示します。

2. 予算配分

ドーナツグラフと中央の合計値で、部門の支出やリソース配分を視覚化します。

3. アンケート結果

少数の値をまとめたカテゴリで、投票やアンケートの回答を表示します。

4. 販売ファネルの追跡

ファネルチャートを使用して、見込み顧客から顧客に至るまでのコンバージョン段階を監視します。

5. 組織階層

ピラミッドチャートで、チームの規模や役割の分布を表示します。

6. モバイルダッシュボード

タッチ操作と小さな画面に最適化された、レスポンシブなデータ視覚化を作成します。

7. レポートの生成

自動レポートシステム向けに、チャートを画像または PDF としてエクスポートします。

8. リアルタイム監視

チャートを動的に更新し、ライブ統計（サーバーの状態、ユーザーのアクティビティ）を表示します。

関連コンポーネント

• Chart： 折れ線、棒、縦棒、エリアなどの直交座標系チャート向け
• RangeNavigator： タイムラインベースのデータ探索向け
• StockChart： 金融データの視覚化向け
• TreeMap： 長方形を使った階層データ向け

ブラウザーのサポート

• Chrome（最新）
• Firefox（最新）
• Safari（最新）
• Edge（最新）
• Opera（最新）

追加リソース

• Syncfusion ASP.NET Core Accumulation Chart のドキュメント
• API リファレンス
• ライブデモ
• GitHub のサンプル

---

次のステップ：

1. 詳細なインストール方法については、getting-started.md をお読みください
2. 種類ごとの機能については、chart-types.md をご覧ください
3. スタイル設定については、data-visualization.md をご確認ください
4. コンプライアンス要件については、accessibility.md をご確認ください