syncfusion-maui-circular-charts

.NET MAUI 円グラフの実装

このスキルでは、Syncfusion® .NET MAUI 円グラフ（SfCircularChart）の実装方法を説明します。円グラフ、ドーナツグラフ、放射状バーグラフの視覚化を提供し、全体に占める各部分の割合やデータの分布を表示できます。

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

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

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

コンポーネントの概要

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

• 3 種類のグラフ：PieSeries、DoughnutSeries、RadialBarSeries
• データバインディング：XBindingPath と YBindingPath を使ってコレクションにバインドします。
• インタラクティブ機能：ツールチップ、切り離し、選択、凡例
• カスタマイズ：色、線、間隔、角度、半径の制御
• データラベル：セグメントに値や割合を表示します。
• グループ化：小さな値を「その他」カテゴリにまとめます。
• 中央コンテンツ：ドーナツグラフや放射状バーグラフの中心にカスタムビューを表示します。
• エクスポート：PNG、JPEG、PDF として保存します。

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

はじめに

📄 参照: references/getting-started.md

• NuGet パッケージのインストール（Syncfusion.Maui.Charts）
• 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/accessibility.md

• タイトル、セグメント、凡例項目をスクリーンリーダーで読み上げる
• プラットフォームごとのアクセシビリティを有効にする（TalkBack、VoiceOver、Narrator）
• キーボード操作（Windows Narrator、macOS VoiceOver）
• ジェスチャー操作（Android TalkBack、iOS VoiceOver）
• シリーズの互換性（RadialBarSeries はサポートされていません）
• 読み上げ内容に適した意味のあるラベルを指定する

チャートのエクスポート

📄 参照: references/exporting.md

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