syncfusion-maui-toolkit-circular-charts

.NET MAUI 円形チャートの実装

このスキルでは、Syncfusion .NET MAUI 円形チャート（SfCircularChart）の実装方法を説明します。SfCircularChart は、全体に対する各部分の割合やデータ分布を表示するための、円、ドーナツ、ラジアルバーのチャートを提供します。

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

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

• 比例データを表示する - 各部分が全体にどのように寄与しているかを示します（市場シェア、予算配分、アンケート結果など）
• 円チャートを作成する - スライスに分割された標準的な円形チャートを作成します
• ドーナツチャートを実装する - 中央に穴があり、必要に応じて追加情報を表示できる円形チャートを作成します
• ラジアルバーチャートを構築する - 円形の進捗インジケーターでカテゴリ間の値を比較します
• データ分布を示す - パーセンテージの内訳やカテゴリの比較を可視化します
• チャートの操作機能を有効にする - ツールチップ、拡張表示、選択、凡例を追加します
• 小さな値をグループ化する - 小さなデータセグメントを「その他」カテゴリに自動的にまとめます
• 可視化をエクスポートする - チャートを画像や PDF として保存します
• 外観をカスタマイズする - 色、線、間隔、視覚効果を設定します

コンポーネントの概要

SfCircularChart は、次の機能を備えた円形データ可視化用の .NET MAUI コントロールです。

• 3 種類のチャート：PieSeries、DoughnutSeries、RadialBarSeries
• データバインディング：XBindingPath と YBindingPath を使用してコレクションにバインドします
• 対話機能：ツールチップ、拡張表示、選択、凡例
• カスタマイズ：色、線、間隔、角度、半径の制御
• データラベル：セグメントに値やパーセンテージを表示します
• グループ化：小さな値を「その他」カテゴリにまとめます
• 中央のコンテンツ：ドーナツやラジアルバーの中央にカスタムビューを表示します
• エクスポート：PNG、JPEG、または PDF として保存します

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

はじめに

📄 参照： references/getting-started.md

• NuGet パッケージのインストール（Syncfusion.Maui.Toolkit）
• SfCircularChart の基本的なセットアップと初期化
• データモデルとビューモデルの作成
• チャートシリーズへのデータのバインド
• タイトル、凡例、データラベルの追加
• 最小構成で動作する完全な例

チャートの種類

📄 参照： references/chart-types.md

• PieSeries - 標準的な円チャートの実装
• DoughnutSeries - 内径と中央ビューを備えたドーナツチャート
• RadialBarSeries - 円形の進捗バー／比較バー
• チャートのサイズを設定する Radius プロパティ
• 半円チャートを作成する StartAngle と EndAngle
• ドーナツおよびラジアルバーの InnerRadius の設定
• 中央のコンテンツ用の CenterView と CenterHoleSize
• すべてのチャート種類のコード例

データラベル

📄 参照： references/data-labels.md

• データラベルの有効化と設定
• ラベルの位置と配置
• カスタムラベルテンプレート
• 重なりを防ぐスマートなラベル配置
• 外側に配置するラベルのコネクター
• ラベルの書式設定（値、パーセンテージ、カスタム書式）
• スタイルと外観のカスタマイズ

凡例

📄 参照： references/legend.md

• ChartLegend の有効化
• 凡例の位置（上、下、左、右）
• 凡例アイコンの種類とカスタマイズ
• カスタム凡例テンプレート
• 表示／非表示の切り替え機能
• 凡例のスタイルと外観

外観とスタイル

📄 参照： references/appearance.md

• セグメントの色を設定する PaletteBrushes
• 枠線を設定する Stroke と StrokeWidth
• 透明度を設定する Opacity
• セグメントの間隔を設定する GapRatio（ラジアルバー）
• ラジアルバーの範囲を設定する MaximumValue
• CapStyle のカスタマイズ（平らな端、丸みのある端）
• ラジアルバーのトラックのカスタマイズ（TrackFill、TrackStroke）
• カスタムブラシとグラデーション塗りつぶし

ツールチップ

📄 参照： references/tooltip.md

• EnableTooltip を使用したツールチップの有効化
• ツールチップの既定の動作
• カスタムツールチップテンプレート
• ツールチップのコンテンツのカスタマイズ
• ツールチップの外観のスタイル設定
• マウスオーバー時の対話動作

分割表示機能

📄 参照： references/explode.md

• チャートのセグメントを外側に分割表示する
• 分割表示するセグメントを指定する ExplodeIndex
• 分割距離を指定する ExplodeRadius
• ユーザー操作に対応する ExplodeOnTouch
• 複数のセグメントを分割表示する
• 視覚的な強調と分離

選択

📄 参照： references/selection.md

• 選択動作を有効にする
• SelectionBehavior の設定
• 選択モード（単一、複数）
• 選択されたインデックスの処理
• 選択時の視覚的なフィードバック
• 複数セグメントの選択

データのグループ化

📄 参照： references/groupto.md

• 自動グループ化のための GroupTo プロパティ
• 小さな値を「その他」カテゴリにまとめる
• グループ化のしきい値を設定する
• グループラベルと外観をカスタマイズする
• 小さなセグメントが多数あるチャートの可読性を高める

チャートのエクスポート

📄 参照： references/exporting.md

• PNG または JPEG 画像としてエクスポートする
• PDF ドキュメントとしてエクスポートする
• SaveAsImage メソッドと GetStreamAsync メソッドを使用する
• ストリームベースのエクスポート
• エクスポート品質と解像度の設定
• 各エクスポート形式のコード例