syncfusion-winui-polar-charts

WinUI での極座標グラフの実装

Windows App SDK アプリケーションで Syncfusion® WinUI 極座標グラフ（SfPolarChart）コントロールを実装するための包括的なガイドです。極座標グラフは値と角度でデータを可視化するため、複数の次元を比較したり、方向データを表示したりするのに最適です。

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

次のようなニーズがある場合に、このスキルを使用してください。

• 極座標グラフを作成する（レーダーグラフ、スパイダーグラフ、ウェブグラフ、スターグラフ、コブウェブグラフとも呼ばれます）
• 多次元データを可視化する（中心点の周囲に複数のカテゴリを配置します）
• 同じ放射状のスケールで複数のデータ系列を比較する
• 方向データを表示する（コンパスデータ、風向、植物の分布）
• 周期的なパターンや季節変動を示す
• 極座標で線系列または面系列を実装する
• グリッド線の種類をカスタマイズする（円形または多角形／レーダー形式）
• 軸の種類を設定する（Category、Numerical、DateTime、Logarithmic）
• 極座標グラフに凡例、データラベル、タイトルを追加する
• 極座標の可視化にカスタムスタイルやテーマを適用する

コンポーネントの概要

コントロール： SfPolarChart
名前空間： Syncfusion.UI.Xaml.Charts
パッケージ： Syncfusion.Chart.WinUI
プラットフォーム： WinUI 3（Windows App SDK）

主な機能

• ✓ 2 種類の系列： PolarLineSeries と PolarAreaSeries
• ✓ 複数系列のサポート： 同じグラフ上で異なるデータセットを比較できます
• ✓ グリッド線の種類： Circle（デフォルト）または Polygon（レーダー／スパイダー形式）
• ✓ 4 種類の軸： Category、Numerical、DateTime、Logarithmic
• ✓ 豊富なカスタマイズ： 凡例、データラベル、タイトル、外観
• ✓ インタラクティブ機能： 系列の表示切り替え、チェックボックス付き凡例
• ✓ 開始角度の制御： グラフを回転して異なる開始位置に設定できます（0°、90°、180°、270°）
• ✓ パスの閉じる／開く： 系列を閉じたループにするかどうかを制御できます
• ✓ MVVM に対応： 完全なデータバインディングをサポートします

一般的な使用例

• ビジネス分析： 市場分析、競合比較
• 科学的な可視化： 実験結果、多パラメーター分析
• 気象データ： 風のパターン、方向別の降水量
• 品質指標： 複数の次元にわたるパフォーマンス
• スポーツ分析： 複数のスキルにわたる選手の統計
• アンケート結果： カテゴリ別の意見データ

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

はじめに

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

• インストールと NuGet パッケージのセットアップ（Syncfusion.Chart.WinUI）
• XAML と C# による基本的な極座標グラフの実装
• データモデルとビューモデルの作成
• 系列へのデータのバインド（ItemsSource、XBindingPath、YBindingPath）
• 主軸と副軸の設定
• ゼロから作成する、完全に動作するサンプル

系列の種類

📄 参照先： references/series-types.md

• PolarLineSeries： 線形式の極座標系列
• PolarAreaSeries： 塗りつぶし面形式の極座標系列
• グリッド線の種類： Circle と Polygon（レーダー／スパイダーグラフ）の違い
• パスの閉じ方： IsClosed プロパティで系列を開閉します
• 複数系列： 複数のデータセットをまとめて表示します
• 系列のカスタマイズとスタイリング

軸の設定

📄 参照先： references/axis-configuration.md

• CategoryAxis： カテゴリデータ用のインデックスベースの軸
• NumericalAxis： 範囲をカスタマイズできる数値軸
• DateTimeAxis： 時間ベースのデータをプロットする軸
• LogarithmicAxis： 広い値域に対応する対数スケールの軸
• 軸の範囲のカスタマイズ（Minimum、Maximum、Interval）
• 軸イベント（ActualRangeChanged、LabelCreated）

軸のカスタマイズ

📄 参照先： references/axis-customization.md

• 軸ラベル： 回転、書式設定、カスタムテンプレート
• 軸タイトル／ヘッダー： 軸ヘッダーの追加とスタイリング
• ラベルスタイルのカスタマイズ（フォント、色、余白）
• 高度なカスタマイズのためのヘッダーテンプレート
• さまざまなデータ型に対応するラベル書式文字列

タイトルと凡例

📄 参照： references/title-legend.md

• チャートタイトル： ヘッダーのプロパティとカスタマイズ
• タイトルの配置（左、中央、右）
• 凡例の設定： アイコン、間隔、配置
• 系列の切り替えに使うチェックボックス付き凡例
• 系列の表示／非表示をインタラクティブに切り替える
• 凡例のテンプレートと背景のスタイル設定

データラベル

📄 参照： references/data-labels.md

• データラベルを有効にする（ShowDataLabels プロパティ）
• ラベルのコンテキスト（YValue、XValue、Percentage）
• カスタマイズ（フォント、色、境界線、余白）
• 高度なレイアウトに対応するデータラベルテンプレート
• 書式文字列と回転
• 色を調整するための UseSeriesPalette
• ラベルとデータポイントを結ぶコネクター線

外観とスタイル設定

📄 参照： references/appearance.md

• 既定のパレットブラシ
• カスタムパレットブラシ： 独自の配色を定義します
• グラデーションのサポート： LinearGradientBrush と RadialGradientBrush
• チャート全体または個々の系列へのグラデーションの適用
• 系列の Fill プロパティのカスタマイズ
• テーマとの統合

開始角度と配置

📄 参照： references/start-angle.md

• StartAngle プロパティ（Rotate0、Rotate90、Rotate180、Rotate270）
• チャートの描画位置の変更
• 開始角度ごとのユースケース
• 特定の向きに合わせたチャートの配置

トラブルシューティング

📄 参照： references/troubleshooting.md

• よくあるセットアップとインストールの問題
• データバインディングの問題と解決策
• 描画と表示に関する問題
• パフォーマンス最適化のヒント
• ベストプラクティスと FAQ

クイックスタートの例

極座標面積チャートを作成する最小限の動作例を紹介します。

1. データモデル

public class PlantData
{
    public string Direction { get; set; }
    public double Tree { get; set; }
}

2. ビューモデル

using System.Collections.ObjectModel;

public class ChartViewModel
{
    public ObservableCollection<PlantData> PlantDetails { get; set; }

    public ChartViewModel()
    {
        PlantDetails = new ObservableCollection<PlantData>()
        {
            new PlantData { Direction = "North", Tree = 80 },
            new PlantData { Direction = "NorthEast", Tree = 87 },
            new PlantData { Direction = "East", Tree = 78 },
            new PlantData { Direction = "SouthEast", Tree = 85 },
            new PlantData { Direction = "South", Tree = 81 },
            new PlantData { Direction = "SouthWest", Tree = 88 },
            new PlantData { Direction = "West", Tree = 80 },
            new PlantData { Direction = "NorthWest", Tree = 85 }
        };
    }
}

3. XAML の実装

<Window
    x:Class="PolarChartDemo.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:PolarChartDemo">

    <chart:SfPolarChart Header="Plant Distribution">
        
        
        <chart:SfPolarChart.DataContext>
            <local:ChartViewModel/>
        </chart:SfPolarChart.DataContext>
        
        
        <chart:SfPolarChart.PrimaryAxis>
            <chart:CategoryAxis/>
        </chart:SfPolarChart.PrimaryAxis>
        
        
        <chart:SfPolarChart.SecondaryAxis>
            <chart:NumericalAxis/>
        </chart:SfPolarChart.SecondaryAxis>
        
        
        <chart:SfPolarChart.Legend>
            <chart:ChartLegend/>
        </chart:SfPolarChart.Legend>
        
        
        <chart:SfPolarChart.Series>
            <chart:PolarAreaSeries ItemsSource="{Binding PlantDetails}"
                                   XBindingPath="Direction"
                                   YBindingPath="Tree"
                                   Label="Tree"
                                   ShowDataLabels="True"/>
        </chart:SfPolarChart.Series>
        
    </chart:SfPolarChart>

</Window>

4. C# コードビハインド（代替方法）

using Syncfusion.UI.Xaml.Charts;

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
        
        // Create chart
        SfPolarChart chart = new SfPolarChart();
        chart.Header = "Plant Distribution";
        
        // Set ViewModel
        ChartViewModel viewModel = new ChartViewModel();
        chart.DataContext = viewModel;
        
        // Configure axes
        chart.PrimaryAxis = new CategoryAxis();
        chart.SecondaryAxis = new NumericalAxis();
        
        // Add legend
        chart.Legend = new ChartLegend();
        
        // Create series
        PolarAreaSeries series = new PolarAreaSeries();
        series.XBindingPath = "Direction";
        series.YBindingPath = "Tree";
        series.Label = "Tree";
        series.ShowDataLabels = true;
        series.SetBinding(
            ChartSeriesBase.ItemsSourceProperty,
            new Binding() { Path = new PropertyPath("PlantDetails") });
        
        chart.Series.Add(series);
        
        // Add chart to window
        this.Content = chart;
    }
}

よく使われるパターン

パターン 1：レーダー／スパイダーチャート（多角形グリッド）

多角形のグリッド線を使って、標準的なレーダーチャートを作成します。

<chart:SfPolarChart GridLineType="Polygon">
    <chart:SfPolarChart.PrimaryAxis>
        <chart:CategoryAxis/>
    </chart:SfPolarChart.PrimaryAxis>
    <chart:SfPolarChart.SecondaryAxis>
        <chart:NumericalAxis/>
    </chart:SfPolarChart.SecondaryAxis>
    
    <chart:PolarLineSeries ItemsSource="{Binding Data}"
                           XBindingPath="Category"
                           YBindingPath="Value"
                           IsClosed="True"/>
</chart:SfPolarChart>

パターン 2：複数系列の比較

同じチャート上で複数のデータセットを比較します。

<chart:SfPolarChart Header="Multi-Series Comparison">
    <chart:SfPolarChart.Legend>
        <chart:ChartLegend/>
    </chart:SfPolarChart.Legend>
    
    <chart:SfPolarChart.Series>
        <chart:PolarLineSeries ItemsSource="{Binding SeriesA}"
                               XBindingPath="Category"
                               YBindingPath="Value"
                               Label="Product A"/>
        
        <chart:PolarLineSeries ItemsSource="{Binding SeriesB}"
                               XBindingPath="Category"
                               YBindingPath="Value"
                               Label="Product B"/>
        
        <chart:PolarLineSeries ItemsSource="{Binding SeriesC}"
                               XBindingPath="Category"
                               YBindingPath="Value"
                               Label="Product C"/>
    </chart:SfPolarChart.Series>
</chart:SfPolarChart>

パターン 3：スタイルを設定したデータラベル

外観をカスタマイズした書式付きデータラベルを追加します。

<chart:PolarAreaSeries ShowDataLabels="True">
    <chart:PolarAreaSeries.DataLabelSettings>
        <chart:PolarDataLabelSettings Context="YValue"
                                      Foreground="White"
                                      Background="#1E88E5"
                                      BorderBrush="White"
                                      BorderThickness="1"
                                      FontSize="12"
                                      FontFamily="Calibri"
                                      Format="#.0"/>
    </chart:PolarAreaSeries.DataLabelSettings>
</chart:PolarAreaSeries>

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

チャートにカスタムカラーを適用します。

<chart:SfPolarChart>
    <chart:SfPolarChart.Resources>
        <BrushCollection x:Key="customBrushes">
            <SolidColorBrush Color="#4dd0e1"/>
            <SolidColorBrush Color="#26c6da"/>
            <SolidColorBrush Color="#00bcd4"/>
        </BrushCollection>
    </chart:SfPolarChart.Resources>
    
    <chart:SfPolarChart PaletteBrushes="{StaticResource customBrushes}">
        
    </chart:SfPolarChart>
</chart:SfPolarChart>

主なプロパティ

SfPolarChart のプロパティ

プロパティ	型	説明
Header	object	チャートのタイトル／ヘッダー
PrimaryAxis	ChartAxis	角度軸（円周に沿った軸）
SecondaryAxis	ChartAxis	半径軸（中心から外側に向かう軸）
Series	ChartSeriesCollection	表示する系列のコレクション
Legend	ChartLegend	凡例の設定
GridLineType	PolarChartGridLineType	円または多角形
StartAngle	ChartPolarAngle	開始角度（0°、90°、180°、270°）
PaletteBrushes	IList	カスタムカラーパレット

PolarSeries のプロパティ

プロパティ	型	説明
ItemsSource	IEnumerable	系列のデータソース
XBindingPath	string	X 値（カテゴリ）のプロパティパス
YBindingPath	string	Y 値（数値）のプロパティパス
Label	string	凡例に表示する系列ラベル
ShowDataLabels	bool	データラベルの表示／非表示
IsClosed	bool	パスを閉じる（最後の点と最初の点を接続する）
Fill	Brush	系列の塗りつぶし色
Stroke	Brush	線系列の線の色
DataLabelSettings	PolarDataLabelSettings	データラベルの設定

軸のプロパティ

プロパティ	型	説明
Header	object	軸のタイトル
Minimum	double	軸の最小値
Maximum	double	軸の最大値
Interval	double	ラベル間の間隔
LabelRotation	double	ラベルの回転角度
LabelStyle	LabelStyle	ラベルの書式と外観

よくあるユースケース

ユースケース 1：市場分析ダッシュボード

シナリオ： 複数の指標で製品のパフォーマンスを比較します
実装： 多系列のポーラーチャートと多角形グリッド
参照： 複数系列については、references/series-types.md を参照してください

ユースケース 2：気象データの可視化

シナリオ： 風速・風向や降水パターンを表示します
実装： 方向カテゴリを使用したポーラーエリアチャート
参照： データバインディングについては、references/getting-started.md を参照してください

ユースケース 3：スキル評価

シナリオ： 従業員またはプレイヤーのスキルを複数の観点から可視化します
実装： スコアを示すデータラベル付きのレーダーチャート
参照： ラベルのカスタマイズについては、references/data-labels.md を参照してください

ユースケース 4：品質指標

シナリオ： 複数のテストパラメーターで製品の品質を示します
実装： カスタムの色分けを使用したポーラーラインチャート
参照： スタイル設定については、references/appearance.md を参照してください

ユースケース 5：科学データ

シナリオ： 対数スケールで実験結果をプロットします
実装： 対数軸を使用したポーラーチャート
参照： 軸の種類については、references/axis-configuration.md を参照してください

ベストプラクティス

1. 適切な系列の種類を選択します：

   • 傾向や比較には PolarLineSeries を使用します
   • 大きさや範囲を強調するには PolarAreaSeries を使用します

2. グリッド線の種類を選択します：

   • 連続データや滑らかな見た目には Circle を使用します
   • カテゴリデータや従来のレーダーチャートの見た目には Polygon を使用します

3. 軸を設定します：

   • 名前付きカテゴリ（方向、ラベル）には CategoryAxis を使用します
   • 放射軸の数値範囲には NumericalAxis を使用します
   • 読みやすさを確保できるよう、適切な Minimum、Maximum、Interval を設定します

4. データラベル：

   • 小規模から中規模のデータセット（20点未満）では有効にします
   • 位置を調整しやすくするため、回転や接続線を使用します
   • データの種類に応じて値を適切に書式設定します

5. 複数の系列：

   • 見やすさを保つため、系列は3～5個に制限します
   • 見分けやすい色と凡例を使用します
   • データが重なる場合は、ライン系列を検討します

6. パフォーマンス：

   • 動的データには ObservableCollection を使用します
   • 1つの系列に過剰なデータポイントを含めないようにします
   • 非常に大規模なデータセットには、データ仮想化を実装します

7. アクセシビリティ：

   • 意味のあるチャートタイトルと軸ラベルを用意します
   • コントラストの高い色を使用します
   • 系列を識別できるよう、凡例を含めます

関連コンポーネント

• 円形チャート： 円グラフ、ドーナツグラフ、放射状棒グラフに使用します
• 直交座標系チャート： 従来の X-Y 座標チャート（ライン、バー、カラム）に使用します
• ゲージ： 単一値の放射状インジケーターに使用します

リソース

• 公式ドキュメント
• API リファレンス - SfPolarChart
• GitHub サンプル
• ナレッジベース

---

次のステップ： 上記の特定のリファレンスドキュメントに移動し、WinUI アプリケーションにポーラーチャート機能を実装してください。