syncfusion-blazor-accumulation-chart

Syncfusion Blazor 累積チャートの実装

NuGet： Syncfusion.Blazor.Charts + Syncfusion.Blazor.Themes
名前空間： Syncfusion.Blazor.Charts

Blazor アプリケーションで割合や階層データを可視化する、インタラクティブな円グラフ、ドーナツグラフ、ファネルグラフ、ピラミッドグラフを作成するための、Syncfusion Blazor 累積チャートコンポーネント実装ガイドです。

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

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

• 円グラフを作成して割合データの分布を示す
• 中央ラベルや複数の系列を含むドーナツグラフを作成する
• 共通カテゴリにわたる関連指標を比較するため、複数のドーナツグラフ（同心円状のリング）を実装する
• 段階別データ（販売パイプライン、コンバージョン率）向けにファネルグラフを実装する
• 階層データを可視化するピラミッドグラフを作成する
• 割合の分布と全体に対する各部分の関係を表示する
• 市場シェア、アンケート結果、カテゴリ別の割合を可視化する
• スライスや凡例をインタラクティブに操作できる構成データを表示する
• スマートな配置やコネクター線を使ってデータラベルを追加する
• 動的なコンテンツを含むドーナツグラフの中央ラベルを実装する
• グラデーション、テーマ、注釈を使用して外観をカスタマイズする
• 小さなスライスをグループ化して読みやすさを向上させる
• ツールチップ、選択、イベントを使用してユーザー操作に対応する
• ARIA サポートとキーボード操作に対応したアクセシブルなグラフを作成する

コンポーネントの概要

Syncfusion Blazor 累積チャートコンポーネントは、割合データ向けの円形および三角形の可視化に特化しています。

• 4 種類のグラフ： 円、ドーナツ、ファネル、ピラミッド
• データラベル： スマートな配置、コネクター線、テンプレート、テキストの折り返し
• 凡例： 配置、ページ切り替え、クリック動作をカスタマイズ可能
• ツールチップ： 書式設定された表示、カスタムテンプレート
• 中央ラベル： 動的なコンテンツに対応したドーナツグラフ固有の機能
• 複数のドーナツグラフ： MappingKey による凡例のグループ化に対応した、同心円状のリング
• グループ化： 小さなスライスを「その他」カテゴリにまとめる
• カスタマイズ： グラデーション、注釈、テーマ、色、境界線
• インタラクティブ機能： 選択、切り離し、ホバー効果、アニメーション
• アクセシビリティ： WCAG 準拠、ARIA サポート、キーボード操作
• エクスポート： 印刷、画像エクスポートに対応

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

はじめに

📄 参照： references/getting-started.md

次のような場合に使用します。

• 新しい Blazor 累積チャートプロジェクトをセットアップする
• NuGet パッケージと依存関係をインストールする
• 最初の円グラフまたはドーナツグラフを作成する
• 基本的なコンポーネント構造を理解する
• Visual Studio、VS Code、または .NET CLI を使用する
• 累積チャートにデータをバインドする

取り上げるトピック：

• インストールの前提条件とシステム要件
• NuGet パッケージのインストール（Syncfusion.Blazor.Charts）
• サービスの登録と名前空間のインポート
• テーマとスクリプトの参照
• 基本的な SfAccumulationChart の実装
• データソースの設定（XName、YName プロパティ）
• タイトル、データラベル、ツールチップ、凡例の追加
• アプリケーションの実行

---

グラフの種類

📄 参照： references/chart-types.md

次のような場合に使用します。

• データに適したグラフの種類を選ぶ
• 円グラフ（既定の種類）を実装する
• 内半径を指定したドーナツグラフを作成する
• コンバージョンを可視化するファネルグラフを作成する
• 階層データ向けのピラミッドグラフを設計する
• 種類固有のプロパティを理解する
• 同心円状の複数リングを持つドーナツグラフのレイアウトを設定する

取り上げるトピック：

• 円グラフ： 既定の円形ビジュアライゼーションと使用する場面
• ドーナツグラフ： 内半径の設定、中央のコンテンツ領域、複数のドーナツグラフの概要
• ファネルグラフ： ネックの寸法、幅と高さの比率、データの流れ
• ピラミッドグラフ： 線形モードと表面モード、基底の配置
• 種類プロパティの設定
• 視覚的な違いとユースケース
• 各種類のコード例

複数のドーナツチャート

📄 参照: references/multiple-doughnut.md

次の場合に使用します。

• 1つのチャートに2つ以上の同心円状のドーナツリングを描画する
• 共通カテゴリ全体で関連する指標（例：売上と利益）を比較する
• MappingKey を使用して、複数の系列にまたがる凡例項目をグループ化する
• 系列ごとに Radius／InnerRadius を調整して、整った入れ子状のレイアウトを作成する
• 複数リングのチャートでツールチップ、データラベル、アニメーションを設定する
• リングの重なり、凡例項目の重複、ラベルの衝突をトラブルシューティングする

扱うトピック：

• 入れ子状のリングの仕組み： 外側のリングと内側の円盤のレイアウト
• 必須プロパティ： Type、Radius、InnerRadius、MappingKey
• MappingKey による凡例のグループ化： 重複する凡例項目の統合
• 系列ごとのカスタマイズ： 色、枠線、ツールチップ、ラベル
• 3つ以上のリング： 拡大時の指針と間隔
• 入れ子状のリングのツールチップとデータラベルに関するヒント
• 系列ごとのアニメーションの無効化
• トラブルシューティング表： よくある問題と解決策
• 本番環境向けの完全な例

---

データラベル

📄 参照: references/data-label.md

次の場合に使用します。

• データラベルを有効化してカスタマイズする
• ラベルをスライスの内側または外側に配置する
• 衝突を回避するスマートラベルを実装する
• ラベルからスライスへの接続線を追加する
• ラベルのテキスト、書式、テンプレートをカスタマイズする
• テキストの折り返しとオーバーフローに対処する
• ラベルテキストにカスタムデータフィールドを使用する

扱うトピック：

• ラベルを有効にする Visible プロパティ
• 位置のオプション（Inside、Outside）
• MaxWidth によるテキストの折り返し
• スマートなラベル配置
• 接続線のカスタマイズ（種類、長さ、色、幅）
• データソースのフィールドからのテキストマッピング
• 書式パターン（数値／パーセンテージ／通貨用の N1、P1、C1）
• HTML とコンテキスト値を使ったテンプレートのカスタマイズ
• フォントのスタイル設定、枠線、背景

---

凡例

📄 参照: references/legend.md

次の場合に使用します。

• 集積チャートに凡例を追加する
• 凡例の位置（上、下、左、右）を設定する
• 凡例の外観と動作をカスタマイズする
• データポイントが多い場合に凡例のページ切り替えを実装する
• カスタムの凡例テンプレートを作成する
• 凡例のクリックイベントに対処する

扱うトピック：

• Visible プロパティによる凡例の有効化
• 位置と配置のオプション
• 凡例の形状のカスタマイズ
• テキストのスタイル設定と省略表示
• 凡例のクリック時に表示を切り替える動作
• 凡例のページ切り替え設定
• 凡例項目用のカスタムテンプレート
• クリックイベントとホバーイベント

---

ツールチップ

📄 参照: references/tooltip.md

次の場合に使用します。

• ホバー時にツールチップを有効化する
• ツールチップの内容を書式設定する
• カスタムのツールチップテンプレートを作成する
• ツールチップの外観をスタイル設定する
• ツールチップの動作とアニメーションを設定する

扱うトピック：

• ツールチップを有効にする Enable プロパティ
• 値の表示用書式文字列
• ヘッダーのカスタマイズ
• HTML を使ったカスタムテンプレート
• 枠線、塗りつぶし、フォントのスタイル設定
• アニメーション設定
• 共有ツールチップ（該当する場合）

---

中央ラベル

📄 参照: references/center-label.md

次の場合に使用します。

• ドーナツチャートの中央にテキストを追加する
• 静的または動的な中央コンテンツを表示する
• 中央ラベルの外観をカスタマイズする
• 集計データを中央に表示する
• ホバーを基に中央のテキストを更新する機能を実装する

扱うトピック：

• 中央ラベルの Text プロパティ
• TextStyle のカスタマイズ（フォント、サイズ、色）
• テンプレートを使った動的テキスト
• イベントを使ったホバーに基づくテキスト更新
• 中央ラベルの表示制御
• ユースケースとベストプラクティス

---

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

📄 参照： references/customization-styling.md

以下の場合に使用します：

• スライスにグラデーションの塗りつぶしを適用する
• 小さなスライスを「その他」にまとめる
• 注釈（テキスト、図形、画像）を追加する
• データの空のポイントを処理する
• テーマとカラーパレットをカスタマイズする
• 枠線のスタイルと半径を設定する
• レスポンシブレイアウトを実装する
• モバイル向けのアダプティブデザインを使用する

対象トピック：

• グラデーション： スライスの放射状および線形の塗りつぶし
• グループ化： 小さな値をまとめるための GroupTo と GroupMode
• 注釈： 位置指定を伴うテキスト、図形、画像の注釈
• 空のポイント： モードのオプション（Zero、Drop、Average、Gap）
• テーマ： 組み込みテーマとカスタムテーマの適用
• 色： カスタムカラーパレットとポイントごとの色
• 枠線： 幅、色、ダッシュ配列
• 半径： 内側の半径（ドーナツ）とチャート全体の半径
• レスポンシブ： 画面サイズに応じたアダプティブレイアウト

---

アニメーションとイベント

📄 参照： references/animation-events.md

以下の場合に使用します：

• チャートの読み込みアニメーションを設定する
• ポイントの選択イベントやクリックイベントを処理する
• マウスのホバーイベントや離脱イベントに応答する
• カスタムインタラクションを実装する
• チャートのライフサイクルイベントにアクセスする
• 系列およびポイントの描画イベントを扱う

対象トピック：

• アニメーション： 有効化、継続時間、遅延の設定
• チャートイベント： Load、Loaded、BeforeResize、Resized
• ポイントイベント： OnPointClick、OnPointMove、PointRender
• 系列イベント： SeriesRender、OnLegendClick
• データラベルイベント： OnDataLabelRender、TextRender
• 選択： OnSelectionComplete、選択モード
• ツールチップイベント： TooltipRender
• イベントデータの構造とパラメーター
• 実践的なイベント処理の例

---

アクセシビリティと印刷

📄 参照： references/accessibility-printing.md

以下の場合に使用します：

• WCAG に準拠したチャートを実装する
• スクリーンリーダー向けに ARIA 属性を追加する
• キーボードナビゲーションを有効にする
• 右から左（RTL）のレイアウトに対応する
• 印刷機能を実装する
• チャートを画像としてエクスポートする
• チャートのテキストをローカライズする

対象トピック：

• アクセシビリティ： WCAG 2.1 準拠機能
• ARIA： ロール、ラベル、説明の属性
• キーボード： Tab ナビゲーションと選択
• スクリーンリーダー： 代替テキストと説明
• 印刷： 印刷メソッドと設定
• エクスポート： 画像のエクスポート（PNG、JPG、SVG）
• RTL： 右から左に記述する言語への対応
• ローカライズ： 文化圏に応じた書式設定

---

API リファレンス

📄 参照： references/api-reference.md

以下の場合に使用します：

• 列挙値とその正確な名前を確認する
• 公開メソッドのシグネチャとパラメーターを理解する
• 正しいプロパティの型と既定値を確認する
• API の使用上の問題をトラブルシューティングする
• すぐに使えるコードパターンを参照する
• 重要な使用上の注意点や落とし穴を確認する

対象トピック：

• 一般的な列挙型： AccumulationType、AccumulationLabelPosition、GroupMode、LegendPosition、ExportType
• 主要なプロパティ： Type、InnerRadius、Radius、GroupTo、GroupMode、Visible、Enable
• 公開メソッド： ExportAsync、PrintAsync、Refresh、SetAnnotationValueAsync
• 重要な使用上の注意点： 中央ラベルの制約、GroupTo の意味、列挙型の修飾
• 一般的なパターン： 基本的な円グラフ、中央ラベル付きドーナツグラフ、グループ化の例
• トラブルシューティング： ラベルの重なり、中央ラベルの問題、列挙型のコンパイルエラー

---

クイックスタートの例

最小限の円グラフの実装例です：

@page "/pie-chart"
@using Syncfusion.Blazor.Charts

<SfAccumulationChart Title="Sales Distribution">
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@SalesData" 
                                 XName="Product" 
                                 YName="Sales">
            <AccumulationDataLabelSettings Visible="true" 
                                           Name="Product">
            </AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
    
    <AccumulationChartLegendSettings Visible="true">
    </AccumulationChartLegendSettings>
</SfAccumulationChart>

@code {
    public class SalesInfo
    {
        public string Product { get; set; }
        public double Sales { get; set; }
    }

    public List<SalesInfo> SalesData = new List<SalesInfo>
    {
        new SalesInfo { Product = "Product A", Sales = 35 },
        new SalesInfo { Product = "Product B", Sales = 28 },
        new SalesInfo { Product = "Product C", Sales = 22 },
        new SalesInfo { Product = "Product D", Sales = 15 }
    };
}

一般的なパターン

中央ラベル付きドーナツグラフ

<SfAccumulationChart Title="Revenue by Region">
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@RevenueData" 
                                 XName="Region" 
                                 YName="Revenue"
                                 InnerRadius="40%">
            <AccumulationDataLabelSettings Visible="true" Position="Syncfusion.Blazor.Charts.AccumulationLabelPosition.Outside">
                <AccumulationChartConnector Length="20px">
                </AccumulationChartConnector>
            </AccumulationDataLabelSettings>
            <AccumulationChartCenterLabel 
                Text="Total<br/>$1.2M">
                <AccumulationChartCenterLabelFont 
                    Size="16px" 
                    FontWeight="600">
                </AccumulationChartCenterLabelFont>
            </AccumulationChartCenterLabel>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

コンバージョン向けファネルチャート

<SfAccumulationChart Title="Sales Funnel">
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@ConversionData" 
                                 XName="Stage" 
                                 YName="Count"
                                 Type="Syncfusion.Blazor.Charts.AccumulationType.Funnel"
                                 NeckWidth="25%"
                                 NeckHeight="10%">
            <AccumulationDataLabelSettings Visible="true" Name="Stage">
            </AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

グラデーションを使ったグループ化円グラフ

<SfAccumulationChart Title="Market Share Analysis">
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@MarketData" 
                                 XName="Company" 
                                 YName="Share"
                                 GroupTo="5"
                                 GroupMode="Syncfusion.Blazor.Charts.GroupMode.Value">
            <AccumulationDataLabelSettings Visible="true" Position="Syncfusion.Blazor.Charts.AccumulationLabelPosition.Outside">
            </AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
    <AccumulationChartLegendSettings Visible="true" Position="Syncfusion.Blazor.Charts.LegendPosition.Right">
    </AccumulationChartLegendSettings>
</SfAccumulationChart>

@code {
    // Data source with gradient applied
    public List<MarketInfo> MarketData = new List<MarketInfo>
    {
        new MarketInfo { Company = "Company A", Share = 35 },
        new MarketInfo { Company = "Company B", Share = 20 },
        new MarketInfo { Company = "Company C", Share = 15 },
        new MarketInfo { Company = "Others", Share = 30 }
    };
}

主要なプロパティとコンポーネント

SfAccumulationChart

• タイトル： グラフのタイトルテキスト
• Height/Width： グラフの寸法
• Theme： ビジュアルテーマ（Bootstrap5、Material、Fluent など）
• EnableAnimation： 読み込み時のアニメーションを有効／無効にします
• SelectionMode： ポイントまたは系列の選択
• Background： グラフの背景色

AccumulationChartSeries

• DataSource： 可視化するデータコレクション
• XName： カテゴリ／ラベルのプロパティ名
• YName： 値のプロパティ名
• Type： Pie（既定）、Doughnut、Funnel、Pyramid
• InnerRadius： ドーナツの内側の半径の割合
• Radius： グラフ全体の半径
• StartAngle/EndAngle： 円弧の位置
• GroupTo： グループ化する値／ポイント数のしきい値
• GroupMode： 値またはポイントによるグループ化モード
• Explode/ExplodeIndex： 読み込み時にスライスを分離

AccumulationDataLabelSettings

• Visible： データラベルの表示／非表示
• Name： ラベルテキストに使用するプロパティ
• Position： 内側または外側への配置
• Format： 値の書式文字列
• MaxWidth： テキストを折り返す幅
• Template： カスタム HTML テンプレート

AccumulationChartLegendSettings

• Visible： 凡例の表示／非表示
• Position： Top、Bottom、Left、Right
• Height/Width： 凡例の寸法
• ToggleVisibility： クリックによるポイントの表示／非表示を有効にします

AccumulationChartTooltipSettings

• Enable： ツールチップの表示／非表示
• Format： ツールチップのテキスト形式
• Header： カスタムヘッダーテキスト
• Template： カスタム HTML テンプレート

パブリックメソッド

SfAccumulationChart コンポーネントでは、次のパブリックメソッドを使用できます。メソッドのシグネチャと詳細については、api-reference.md を参照してください。

ExportAsync

指定した形式でグラフをエクスポートします。

await chart.ExportAsync(ExportType.PNG, "chart.png");

パラメーター：

• type (ExportType)：PNG、JPEG、SVG、または PDF
• fileName (string)：エクスポートするファイルの名前
• orientation (PdfPageOrientation?)：PDF の向き（Portrait/Landscape）、省略可能
• allowDownload (bool)：ファイルをダウンロードするかどうか。既定値は true です

PrintAsync

グラフを印刷します。

await chart.PrintAsync();

Refresh

オプションのアニメーションを使用してグラフを更新します。

chart.Refresh(shouldAnimate: true);

パラメーター：

• shouldAnimate (bool)：更新時にアニメーションを実行するかどうか。既定値は true です

SetAnnotationValueAsync

注釈の内容を動的に更新します。

await chart.SetAnnotationValueAsync(0, "Updated Content");

パラメーター：

• annotationIndex (double)：更新する注釈のインデックス
• content (string)：注釈の新しい内容

よくあるユースケース

市場シェアの可視化

各企業を示す凡例を付けた円グラフまたはドーナツグラフを使用して、競合他社間の市場分布を表示します。

販売パイプラインの追跡

ファネルチャートを使用して、販売プロセスの各段階におけるコンバージョンを可視化し、各段階での離脱を表示します。

組織階層

ピラミッドチャートを使用して、企業組織や食物連鎖などの階層構造を表示します。

アンケート結果の表示

データラベル付きの円グラフを使用して、アンケート回答の分布を明確な割合とともに表示します。

金融ポートフォリオの構成

中央に合計値を表示するドーナツグラフを使用して、資産配分を示します。

地域別収益の分布

グラデーション付きの円グラフを使用して、地域別の収益への貢献度を強調します。

関連項目

• Syncfusion Blazor Charts の概要
• Accumulation Chart API リファレンス
• Blazor Accumulation Chart のデモ