syncfusion-winui-pyramid-chart

Syncfusion WinUI ピラミッドチャートの実装

Syncfusion WinUI ピラミッドチャート（SfPyramidChart）は、階層内の合計に対する割合を視覚化するための専用コントロールです。データをピラミッド構造で表示し、各セグメントがデータポイントを表すため、階層関係や割合の比較を示すのに適しています。

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

次のような場合にこのスキルを使用します。

• ピラミッド形式のビジュアルを作成する - 階層データや割合データをピラミッド構造で表示する
• WinUI ピラミッドチャートを設定する - SfPyramidChart コントロールをインストール、構成、初期化する
• ピラミッドチャートにデータをバインドする - データバインディングのために ItemsSource、XBindingPath、YBindingPath を構成する
• 外観をカスタマイズする - ピラミッドのセグメントに色、パレット、グラデーション、またはカスタムスタイルを適用する
• インタラクティブ機能を追加する - ツールチップ、選択、またはセグメントの分離を有効にして、ユーザーが操作できるようにする
• 凡例を構成する - アイコン、タイトル、配置を指定してチャートの凡例を追加、カスタマイズする
• データラベルを表示する - ピラミッドのセグメントに値やラベルを表示する
• 高度なカスタマイズを行う - タイトル、セグメント間隔、レンダリングモード、テンプレートを構成する

コンポーネントの概要

SfPyramidChart コントロールには、次の機能があります。

• 階層データの視覚化 - 割合データをピラミッド形状で表示する
• 豊富なデータバインディング - XAML とコードビハインドによるデータバインディングをサポートする
• インタラクティブ機能 - ツールチップ、選択、セグメントの分離
• 幅広いカスタマイズ - パレット、グラデーション、テンプレート、スタイル
• 凡例のサポート - 配置オプションを複数備えた、構成可能な凡例
• アクセシビリティ - キーボードナビゲーションとスクリーンリーダーを標準でサポートする

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

はじめに

📄 参照先: references/getting-started.md

次のような場合に参照してください。

• インストールと NuGet パッケージの設定（Syncfusion.Chart.WinUI）
• 名前空間のインポート（Syncfusion.UI.Xaml.Charts）
• XAML または C# での基本的な SfPyramidChart の初期化
• ビューモデルとデータバインディングパターンの作成
• ItemsSource、XBindingPath、YBindingPath を使用した動作する完全なサンプル
• 最初のピラミッドチャートの実装

外観とスタイル

📄 参照先: references/appearance.md

次のような場合に参照してください。

• 定義済みのパレットブラシ
• カスタム PaletteBrushes の構成
• セグメントへの線形または放射状グラデーションの適用
• 色のカスタマイズとビジュアルスタイルの設定
• 魅力的な配色の作成

凡例の構成

📄 参照先: references/legend.md

次のような場合に参照してください。

• ChartLegend の有効化と配置
• 凡例のタイトルの追加（Header プロパティ）
• 凡例アイコンのカスタマイズ（サイズ、表示状態）
• 項目の間隔とレイアウトの構成
• 凡例項目へのチェックボックスの追加
• 系列の表示状態を切り替える機能の実装
• 凡例の背景と境界線のカスタマイズ
• カスタム凡例テンプレートの作成

データラベル

📄 参照先: references/data-labels.md

次のような場合に参照してください。

• ピラミッドのセグメントでのデータラベルの有効化
• ラベルの配置と書式設定
• カスタムラベルテンプレートの作成
• ラベルを適切に配置する方法
• ラベルの表示状態とスタイルの設定

ツールチップ

📄 参照先: references/tooltip.md

次のような場合に参照してください。

• ツールチップの有効化（EnableTooltip プロパティ）
• ツールチップの外観のカスタマイズ
• カスタムツールチップテンプレートの作成
• ツールチップの内容の書式設定
• インタラクティブなツールチップの動作

選択

📄 参照先: references/selection.md

次のような場合に参照してください。

• セグメント選択の有効化
• 選択モードの構成
• 選択イベントの処理
• 選択したセグメントへの視覚的なフィードバック
• 複数選択のシナリオ

セグメントの展開

📄 参照先： references/exploding-segments.md

以下が必要な場合：

• タッチ／クリック時のセグメントの展開
• プログラムによるセグメントの展開
• ExplodeIndex プロパティの設定
• 展開距離を指定する ExplodeRadius の設定
• 展開したセグメントのアニメーションと視覚効果

高度な機能

📄 参照先： references/advanced-features.md

以下が必要な場合：

• チャートのタイトルとヘッダーの追加
• セグメント間隔（GapRatio）の設定
• 描画モードの設定
• ピラミッドの高さとモードのプロパティの調整
• パフォーマンスの最適化
• 高度なカスタマイズのシナリオ

クイックスタートの例

基本的なピラミッドチャートの実装

XAML：

<Window
    x:Class="PyramidChartApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:chart="using:Syncfusion.UI.Xaml.Charts"
    xmlns:local="using:PyramidChartApp">
    
    <chart:SfPyramidChart x:Name="chart"
                          Header="Food Nutrition Pyramid"
                          ItemsSource="{Binding Data}"
                          XBindingPath="FoodName"
                          YBindingPath="Calories"
                          EnableTooltip="True"
                          ShowDataLabels="True">
        
        <chart:SfPyramidChart.DataContext>
            <local:ChartViewModel/>
        </chart:SfPyramidChart.DataContext>
        
        <chart:SfPyramidChart.Legend>
            <chart:ChartLegend/>
        </chart:SfPyramidChart.Legend>
        
    </chart:SfPyramidChart>
</Window>

ビューモデル（C#）：

public class Model
{
    public string FoodName { get; set; }
    public double Calories { get; set; }
}

public class ChartViewModel
{
    public List<Model> Data { get; set; }
    
    public ChartViewModel()
    {
        Data = new List<Model>()
        {
            new Model { FoodName = "Sweet treats", Calories = 250 },
            new Model { FoodName = "Cheese", Calories = 402 },
            new Model { FoodName = "Vegetables", Calories = 65 },
            new Model { FoodName = "Fish", Calories = 206 },
            new Model { FoodName = "Fruits", Calories = 52 },
            new Model { FoodName = "Rice", Calories = 130 }
        };
    }
}

コードビハインド（C#）：

using Syncfusion.UI.Xaml.Charts;
using Microsoft.UI.Xaml;

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
        
        // Alternative: Create chart programmatically
        SfPyramidChart chart = new SfPyramidChart();
        ChartViewModel viewModel = new ChartViewModel();
        chart.DataContext = viewModel;
        chart.SetBinding(SfPyramidChart.ItemsSourceProperty, 
            new Binding() { Path = new PropertyPath("Data") });
        chart.XBindingPath = "FoodName";
        chart.YBindingPath = "Calories";
        chart.Header = "Food Nutrition Pyramid";
        chart.Legend = new ChartLegend();
        chart.EnableTooltip = true;
        chart.ShowDataLabels = true;
        
        this.Content = chart;
    }
}

よく使われるパターン

パターン 1：カスタムカラーパレット

<Grid>
    <Grid.Resources>
        <BrushCollection x:Key="customColors">
            <SolidColorBrush Color="#4dd0e1"/>
            <SolidColorBrush Color="#26c6da"/>
            <SolidColorBrush Color="#00bcd4"/>
            <SolidColorBrush Color="#00acc1"/>
            <SolidColorBrush Color="#0097a7"/>
        </BrushCollection>
    </Grid.Resources>
    
    <chart:SfPyramidChart Palette="Custom"
                          PaletteBrushes="{StaticResource customColors}"
                          ItemsSource="{Binding Data}"
                          XBindingPath="Category"
                          YBindingPath="Value"/>
</Grid>

パターン 2：選択機能付きのインタラクティブなピラミッド

<chart:SfPyramidChart ItemsSource="{Binding Data}"
                      XBindingPath="Category"
                      YBindingPath="Value"
                      SelectionBehavior="SelectSingle">
    
    <chart:SfPyramidChart.SelectionBrush>
        <SolidColorBrush Color="#FF6B6B"/>
    </chart:SfPyramidChart.SelectionBrush>
    
</chart:SfPyramidChart>

パターン 3：クリック時にセグメントを展開

<chart:SfPyramidChart ItemsSource="{Binding Data}"
                      XBindingPath="Category"
                      YBindingPath="Value"
                      ExplodeOnClick="True"
                      ExplodeRadius="10"/>

パターン 4：グラデーションスタイルのピラミッド

<Grid>
    <Grid.Resources>
        <BrushCollection x:Key="gradientColors">
            <LinearGradientBrush>
                <GradientStop Offset="1" Color="#FFE7C7"/>
                <GradientStop Offset="0" Color="#FCB69F"/>
            </LinearGradientBrush>
            <LinearGradientBrush>
                <GradientStop Offset="1" Color="#fadd7d"/>
                <GradientStop Offset="0" Color="#fccc2d"/>
            </LinearGradientBrush>
        </BrushCollection>
    </Grid.Resources>
    
    <chart:SfPyramidChart Palette="Custom"
                          PaletteBrushes="{StaticResource gradientColors}"
                          ItemsSource="{Binding Data}"
                          XBindingPath="Category"
                          YBindingPath="Value"/>
</Grid>

主なプロパティ

プロパティ	型	説明
ItemsSource	object	ピラミッドチャートのデータソース
XBindingPath	string	X 軸データ（ラベル）のプロパティパス
YBindingPath	string	Y 軸データ（値）のプロパティパス
Header	object	チャートのタイトルまたはヘッダーのコンテンツ
Legend	ChartLegend	凡例の設定オブジェクト
EnableTooltip	bool	ホバー時のツールチップの有効化／無効化
ShowDataLabels	bool	セグメント上のデータラベルの表示／非表示
Palette	ChartColorPalette	定義済みのカラーパレット
PaletteBrushes	IList	カスタムカラーのコレクション
ExplodeOnClick	bool	クリック時のセグメント展開の有効化
ExplodeIndex	int	展開するセグメントのインデックス
ExplodeRadius	double	展開するセグメントの距離
GapRatio	double	セグメント間の間隔（0-1）
SelectionBehavior	SelectionBehavior	選択モードの設定

よくあるユースケース

1. 食品・栄養ピラミッド - 食品群や栄養の階層構造を表示します
2. セールスファネル - 見込み客からコンバージョンまでの営業プロセスの段階を可視化します
3. 人口統計 - 年齢または人口統計の分布を表示します
4. 市場セグメンテーション - 市場シェアや顧客セグメントを表示します
5. コストの内訳 - 経費のカテゴリを階層順に可視化します
6. 優先度分析 - タスクまたは課題の優先度を降順で表示します
7. リソース配分 - カテゴリごとのリソース配分を表示します

関連スキル

• Syncfusion WinUI コンポーネントの実装 - WinUI コンポーネントのメインライブラリ
• その他のチャートタイプについては、データ可視化カテゴリをご覧ください

---

次のステップ： 特定のニーズに応じて、該当する参照ファイルをお読みください。初期設定については getting-started.md から始めるか、目的の実装に合わせて機能別ガイドを直接ご覧ください。