mcpField
S
syncfusion-maui-sunburst-charts

syncfusion-maui-sunburst-charts

github.com/syncfusionデータ・データベース61201 回インストール2 週間前に更新
リポジトリ

syncfusion-maui-sunburst-charts について

Syncfusion Sunburst Chartを実装する.NET MAUI開発者向けガイドです。階層カテゴリを同心円で表示し、ドリルダウン、ラベル、選択などの機能を扱います。

主な機能

  1. 01階層データの同心円表示
  2. 02角度、半径、内半径の設定
  3. 03データラベルとツールチップのカスタマイズ
  4. 04ドリルダウンと選択項目の強調表示
  5. 05チャート中央への任意コンテンツの追加

活用シーン

  1. 01地域や製品別の売上データの探索
  2. 02カテゴリ間の比率表示
  3. 03ダッシュボードでの大規模階層データの閲覧

インストール

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

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

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

同梱ファイル

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

references/
appearance.md
center-view.md
data-labels.md
drill-down.md
getting-started.md
liquid-glass-effect.md
selection.md
tooltips.md

詳細

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

Syncfusion® .NET MAUI Sunburst Chart（SfSunburstChart）の実装方法をユーザーに案内します。この強力な階層型データ可視化コンポーネントは、複数レベルのカテゴリデータを放射状のレイアウトで表示します。各リングは階層のレベルを表し、セグメントの大きさは値に比例します。このコンポーネントは、インタラクティブなドリルダウン、外観のカスタマイズ、データラベル、ツールチップ、選択機能、最新のリキッドグラス効果をサポートしています。

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

次のような場合に、Syncfusion® .NET MAUI Sunburst Chart を使用します。

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

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

コンポーネントの概要

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

  • 中心はルートを表すか、カスタムコンテンツを表示できます
  • 内側のリングは上位カテゴリを表します
  • 外側のリングは詳細なサブカテゴリを表します
  • セグメントの大きさは Value プロパティによって決まります
  • ドリルダウンにより、特定のブランチに焦点を当てられます

主な機能：

  • GroupMemberPath による階層レベルの設定
  • 角度、半径、内半径のカスタマイズ
  • 回転とオーバーフローモードに対応したデータラベル
  • カスタムテンプレートに対応したインタラクティブなツールチップ
  • 複数の表示モードによる選択箇所の強調表示
  • アニメーション付きツールバーナビゲーションによるドリルダウン
  • サマリー情報を表示する中央ビュー
  • モダンな iOS/macOS スタイル向けのリキッドグラス効果

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

はじめに

📄 参照： 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/drill-down.md

  • インタラクティブなドリルダウンナビゲーションの有効化
  • ツールバーの配置と位置の設定
  • ドリルダウンツールバーの外観のカスタマイズ
  • ズームバックとリセット操作
高度な機能
中央ビュー

📄 参照: references/center-view.md

  • チャートの中央にカスタムビューを追加する
  • 適切なサイズ設定に CenterHoleSize を使用する
  • 中央に概要を表示する
  • 枠線やラベルを使った複雑なレイアウト
リキッドグラスエフェクト

📄 参照: references/liquid-glass-effect.md

  • モダンなグラスデザインのスタイル設定（.NET 10+）
  • チャートを SfGlassEffectView でラップする
  • ツールチップでグラスエフェクトを有効にする
  • iOS/macOS 固有の機能

コメント

Markdown 対応