syncfusion-winui-circular-charts

Syncfusion WinUI Circular Charts の実装

このスキルでは、比例データを円グラフやドーナツグラフで可視化するために、Syncfusion WinUI Circular Charts（SfCircularChart）を実装する方法を説明します。このコンポーネントには、凡例、データラベル、ツールチップ、選択、セグメントの切り出しなど、豊富なインタラクティブ機能が用意されています。

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

次のようなニーズがある場合に、このスキルを使用します。

• WinUI アプリケーションで円グラフやドーナツグラフを作成する
• 比例データまたはパーセンテージデータを視覚的に表示する
• 円形のデータ可視化（市場シェア、予算の内訳、アンケート結果など）を実装する
• 円グラフにインタラクティブ機能（ツールチップ、選択、セグメントの切り出し）を追加する
• 円グラフのデータラベル、凡例、ツールチップを設定する
• パレット、グラデーション、カスタムカラーを使って外観をカスタマイズする
• 半円または四半円のグラフを作成する
• 複合グラフ（同じグラフ内に円グラフとドーナツグラフ）を作成する
• ユーザー操作（セグメントの選択、タップによる切り出し）に対応する

コンポーネントの概要

Syncfusion SfCircularChart は、WinUI 向けの強力なデータ可視化コンポーネントで、データを円形の形式で表示します。次の機能をサポートしています。

• 2 種類のグラフタイプ： 円グラフ系列とドーナツ系列
• 豊富な視覚要素： 凡例、データラベル、ツールチップ、ヘッダー
• ユーザー操作： 選択、セグメントの切り出し、表示の切り替え
• 複数の系列： 複数の円グラフまたはドーナツ系列を同時に表示
• 動的な更新： リアルタイムのデータバインディングと更新
• 幅広いカスタマイズ： パレット、グラデーション、テンプレート、スタイル設定

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

はじめに

📄 参照： references/getting-started.md

ユーザーに次のニーズがある場合は、このリファレンスを参照してください。

• Syncfusion.Chart.WinUI NuGet パッケージをインストールする
• XAML または C# で基本的な円グラフをセットアップする
• データモデルを含む ViewModel を作成する
• グラフの系列にデータをバインドする
• 初期セットアップと設定の全体像を把握する
• 動作する最小限のサンプルを確認する

グラフの種類

円グラフ

📄 参照： references/pie-charts.md

ユーザーに次のニーズがある場合は、このリファレンスを参照してください。

• PieSeries を作成して設定する
• 円グラフの半径を調整する
• 小さなデータポイントを「その他」カテゴリにまとめる（GroupTo、GroupMode）
• 半円または四半円のグラフを作成する（StartAngle、EndAngle）
• 複合グラフ（円グラフとドーナツグラフの組み合わせ）を実装する
• 円グラフ固有の機能と設定を把握する

ドーナツグラフ

📄 参照： references/doughnut-charts.md

ユーザーに次のニーズがある場合は、このリファレンスを参照してください。

• DoughnutSeries を作成して設定する
• 内側の半径を設定する（InnerRadius プロパティ）
• 1 つのグラフに複数のドーナツ系列を表示する
• 半ドーナツまたは四半ドーナツの形状を作成する
• 円グラフ系列とドーナツ系列の違いを把握する
• ドーナツグラフのサイズと位置を設定する

視覚要素

凡例

📄 参照： references/legend.md

ユーザーに次のニーズがある場合は、このリファレンスを参照してください。

• グラフの凡例を有効にして設定する
• 凡例のタイトルまたはヘッダーを追加する
• 凡例アイコン（種類、サイズ、テンプレート）をカスタマイズする
• 凡例の配置（左、右、上、下）を調整する
• セグメントの表示を切り替えるチェックボックスを追加する
• 凡例の外観（背景、境界線、間隔）をカスタマイズする
• カスタムの凡例項目テンプレートを作成する
• 凡例項目の余白と配置を調整する

データラベル

📄 参照： references/data-labels.md

ユーザーに次のニーズがある場合は、このリファレンスを参照してください。

• セグメントにデータラベルを表示する
• ラベルのコンテキスト（Percentage、YValue、DataLabelItem）を設定する
• ラベルの外観（フォント、色、境界線）をカスタマイズする
• ラベルの位置（Inside、Outside、OutsideExtended）を設定する
• ラベルとセグメントを結ぶコネクター線を追加する
• コネクター線のスタイルと種類（Line、Bezier、StraightLine）をカスタマイズする
• データラベルを回転する
• カスタムのデータラベルテンプレートを作成する
• 系列のパレットをラベルに適用する

ツールチップ

📄 参照: references/tooltips.md

次の内容が必要な場合は、このリファレンスを確認してください。

• セグメントにカーソルを合わせたときにツールチップを有効にする
• ツールチップの動作（表示時間、アニメーション、遅延）を設定する
• ツールチップのスタイル（背景、境界線）をカスタマイズする
• ツールチップのラベルのスタイル（フォント、色）を設定する
• ツールチップの位置（配置、オフセット）を設定する
• カスタムツールチップテンプレートを作成する
• ツールチップの表示設定を制御する

タイトルとヘッダー

📄 参照: references/title-header.md

次の内容が必要な場合は、このリファレンスを確認してください。

• チャートにタイトルまたはヘッダーを追加する
• カスタムの UIElements をチャートヘッダーとして使用する
• チャートヘッダーを配置する（左、中央、右）
• チャートタイトルのスタイルと書式を設定する
• 枠線付きまたは装飾付きのヘッダーを作成する

ユーザー操作

選択

📄 参照: references/selection.md

次の内容が必要な場合は、このリファレンスを確認してください。

• セグメントの選択動作を有効にする
• 単一選択または複数選択のモードを設定する
• 選択時の外観（SelectionBrush）をカスタマイズする
• プログラムからセグメントを選択する（SelectedIndex、SelectedIndexes）
• 選択イベント（SelectionChanging、SelectionChanged）を処理する
• 選択解除の動作を実装する
• 選択タイプ（Single、SingleDeselect、Multiple、None）を制御する

セグメントの分離

📄 参照: references/explode-segments.md

次の内容が必要な場合は、このリファレンスを確認してください。

• 特定のセグメントを分離して強調表示する
• 分離距離を設定するための分離半径を設定する
• すべてのセグメントを同時に分離する
• タップして分離する操作を有効にする
• 分離したセグメントをプログラムから制御する
• セグメントの分離を使用する場面を理解する

カスタマイズ

外観

📄 参照: references/appearance.md

次の内容が必要な場合は、このリファレンスを確認してください。

• 定義済みのパレットブラシを適用する
• カスタムカラーパレット（PaletteBrushes）を作成する
• セグメントにグラデーション（LinearGradientBrush、RadialGradientBrush）を適用する
• セグメントの色とスタイルをカスタマイズする
• 外観のカスタマイズパターンを理解する

クイックスタートの例

基本的な円グラフを作成する最小限の例を示します。

1. NuGet パッケージをインストールする：

Install-Package Syncfusion.Chart.WinUI

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

public class Sales
{
    public string Product { get; set; }
    public double SalesRate { get; set; }
}

public class ChartViewModel
{
    public List<Sales> Data { get; set; }

    public ChartViewModel()
    {
        Data = new List<Sales>()
        {
            new Sales() { Product = "iPad", SalesRate = 25 },
            new Sales() { Product = "iPhone", SalesRate = 35 },
            new Sales() { Product = "MacBook", SalesRate = 15 },
            new Sales() { Product = "Mac", SalesRate = 5 },
            new Sales() { Product = "Others", SalesRate = 10 }
        };
    }
}

3. XAML で円形チャートを作成する：

<Window
    xmlns:chart="using:Syncfusion.UI.Xaml.Charts"
    xmlns:model="using:YourNamespace.ViewModel">

    <chart:SfCircularChart Header="Product Sales">
        
        <chart:SfCircularChart.DataContext>
            <model:ChartViewModel/>
        </chart:SfCircularChart.DataContext>
        
        
        <chart:SfCircularChart.Legend>
            <chart:ChartLegend/>
        </chart:SfCircularChart.Legend>
        
        
        <chart:SfCircularChart.Series>
            <chart:PieSeries ItemsSource="{Binding Data}"
                           XBindingPath="Product"
                           YBindingPath="SalesRate"
                           ShowDataLabels="True"
                           EnableTooltip="True"/>
        </chart:SfCircularChart.Series>
    </chart:SfCircularChart>
</Window>

4. または、C# で作成する：

SfCircularChart chart = new SfCircularChart();
chart.Header = "Product Sales";
chart.DataContext = new ChartViewModel();
chart.Legend = new ChartLegend();

PieSeries series = new PieSeries();
series.SetBinding(PieSeries.ItemsSourceProperty, new Binding() { Path = new PropertyPath("Data") });
series.XBindingPath = "Product";
series.YBindingPath = "SalesRate";
series.ShowDataLabels = true;
series.EnableTooltip = true;

chart.Series.Add(series);
this.Content = chart;

よく使われるパターン

パターン 1：データラベルと凡例付きの円グラフ

<chart:SfCircularChart Header="Sales Distribution">
    <chart:SfCircularChart.Legend>
        <chart:ChartLegend/>
    </chart:SfCircularChart.Legend>
    
    <chart:SfCircularChart.Series>
        <chart:PieSeries ItemsSource="{Binding Data}"
                       XBindingPath="Category"
                       YBindingPath="Value"
                       ShowDataLabels="True">
            <chart:PieSeries.DataLabelSettings>
                <chart:CircularDataLabelSettings Context="Percentage"
                                               Position="Outside"
                                               ShowConnectorLine="True"/>
            </chart:PieSeries.DataLabelSettings>
        </chart:PieSeries>
    </chart:SfCircularChart.Series>
</chart:SfCircularChart>

パターン 2：カスタムカラーのドーナツチャート

<chart:SfCircularChart>
    <chart:SfCircularChart.Resources>
        <BrushCollection x:Key="customBrushes">
            <SolidColorBrush Color="#4dd0e1"/>
            <SolidColorBrush Color="#26c6da"/>
            <SolidColorBrush Color="#00bcd4"/>
        </BrushCollection>
    </chart:SfCircularChart.Resources>
    
    <chart:SfCircularChart.Series>
        <chart:DoughnutSeries ItemsSource="{Binding Data}"
                            XBindingPath="Name"
                            YBindingPath="Amount"
                            InnerRadius="0.6"
                            PaletteBrushes="{StaticResource customBrushes}"/>
    </chart:SfCircularChart.Series>
</chart:SfCircularChart>

パターン 3：選択と分離に対応したインタラクティブなチャート

<chart:SfCircularChart>
    <chart:SfCircularChart.Series>
        <chart:PieSeries ItemsSource="{Binding Data}"
                       XBindingPath="Product"
                       YBindingPath="Sales"
                       ExplodeOnTap="True"
                       ExplodeRadius="10">
            <chart:PieSeries.SelectionBehavior>
                <chart:DataPointSelectionBehavior SelectionBrush="Orange"
                                                Type="Single"/>
            </chart:PieSeries.SelectionBehavior>
        </chart:PieSeries>
    </chart:SfCircularChart.Series>
</chart:SfCircularChart>

パターン 4：半円形チャート

<chart:SfCircularChart>
    <chart:SfCircularChart.Series>
        <chart:PieSeries ItemsSource="{Binding Data}"
                       XBindingPath="Category"
                       YBindingPath="Value"
                       StartAngle="180"
                       EndAngle="360"
                       ShowDataLabels="True"/>
    </chart:SfCircularChart.Series>
</chart:SfCircularChart>

主なプロパティ

SfCircularChart のプロパティ

• Header - チャートのタイトル／ヘッダーを設定します
• Legend - チャートの凡例を設定します
• Series - 円形系列（PieSeries、DoughnutSeries）のコレクションです
• TooltipBehavior - ツールチップの表示動作を設定します

系列のプロパティ（PieSeries/DoughnutSeries）

• ItemsSource - 系列のデータソースです
• XBindingPath - カテゴリ／ラベル値のプロパティパスです
• YBindingPath - 数値のプロパティパスです
• ShowDataLabels - セグメント上のデータラベルを有効にします
• EnableTooltip - カーソルを合わせたときにツールチップを有効にします
• PaletteBrushes - セグメントのカスタムカラーです
• Radius - 円グラフ／ドーナツチャートのサイズ（0～1）です
• InnerRadius - ドーナツチャートの内側の穴のサイズ（0～1）です
• StartAngle - 描画の開始角度（0～360）です
• EndAngle - 描画の終了角度（0～360）です
• ExplodeIndex - 分離するセグメントのインデックスです
• ExplodeAll - すべてのセグメントを分離します
• ExplodeRadius - 分離したセグメントの距離です
• ExplodeOnTap - タップして分離する操作を有効にします
• GroupTo - 小さなセグメントをグループ化するしきい値です
• GroupMode - グループ化モード（Value、Percentage、Angle）です
• SelectionBehavior - セグメントの選択動作を設定します
• DataLabelSettings - データラベルの外観を設定します
• LegendIcon - 凡例項目のアイコンタイプです

よくあるユースケース

円グラフを使用する場面

• 全体に占める割合を示す場合（市場シェア、予算配分）
• パーセンテージの分布を表示する場合（アンケート結果、人口統計）
• カテゴリが5～7個のシンプルな比較
• 正確な値よりも比率が重要な場合
• 単一のデータ系列を可視化する場合

ドーナツグラフを使用する場面

• 円グラフと同様ですが、ラベルを配置しやすく（中央を利用できます）
• 比較のために複数の同心円状の系列を表示する場合
• 中央にコンテンツ（合計、要約）を表示したい場合
• よりモダンな見た目を好む場合
• カテゴリ数の多い密度の高いデータに適しています

セグメントを分離して表示する場面

• 特定のデータポイント（最高のパフォーマンス、注目領域）を強調する場合
• 重要なセグメントに注目を集める場合
• プレゼンテーションで視覚的な強調を加える場合
• インタラクティブな探索（タップして分離表示）

選択を使用する場面

• ユーザーがデータをフィルターまたはドリルダウンできるようにする場合
• セグメントの選択によって別のビューが切り替わるインタラクティブなダッシュボード
• 比較シナリオ（複数のセグメントを選択）
• データ探索インターフェース

関連コンポーネント

• 直交座標系のグラフ - 時系列、傾向、比較（棒グラフ、折れ線グラフ、縦棒グラフ）に使用します
• ファネル／ピラミッドグラフ - 階層型または段階型のデータに使用します
• ゲージグラフ - 範囲を伴う単一値の指標に使用します

ヒントとベストプラクティス

1. 読みやすさを保つため、セグメントは5～7個に制限します。小さな値にはGroupToを使用します
2. 正確な値にはデータラベルを、カテゴリ名には凡例を使用します
3. インタラクティブな探索のため、ツールチップを有効にします
4. 複数の系列や中央のコンテンツには、ドーナツグラフを検討します
5. 選択は控えめに使用し、強調する場合にのみ分離表示します
6. セグメントを見分けやすくするため、コントラストの高い色を選びます
7. レスポンシブ対応をテストします。円形グラフはさまざまなサイズに適応しやすいです