mcpField
S
syncfusion-maui-toolkit-sunburst-charts

syncfusion-maui-toolkit-sunburst-charts

github.com/syncfusionデザイン・UI3945 回インストール7 週間前に更新
リポジトリ

syncfusion-maui-toolkit-sunburst-charts について

Syncfusion SfSunburstChart を .NET MAUI に実装するためのガイドです。インタラクティブな同心円で階層カテゴリと値の比率を可視化できます。

主な機能

  1. 01GroupMemberPath による階層設定
  2. 02値に応じたセグメントサイズ
  3. 03角度と半径の設定
  4. 04回転とオーバーフローに対応したデータラベル
  5. 05カスタムツールチップテンプレート
  6. 06選択の強調表示と中央コンテンツ

活用シーン

  1. 01地域から製品までの売上階層を調べる
  2. 02カテゴリ比率を放射状チャートで表示
  3. 03組織やファイルシステムの階層を可視化
  4. 04ダッシュボードに操作可能な階層ビューを追加

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/syncfusion/maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-sunburst-charts

インストール後、Claude Code で/syncfusion-maui-toolkit-sunburst-chartsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
appearance.md
center-view.md
data-labels.md
getting-started.md
selection.md
tooltips.md

詳細

.NET MAUI サンバーストチャートの実装

Syncfusion .NET MAUI Sunburst Chart(SfSunburstChart)の実装方法を紹介します。階層データを放射状のレイアウトで表示する、強力な階層型データ可視化コンポーネントです。各リングは階層のレベルを表し、セグメントのサイズは値に比例します。コンポーネントは、外観のカスタマイズ、データラベル、ツールチップ、選択に対応しています。

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

次のような場合は、Syncfusion .NET MAUI Sunburst Chart を使用してください。

  • 2~5 レベルの階層データを可視化する(組織図、ファイルシステム、製品カテゴリなど)
  • セグメントのサイズで値や件数を表し、比例関係を示す
  • 地域 → 部門 → 製品別の売上など、入れ子になったカテゴリデータを表示する
  • ツリーマップや入れ子の円グラフに代わる放射状の可視化を作成する
  • 複数レベルのデータ探索機能を備えたインタラクティブなダッシュボードを構築する

サンバーストチャートは、階層構造と各レベルでの相対的な比率の両方を把握する必要がある場合に最適です。

コンポーネントの概要

SfSunburstChart は、階層データを同心円状のリングで表示します。

  • 中心はルートを表すか、カスタムコンテンツを表示します
  • 内側のリングは上位カテゴリを表します
  • 外側のリングは詳細なサブカテゴリを表します
  • セグメントのサイズは値プロパティによって決まります

主な機能:

  • GroupMemberPath による階層レベルの設定
  • 角度、半径、内半径のカスタマイズ
  • 回転やオーバーフローモードに対応したデータラベル
  • カスタムテンプレートに対応したインタラクティブなツールチップ
  • 複数の表示モードに対応した選択ハイライト
  • 集計情報を表示するための中央ビュー

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

はじめに

📄 参照: references/getting-started.md

  • NuGet パッケージのインストールとセットアップ
  • 基本的なサンバーストチャートの実装
  • 階層データモデルの作成
  • ItemsSource と ValueMemberPath の設定
  • GroupMemberPath を使用した階層レベルの追加
  • タイトル、凡例、ツールチップ、ラベルの有効化
  • 完全な実行例
表示のカスタマイズ
外観の設定

📄 参照: references/appearance.md

  • 部分円にするための開始角度と終了角度の調整
  • 半径と内半径のカスタマイズ
  • ストロークの色と幅の設定
  • ドーナツ型の可視化の作成
データラベル

📄 参照: references/data-labels.md

  • データラベルの有効化と配置
  • オーバーフローモード(Trim、Hide)
  • 回転モード(Angle、Normal)
  • フォントのカスタマイズ(ファミリー、サイズ、色、属性)
インタラクティブ機能
ツールチップ

📄 参照: references/tooltips.md

  • セグメントの詳細を表示するツールチップの有効化
  • ツールチップの外観のカスタマイズ
  • カスタムツールチップテンプレートの作成
  • 表示時間とスタイルの設定
選択

📄 参照: references/selection.md

  • 選択の種類(Single、Child、Group、Parent)
  • 表示モード(Brush、Opacity、Stroke)
  • 選択イベント(SelectionChanging、SelectionChanged)
  • 選択したセグメントと関連する階層のハイライト
高度な機能
中央ビュー

📄 参照: references/center-view.md

  • チャートの中心へのカスタムビューの追加
  • 適切なサイズ設定のための CenterHoleSize の使用
  • 中心への集計情報の表示
  • 枠線やラベルを含む複雑なレイアウト

コメント