syncfusion-wpf-sunburst-chart

アセンブリ要件

必須アセンブリ：

• Syncfusion.SfSunburstChart.WPF

NuGet パッケージ：

Install-Package Syncfusion.SfSunburstChart.WPF

最小 .NET Framework： 4.5 以上

サンバーストチャートの実装

階層データを同心円状のリングで視覚化する Syncfusion WPF サンバーストチャート（SfSunburstChart）コントロールの実装ガイドです。サンバーストチャートでは、複数レベルのカテゴリデータを表示します。各リングが階層内のレベルを表し、中心がルート、外側のリングがより深いレベルを表します。

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

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

• 複数レベルの階層データを円形レイアウトで視覚化する
• 組織構造（部署、チーム、役割）を表示する
• ファイルシステムの階層（フォルダー、サブフォルダー、ファイル）を表示する
• 地域、カテゴリ、製品、サブカテゴリ別に整理された売上データを提示する
• インタラクティブなズーム操作を備えたドリルダウン体験を実装する
• サイズで値を表す複数レベルの円形ビジュアライゼーションを作成する
• ツリー構造のデータをコンパクトで視覚的な形式で表示する
• ネストされたカテゴリデータのインタラクティブな探索を可能にする

サンバーストチャートは、2～5 レベルの階層データがあり、カテゴリの構造と相対的なサイズの両方を表示したい場合に最適です。

コンポーネントの概要

SfSunburstChart は、階層データを同心円で視覚化する専用の WPF コントロールです。

主な機能：

• 複数レベルの階層： 2～5 以上の階層レベルをサポート
• データバインディング： IEnumerable データソースに対応した MVVM 互換性
• インタラクティブ機能： ツールチップ、選択、ズーム／ドリルダウン
• ビジュアルのカスタマイズ： カラーパレット、データラベル、凡例
• アニメーション： 滑らかな描画を実現する FadeIn および Rotation アニメーション
• レスポンシブデザイン： 半径と角度をカスタマイズ可能

主要なプロパティ：

• ItemsSource – データコレクション（階層データモデル）
• ValueMemberPath – セグメントのサイズに使用するプロパティ名
• Levels – 各階層レベルを定義するコレクション
• GroupMemberPath – 各レベルのグループ化に使用するプロパティ

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

はじめに

📄 参照： references/getting-started.md

次のような場合は、このリファレンスを使用してください。

• 新しいサンバーストチャートプロジェクトを設定する
• アセンブリ参照（Syncfusion.SfSunburstChart.WPF）を追加する
• データモデルと ViewModel を作成する
• チャートにデータをバインドする
• 基本的なビジュアル要素（ヘッダー、凡例、データラベル）を追加する
• 完全な動作例を確認する

取り上げるトピック：

• アセンブリ参照とインストール
• 名前空間のインポート（XAML と C#）
• 階層データのデータモデル構造
• ObservableCollection を使用した ViewModel の初期化
• 基本的なチャート設定（ItemsSource、ValueMemberPath）
• ヘッダー、凡例、データラベルの追加
• テーマの統合

階層レベルの設定

📄 参照： references/hierarchical-levels.md

次のような場合は、このリファレンスを使用してください。

• 階層構造を定義する
• 複数レベル（2～5 以上）を設定する
• GroupMemberPath のマッピングを理解する
• カテゴリとサブカテゴリ別にデータを整理する

取り上げるトピック：

• SunburstHierarchicalLevel の概要
• Levels コレクションの管理
• GroupMemberPath プロパティの使用方法
• 複数レベルの階層の例
• レベルの順序と構造

データラベル

📄 参照： references/data-labels.md

次のような場合は、このリファレンスを使用してください。

• セグメントにカテゴリ名と値を表示する
• ラベルの外観と配置をカスタマイズする
• ラベルのはみ出し（Hide または Trim）に対応する
• 読みやすさを高めるためにラベルを回転する
• カスタムラベルテンプレートを作成する

取り上げるトピック：

• ラベルの有効化／無効化（ShowLabel）
• LabelOverflowMode（Hide、Trim）
• LabelRotationMode（Normal、Angle）
• フォントのカスタマイズ（FontFamily、FontSize、FontStyle、FontWeight）
• カスタムテンプレート（LabelTemplate）
• 前景色のカスタマイズ

凡例の構成

📄 参照: references/legend.md

次の場合にこのリファレンスを使用します：

• カテゴリを識別する凡例を追加する
• 凡例のアイコンとレイアウトをカスタマイズする
• 凡例の位置（左、右、上、下）を指定する
• 凡例のインタラクティブ性（クリックして選択／非表示）を実装する
• カスタム凡例テンプレートを作成する

対象トピック：

• 凡例の初期化
• LegendIcon の形状（Circle、Pentagon、Rectangle など）
• アイコンのサイズ（IconHeight、IconWidth）
• カスタム凡例テンプレート（LegendIconTemplate）
• 位置の指定（DockPosition）
• 凡例のインタラクティブ性（ClickAction：ToggleSegmentSelection、ToggleSegmentVisibility）

アニメーション

📄 参照: references/animation.md

次の場合にこのリファレンスを使用します：

• 滑らかな表示アニメーションを追加する
• アニメーションの時間を設定する
• FadeIn アニメーションと Rotation アニメーションのどちらかを選択する

対象トピック：

• EnableAnimation プロパティ
• AnimationDuration の設定
• AnimationType のオプション（FadeIn、Rotation）
• パフォーマンスに関する考慮事項

ビジュアルのカスタマイズ

📄 参照: references/visual-customization.md

次の場合にこのリファレンスを使用します：

• カラーパレット（定義済みまたはカスタム）を適用する
• カスタム配色を作成する
• チャートの寸法（半径、内半径）を調整する
• 開始角度と終了角度をカスタマイズする
• グラデーションブラシを使用する

対象トピック：

• 定義済みパレット（Metro、AutumnBrights、FloraHues など）
• カスタムパレット（ColorModel、CustomBrushes）
• グラデーションブラシの例
• 領域プロパティ（StartAngle、EndAngle、Radius、InnerRadius）
• ビジュアル構造のカスタマイズ

インタラクティブ機能

📄 参照: references/interactivity.md

次の場合にこのリファレンスを使用します：

• ホバー時のツールチップを追加する
• セグメントの選択を実装する
• ドリルダウン／ズームを有効にする
• インタラクティブな動作を設定する
• ユーザーエクスペリエンスをカスタマイズする

対象トピック：

• ツールチップ： ShowToolTip、配置、オフセット、表示時間、カスタムテンプレート
• 選択： SelectionDisplayMode、SelectionMode、SelectionType、SelectionBrush
• ズーム： SunburstZoomingBehavior、ツールバーの設定、ドリルダウン

イベント処理

📄 参照: references/events.md

次の場合にこのリファレンスを使用します：

• セグメントの作成に応答する
• 選択の変更を処理する
• セグメントを動的にカスタマイズする
• ユーザー操作に応じたカスタム動作を実装する

対象トピック：

• SegmentCreated イベント
• SelectionChanged イベント
• イベント引数のプロパティ
• セグメントの動的なカスタマイズ
• イベントハンドラーのパターン

クイックスタートの例

従業員の分布を示すサンバーストチャートを作成する最小限の例を紹介します。

1. アセンブリ参照を追加する

<Window xmlns:sunburst="clr-namespace:Syncfusion.UI.Xaml.SunburstChart;assembly=Syncfusion.SfSunburstChart.WPF">

2. データモデルを作成する

public class EmployeeData
{
    public string Country { get; set; }
    public string Department { get; set; }
    public string Team { get; set; }
    public double EmployeeCount { get; set; }
}

3. ViewModel を作成する

public class ViewModel
{
    public ObservableCollection<EmployeeData> Data { get; set; }
    
    public ViewModel()
    {
        Data = new ObservableCollection<EmployeeData>
        {
            new EmployeeData { Country = "USA", Department = "Sales", Team = "Field Sales", EmployeeCount = 45 },
            new EmployeeData { Country = "USA", Department = "Sales", Team = "Inside Sales", EmployeeCount = 30 },
            new EmployeeData { Country = "USA", Department = "Engineering", Team = "Development", EmployeeCount = 85 },
            new EmployeeData { Country = "USA", Department = "Engineering", Team = "QA", EmployeeCount = 35 },
            new EmployeeData { Country = "India", Department = "Engineering", Team = "Development", EmployeeCount = 120 },
            new EmployeeData { Country = "India", Department = "Engineering", Team = "QA", EmployeeCount = 40 },
            new EmployeeData { Country = "UK", Department = "Sales", Team = "Field Sales", EmployeeCount = 25 },
            new EmployeeData { Country = "UK", Department = "Marketing", Team = "Digital", EmployeeCount = 20 }
        };
    }
}

4. XAML の構成

<sunburst:SfSunburstChart ItemsSource="{Binding Data}" ValueMemberPath="EmployeeCount"
                          Header="Employee Distribution" FontSize="20">
    
    
    <sunburst:SfSunburstChart.Levels>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Country"/>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Department"/>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Team"/>
    </sunburst:SfSunburstChart.Levels>
    
    
    <sunburst:SfSunburstChart.Legend>
        <sunburst:SunburstLegend DockPosition="Left"/>
    </sunburst:SfSunburstChart.Legend>
    
    
    <sunburst:SfSunburstChart.DataLabelInfo>
        <sunburst:SunburstDataLabelInfo ShowLabel="True"/>
    </sunburst:SfSunburstChart.DataLabelInfo>
    
</sunburst:SfSunburstChart>

5. DataContext を設定する

public MainWindow()
{
    InitializeComponent();
    this.DataContext = new ViewModel();
}

よく使われるパターン

パターン 1：3～4 レベルの階層データ

<sunburst:SfSunburstChart ItemsSource="{Binding HierarchicalData}" 
                          ValueMemberPath="Value"
                          Palette="Metro">
    <sunburst:SfSunburstChart.Levels>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Level1"/>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Level2"/>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Level3"/>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Level4"/>
    </sunburst:SfSunburstChart.Levels>
</sunburst:SfSunburstChart>

使用場面： 組織構造、ファイルシステム、または複数レベルの販売データを表示する場合。

パターン 2：選択とツールチップを備えたインタラクティブなチャート

<sunburst:SfSunburstChart ItemsSource="{Binding Data}" ValueMemberPath="Value">
    
    <sunburst:SfSunburstChart.Behaviors>
        
        <sunburst:SunburstSelectionBehavior EnableSelection="True"
                                           SelectionMode="MouseClick"
                                           SelectionType="Single"/>
        
        
        <sunburst:SunburstToolTipBehavior ShowToolTip="True"
                                         ShowDuration="3000"/>
    </sunburst:SfSunburstChart.Behaviors>
    
</sunburst:SfSunburstChart>

使用場面： 詳細情報を得るために、ユーザーがセグメントを操作する必要がある場合。

パターン 3：ズームによるドリルダウン

<sunburst:SfSunburstChart ItemsSource="{Binding Data}" 
                          ValueMemberPath="Value">
    
    <sunburst:SfSunburstChart.Behaviors>
        
        <sunburst:SunburstZoomingBehavior EnableZooming="True"
                                         ToolBarHorizontalAlignment="Right"
                                         ToolBarVerticalAlignment="Top"/>
    </sunburst:SfSunburstChart.Behaviors>
    
</sunburst:SfSunburstChart>

使用場面： 特定のカテゴリにズームインして、ユーザーが深い階層を調べる必要がある場合。

パターン 4：グラデーションブラシを使ったカスタムパレット

<sunburst:SfSunburstChart ItemsSource="{Binding Data}" ValueMemberPath="Value" Palette="Custom">
    
    <sunburst:SfSunburstChart.ColorModel>
        <sunburst:SunburstColorModel>
            <sunburst:SunburstColorModel.CustomBrushes>
                <LinearGradientBrush>
                    <GradientStop Color="#FF6B88E6" Offset="0"/>
                    <GradientStop Color="#FF2C5AA0" Offset="1"/>
                </LinearGradientBrush>
                <LinearGradientBrush>
                    <GradientStop Color="#FFE67E6B" Offset="0"/>
                    <GradientStop Color="#FFA0422C" Offset="1"/>
                </LinearGradientBrush>
            </sunburst:SunburstColorModel.CustomBrushes>
        </sunburst:SunburstColorModel>
    </sunburst:SfSunburstChart.ColorModel>
    
</sunburst:SfSunburstChart>

使用場面： 企業のブランドに合わせる場合や、カスタムのカラーテーマを作成する場合。

パターン 5：回転による表示アニメーション

<sunburst:SfSunburstChart ItemsSource="{Binding Data}" 
                          ValueMemberPath="Value"
                          EnableAnimation="True"
                          AnimationType="Rotation"
                          AnimationDuration="1500">
    
</sunburst:SfSunburstChart>

使用場面： 滑らかな表示アニメーションで、視覚的な仕上がりを高める場合。

主なプロパティ

基本的なデータバインディング

• ItemsSource – IEnumerable データソース（階層データのコレクション）
• ValueMemberPath – セグメントサイズの計算に使用するプロパティ名
• Levels – 階層を定義する SunburstHierarchicalLevel のコレクション
• GroupMemberPath（各レベルのプロパティ）– 各レベルでカテゴリをグループ化するためのプロパティ

視覚要素

• Header – チャートのタイトル
• Legend – カテゴリを識別するための SunburstLegend
• DataLabelInfo – セグメントのラベル用の SunburstDataLabelInfo
• Palette – カラースキーム（Metro、AutumnBrights、Custom など）
• ColorModel – カスタムブラシの定義

リージョンのプロパティ

• Radius – チャートの外側の半径（0.0～1.0、既定値：0.9）
• InnerRadius – 中心円の半径（0.0～1.0、既定値：0.2）
• StartAngle – 開始角度（度単位、既定値：0）
• EndAngle – 終了角度（度単位、既定値：360）

アニメーション

• EnableAnimation – 表示アニメーションの有効／無効を切り替えます
• AnimationType – FadeIn または Rotation
• AnimationDuration – アニメーション時間（ミリ秒）

ビヘイビア

• SunburstToolTipBehavior – ツールチップの設定
• SunburstSelectionBehavior – 選択操作
• SunburstZoomingBehavior – ドリルダウン／ズーム

よくあるユースケース

ユースケース 1：組織階層の可視化

シナリオ： 地域、部門、チーム、役職ごとに会社の組織構造を表示します。

解決策：

• 4 階層（地域 → 部門 → チーム → 役職）
• ValueMemberPath = "EmployeeCount"
• 選択を有効にして部門を強調表示します
• 従業員数を表示するツールチップを追加します

ユースケース 2：ファイルシステムエクスプローラー

シナリオ： フォルダー階層ごとにディスク使用量を可視化します。

解決策：

• 3～5 階層（ドライブ → フォルダー → サブフォルダー → ファイル）
• ValueMemberPath = "SizeInBytes"
• ズームを有効にしてドリルダウンで移動できるようにします
• 色の濃さでサイズを示すカスタムパレットを使用します

ユースケース 3：売上ダッシュボード

シナリオ： 地域、カテゴリ、製品、SKU ごとに売上を表示します。

解決策：

• 4 階層（地域 → カテゴリ → 製品 → SKU）
• ValueMemberPath = "SalesAmount"
• ToggleSegmentVisibility を使用したインタラクティブな凡例
• 売上額を表示するカスタムデータラベル

ユースケース 4：予算配分ビューアー

シナリオ： 部門やプロジェクトごとの予算配分を表示します。

解決策：

• 3 階層（部門 → プロジェクト → フェーズ）
• ValueMemberPath = "BudgetAmount"
• 予算カテゴリに合わせたカスタムカラーパレット
• カスタムブラシによる選択箇所の強調表示

ユースケース 5：ウェブサイト分析の階層

シナリオ： 国、ページカテゴリ、ページごとにウェブサイトのトラフィックを表示します。

解決策：

• 3 階層（国 → カテゴリ → ページ）
• ValueMemberPath = "PageViews"
• 表示アニメーション（FadeIn）
• 追加の指標（直帰率、ページ滞在時間）を含むツールチップ

ベストプラクティス

1. データ構造： データモデルに各階層レベル用の個別のプロパティと、ValueMemberPath 用の数値プロパティがあることを確認します。

2. 階層数： 読みやすさを最適に保つため、階層数は 3～5 に制限します。階層が多すぎると、外側のリングが混み合います。

3. 値の一貫性： ValueMemberPath が、サイズ／件数／金額を表す正の数値を参照していることを確認します。

4. ラベルの読みやすさ： LabelOverflowMode="Trim" または "Hide" を使用して、小さなセグメントでラベルが混み合わないようにします。

5. インタラクティブ機能： 最適なユーザーエクスペリエンスを実現するため、ツールチップと選択を組み合わせます。階層が深い場合はズームを追加します。

6. パフォーマンス： 大規模なデータセット（1000 件以上の項目）では、データの集計や表示する階層数の制限を検討します。

7. 色の一貫性： 一貫性を保つには定義済みのパレットを使用するか、アプリケーションのテーマに合わせてカスタムパレットを作成します。

8. MVVM パターン： 動的なデータ更新を実現するため、ViewModel に INotifyPropertyChanged を実装します。

トラブルシューティング

チャートが表示されない場合：

• ItemsSource のバインディングが正しいことを確認してください
• ValueMemberPath が数値プロパティと一致していることを確認してください
• 少なくとも 1 つの SunburstHierarchicalLevel が定義されていることを確認してください
• データコレクションが空でないことを確認してください

セグメントのサイズが正しくない場合：

• ValueMemberPath が数値プロパティを指していることを確認してください
• データに null 値や負の値がないか確認してください
• プロパティ名が完全に一致していることを確認してください（大文字と小文字は区別されます）

ラベルが重なっている場合：

• LabelOverflowMode="Hide" または "Trim" を設定してください
• DataLabelInfo の FontSize を小さくしてください
• 小さいセグメントのラベルを非表示にすることを検討してください

凡例が表示されない場合：

• Legend プロパティが設定されていること（null ではないこと）を確認してください
• DockPosition が有効であることを確認してください
• データに第 1 階層のカテゴリが存在することを確認してください