syncfusion-winui-cartesian-charts

Syncfusion WinUI Cartesian Charts の実装

Syncfusion WinUI Cartesian Chart（SfCartesianChart）は、高い対話性、柔軟性、パフォーマンスを備えた強力なデータ可視化手段です。複数の系列タイプ、豊富なカスタマイズオプション、ズーム、パン、ツールチップ、選択などの対話型機能をサポートしています。

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

ユーザーが次のことを必要としている場合に、このスキルを使用してください。

• WinUI アプリケーションであらゆるデカルトチャートを作成する（縦棒、折れ線、面、横棒、散布図、バブル、金融、積み上げチャート）
• チャートの軸を構成する（CategoryAxis、NumericalAxis、DateTimeAxis、LogarithmicAxis、複数の軸）
• 大規模なデータセットを扱う高性能なチャートを実装する（数百万のデータポイントを扱う高速系列）
• 対話型機能を追加する（ズーム、パン、ツールチップ、トラックボール、十字線、選択）
• チャートの外観をカスタマイズする（凡例、データラベル、色、テーマ、スタイル）
• 金融データを表示する（OHLC、ローソク足チャート）
• 同じチャート領域で複数のデータ系列を比較する
• データを探索するためのタッチおよびマウス操作に対応する

コンポーネントの概要

SfCartesianChart は、2 次元座標系を使用する WinUI アプリケーション向けの、Syncfusion の主要なチャートコントロールです。15 種類以上の系列タイプ（基本、特殊、積み上げ、高速）、4 種類の軸タイプ（Numerical、Category、DateTime、Logarithmic）をサポートし、最適化された高速系列で数百万のデータポイントを処理します。ズーム、パン、ツールチップ、トラックボール、十字線、および幅広いカスタマイズオプションが含まれています。

コアアーキテクチャ

SfCartesianChart
├── XAxes Collection (1+ horizontal axes)
├── YAxes Collection (1+ vertical axes)
├── Series Collection (1+ data series)
│   ├── Basic: ColumnSeries, BarSeries, LineSeries, AreaSeries
│   ├── Specialized: ScatterSeries, BubbleSeries, CandleSeries, OHLCSeries
│   ├── Stacked: StackedColumnSeries, StackedAreaSeries, Stacked100Series
│   └── Fast: FastLineBitmapSeries, FastColumnBitmapSeries, FastScatterBitmapSeries
├── Legend (optional)
├── ZoomPanBehavior (optional)
└── Visual Elements (Header, ChartArea, PlotArea, PaletteBrushes)

主な機能の概要

• データバインディング：ObservableCollection、List、または任意の IEnumerable に直接バインドでき、自動更新にも対応します
• 複数の系列：1 つのチャートに無制限の系列を表示でき、自動的な色の割り当てと凡例の連携に対応します
• リアルタイム更新：ライブダッシュボードや監視に適した、効率的な描画による動的データに対応します
• タッチとマウス：モバイルおよびデスクトップのシナリオ向けに、ジェスチャーを全面的にサポートします（ピンチズーム、パン、ホバー時のツールチップ）
• アクセシビリティ：キーボード操作とスクリーンリーダーに対応する WinUI 標準に基づいて構築されています
• レスポンシブ：軸ラベルを自動的に最適化し、コンテナーのサイズ変更に適応します

SfCartesianChart と他のチャートタイプの選び方

次の場合は SfCartesianChart を使用します：データに 2 つの定量的な次元（X と Y）がある場合、時系列分析、カテゴリ間の比較、傾向分析、金融データ（OHLC）、科学的なプロット、または直交座標系が必要なあらゆるシナリオ。

次の場合は代替手段を検討してください：

• 円形の関係 → SfCircularChart（Pie、Doughnut、Radial Bar）を使用します
• 階層データ → SfPyramidChart または SfFunnelChart を使用します
• 方向データ → SfPolarChart を使用します

主な機能

系列タイプ

• 基本系列： Column、Bar、Line、Area
• 特殊系列： Scatter、Bubble、Candle、OHLC
• 積み上げ系列： Stacked Column/Bar/Line/Area、Stacked100
• 高速系列： FastLine、FastLineBitmap、FastColumn、FastScatter、FastStepLine（数百万のポイント向けに最適化）

軸

• タイプ： NumericalAxis、CategoryAxis、DateTimeAxis、LogarithmicAxis
• 機能： 複数の軸、カスタム間隔、範囲のカスタマイズ、反転／反対位置への配置
• カスタマイズ： ラベル、ヘッダー、グリッド線、目盛り線、パディング、自動スクロール

対話型機能

• ズームとパン（タッチ／マウス）
• カスタムテンプレートを使用したツールチップ
• 複数系列の追跡に対応するトラックボール
• 正確な読み取りに役立つ十字線
• セグメントと系列の選択

カスタマイズ

• 位置とテンプレートを設定できる凡例
• 位置と書式を設定できるデータラベル
• チャートのタイトルとヘッダー
• ChartArea、PlotArea のスタイル設定、カラーパレットとテーマ

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

はじめに

📄 参照： references/getting-started.md

• Syncfusion.Chart.WinUI NuGet パッケージのインストール
• 名前空間のインポートとコントロールの初期化
• データバインディングを使用した ViewModel の作成
• XAxes と YAxes の設定
• 最初の系列の追加
• ColumnSeries を使用した完全な動作例

軸の設定

軸の種類

📄 参照： references/axis-types.md

• NumericalAxis - 間隔と範囲をカスタマイズできる数値データ用
• CategoryAxis - インデックスベースのプロットとラベル配置オプションに対応したカテゴリデータ用
• DateTimeAxis - 日付／時刻の書式設定と間隔の種類に対応した時系列データ用
• LogarithmicAxis - 基数をカスタマイズできる対数スケール用
• 各軸の種類を使う場面
• 間隔の設定と範囲のカスタマイズ

軸のカスタマイズ

📄 参照： references/axis-customization.md

• 軸ラベル（回転、書式設定、スタイル設定）
• 軸ヘッダーとタイトル
• グリッド線（主線／補助線、表示／非表示、スタイル設定）
• 目盛り線（カスタマイズとスタイル設定）と軸線のスタイル設定
• パディングと範囲のパディング
• IsInversed プロパティと OpposedPosition プロパティ
• AutoScrollingDelta を使用した自動スクロール

複数の軸

📄 参照： references/multiple-axes.md

• XAxes コレクションと YAxes コレクションの使用
• 系列を特定の軸に割り当てる方法（XAxisName、YAxisName）
• 異なるスケールを持つ複数の系列の配置
• 積み上げと横並びの軸配置
• 軸イベント（ActualRangeChanged、LabelCreated）

系列の種類

基本的な系列

📄 参照： references/basic-series.md

• ColumnSeries - カテゴリの比較に使う縦棒
• BarSeries - 順位付けや比較に使う横棒
• LineSeries - 時間の経過に伴う傾向を示す、点をつないだ線
• AreaSeries - 値の大きさや傾向を示す塗りつぶし領域
• ItemsSource、XBindingPath、YBindingPath の設定
• 共通プロパティとスタイル設定

特殊な系列

📄 参照： references/specialized-series.md

• ScatterSeries - 相関分析に使う XY プロット
• BubbleSeries - サイズで表現する3次元データ
• CandleSeries - 本体を塗りつぶして表示する金融 OHLC データ
• OHLCSeries - 始値・高値・安値・終値の金融データ
• 金融データのバインディングパターン
• バブルサイズの設定

積み上げ系列

📄 参照： references/stacked-series.md

• 積み上げ系列 - Column、Bar、Line、Area（累積合計を表示）
• Stacked100 系列 - 割合に基づく比較（100％積み上げ）
• 複数の積み上げ系列のグループ化
• データ要件と連携
• 全体に対する部分の分析での使用例

高速系列（高パフォーマンス）

📄 参照： references/fast-series.md

• FastLineSeries - 大規模な折れ線データセット向けのポリライン描画
• FastLineBitmapSeries - WriteableBitmap による描画（数百万の点）
• FastColumnBitmapSeries - 高パフォーマンスな縦棒描画
• FastScatterBitmapSeries - 大規模な散布図
• FastStepLineBitmapSeries - パフォーマンスを最適化した階段状折れ線グラフ
• ビットマップベースの系列での EnableAntiAliasing の有効化
• 高速系列と標準系列を使い分ける場面
• パフォーマンスのベストプラクティス

インタラクティブ機能

ツールチップ、トラックボール、十字線

📄 参照： references/tooltip-trackball-crosshair.md

• ツールチップ - EnableTooltip、カスタムテンプレート、スタイル設定
• トラックボール - 垂直線インジケーターによる複数系列の追跡
• 十字線 - 水平線と垂直線による正確な読み取り
• タッチとマウスの操作パターン
• カスタムコンテンツと配置

選択

📄 参照： references/selection.md

• EnableSegmentSelection と EnableSeriesSelection
• 選択モード（Single、Multiple）
• SelectedIndex プロパティ
• SelectionBehavior の設定
• 視覚的なフィードバックのカスタマイズ
• 選択イベント

ズームとパン

📄 参照： references/zooming-panning.md

• EnableZooming プロパティ
• ZoomMode（X、Y、XY）
• データ探索用の EnablePanning
• タッチジェスチャー（ピンチズーム）
• マウスホイールによるズーム
• プログラムによるズーム（ZoomPosition、ZoomFactor）
• ズームのリセット機能とズームツールバー

カスタマイズ

データラベル

📄 参照： references/data-labels.md

• ShowDataLabels プロパティ
• DataLabelSettings の設定
• ラベルの配置（Inner、Outer、Auto）
• ラベルのテンプレートと書式設定
• スタイルのカスタマイズ（フォント、色）
• 回転と配置

凡例

📄 参照： references/legend.md

• ChartLegend の有効化
• 位置と配置のオプション
• 凡例テンプレートのカスタマイズ
• アイコンの種類とスタイル
• 項目のクリックとシリーズの表示切り替え
• ラベルのカスタマイズ

複数シリーズの可視化

📄 参照： references/multiple-series.md

• Series コレクションへの複数シリーズの追加
• 異なるデータセットの比較
• シリーズの表示切り替え
• 視覚的に区別するためのカラーパレット
• 凡例の連動
• パフォーマンスに関する考慮事項
• 1つのチャート内での複数のシリーズタイプの併用

外観のカスタマイズ

📄 参照： references/appearance-customization.md

• チャートのヘッダーとタイトルの設定
• ChartArea の背景と境界線
• シリーズの色に使用する PaletteBrushes
• シリーズ単位のスタイル設定（Fill、Stroke、StrokeThickness）
• PlotArea のカスタマイズ
• グリッド線のスタイル設定と Theme の連携
• レスポンシブデザインのパターン

クイックスタートの例

列シリーズを使用した基本的な直交座標チャートを作成する最小限の例を示します。

<Window
    xmlns:chart="using:Syncfusion.UI.Xaml.Charts">
    
    <chart:SfCartesianChart Header="Sales Comparison">
        
        
        <chart:SfCartesianChart.XAxes>
            <chart:CategoryAxis Header="Products"/>
        </chart:SfCartesianChart.XAxes>
        
        
        <chart:SfCartesianChart.YAxes>
            <chart:NumericalAxis Header="Sales ($)"/>
        </chart:SfCartesianChart.YAxes>
        
        
        <chart:ColumnSeries ItemsSource="{Binding SalesData}"
                            XBindingPath="Product" YBindingPath="Amount"
                            Label="Q1 Sales" ShowDataLabels="True"/>
    </chart:SfCartesianChart>
</Window>

// Data Model
public class SalesData
{
    public string Product { get; set; }
    public double Amount { get; set; }
}

// ViewModel with sample data
public class ViewModel
{
    public List<SalesData> SalesData { get; set; } = new()
    {
        new() { Product = "Product A", Amount = 25000 },
        new() { Product = "Product B", Amount = 38000 },
        new() { Product = "Product C", Amount = 17000 }
    };
}

よく使われるパターン

パターン 1：複数シリーズの比較

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

<chart:SfCartesianChart Header="Quarterly Sales Comparison">
    
    

    
    <chart:ColumnSeries Label="Q1" 
                       ItemsSource="{Binding Q1Data}"
                       XBindingPath="Month" 
                       YBindingPath="Sales"/>
    
    <chart:ColumnSeries Label="Q2" 
                       ItemsSource="{Binding Q2Data}"
                       XBindingPath="Month" 
                       YBindingPath="Sales"/>
    
</chart:SfCartesianChart>

パターン 2：ズーム機能付き時系列折れ線チャート

操作可能なズーム機能を使用して、時間ベースのデータを表示します。

<chart:SfCartesianChart>
    
    <chart:SfCartesianChart.XAxes>
        <chart:DateTimeAxis>
            <chart:DateTimeAxis.LabelStyle>
                <chart:LabelStyle LabelFormat="MMM-dd"/>
            </chart:DateTimeAxis.LabelStyle>
        </chart:DateTimeAxis>
    </chart:SfCartesianChart.XAxes>
    
    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>
    
    <chart:LineSeries ItemsSource="{Binding TimeSeriesData}"
                     XBindingPath="Date" 
                     YBindingPath="Value"
                     EnableTooltip="True"/>
    
    
    <chart:SfCartesianChart.ZoomPanBehavior>
        <chart:ChartZoomPanBehavior EnableZooming="True" 
                                   EnablePanning="True"
                                   ZoomMode="XY"/>
    </chart:SfCartesianChart.ZoomPanBehavior>
    
</chart:SfCartesianChart>

パターン 3：全体に占める割合を分析する積み上げチャート

各部分の合計への寄与を表示します。

<chart:SfCartesianChart Header="Market Share by Region">
    
    
    
    
    <chart:StackedColumnSeries Label="Region A" 
                              ItemsSource="{Binding Data}"
                              XBindingPath="Year" 
                              YBindingPath="RegionA"/>
    
    <chart:StackedColumnSeries Label="Region B" 
                              ItemsSource="{Binding Data}"
                              XBindingPath="Year" 
                              YBindingPath="RegionB"/>
    
    <chart:StackedColumnSeries Label="Region C" 
                              ItemsSource="{Binding Data}"
                              XBindingPath="Year" 
                              YBindingPath="RegionC"/>
    
</chart:SfCartesianChart>

パターン 4：大規模データセット向けの高パフォーマンスチャート

高速シリーズを使用して、数百万個のデータポイントを表示します。

SfCartesianChart chart = new SfCartesianChart();

//Define X and Y Axis   -->

// Use FastLineBitmapSeries for performance
FastLineBitmapSeries series = new FastLineBitmapSeries
{
    ItemsSource = GenerateLargeDataset(1000000), // 1 million points
    XBindingPath = "Time",
    YBindingPath = "Value",
    EnableAntiAliasing = true // Smooth rendering
};

chart.Series.Add(series);

パターン 5：複数の軸を使用する財務チャート

出来高を別の軸に表示しながら、OHLC データを表示します。

<chart:SfCartesianChart>
    
    <chart:SfCartesianChart.XAxes>
        <chart:DateTimeAxis/>
    </chart:SfCartesianChart.XAxes>
    
    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis Header="Price"/>
        <chart:NumericalAxis Name="VolumeAxis" 
                           Header="Volume"
                           OpposedPosition="True"/>
    </chart:SfCartesianChart.YAxes>
    
    
    <chart:CandleSeries ItemsSource="{Binding StockData}"
                       XBindingPath="Date"
                       Open="Open"
                       High="High"
                       Low="Low"
                       Close="Close"/>
    
    
    <chart:ColumnSeries ItemsSource="{Binding StockData}"
                       XBindingPath="Date"
                       YBindingPath="Volume"
                       YAxisName="VolumeAxis"/>
    
</chart:SfCartesianChart>

主なプロパティの概要

SfCartesianChart

• Header - チャートのタイトル
• XAxes - 水平軸のコレクション
• YAxes - 垂直軸のコレクション
• Series - チャートシリーズのコレクション
• Legend - 凡例の設定
• ZoomPanBehavior - ズームとパンの動作
• PaletteBrushes - シリーズ用のカラーパレット

ChartSeries（基本クラス）

• ItemsSource - データソース
• XBindingPath - X 値のプロパティパス
• YBindingPath - Y 値のプロパティパス
• Label - 凡例に表示するシリーズラベル
• ShowDataLabels - データラベルを有効化
• EnableTooltip - ツールチップを有効化
• EnableAnimation - シリーズのアニメーションを有効化
• XAxisName - 使用する X 軸の名前
• YAxisName - 使用する Y 軸の名前

Axis（基本クラス）

• Header - 軸のタイトル
• Interval - ラベル間の間隔
• Minimum - 軸の最小値
• Maximum - 軸の最大値
• LabelRotation - ラベルの回転角度
• LabelStyle - ラベルの書式設定とスタイル
• ShowMajorGridLines - グリッド線の表示／非表示
• IsInversed - 軸の方向を反転
• OpposedPosition - 軸を反対側に配置

パフォーマンスに関する考慮事項

Fast Series を使用する場面

• データセットのサイズが 10,000 ポイントを超える場合：FastLineSeries または FastLineBitmapSeries を検討してください
• データセットのサイズが 100,000 ポイントを超える場合：FastLineBitmapSeries、FastColumnBitmapSeries、または FastScatterBitmapSeries を使用してください
• リアルタイム更新：Fast series はストリーミングデータのパフォーマンスに優れています
• トレードオフ：Fast series はインタラクティブ性が限られています（セグメントの選択不可、ツールチップのカスタマイズが限定的）

最適化のヒント

• カテゴリーデータには、NumericalAxis の書式設定ではなく CategoryAxis を使用してください
• FastBitmap series では EnableAntiAliasing を有効にして、表示品質を向上させてください
• 大規模なデータセットでは ShowDataLabels の使用を制限してください
• 非常に大規模なデータセットには、ViewModel で データ仮想化 を使用してください
• 100 万ポイントを超えるデータセットでは、サンプリングまたは集計 を検討してください
• 初回描画のパフォーマンスを向上させるには、アニメーション を無効にしてください

一般的なユースケース

1. ビジネスダッシュボード - 凡例とツールチップを備えた複数系列の縦棒グラフ／折れ線グラフ
2. 財務分析 - 複数の軸に出来高を重ねたローソク足／OHLC チャート
3. 時系列モニタリング - ズームとパンに対応したリアルタイムの折れ線グラフ
4. 比較分析 - 全体に対する各部分の関係を示す積み上げグラフ

トラブルシューティングのヒント

• 系列が表示されない：系列を追加する前に、XAxes と YAxes が定義されていることを確認してください
• データがバインドされない：XBindingPath と YBindingPath がデータモデルのプロパティ名と一致していることを確認してください
• パフォーマンスの問題：データセットが 10,000 ポイントを超える場合は、高速系列に切り替えてください
• 軸ラベルが重なっている：LabelRotation を使用するか、チャートの幅を広げてください
• 複数の軸が機能しない：XAxisName／YAxisName が軸の Name プロパティと一致していることを確認してください
• ズームが機能しない：チャートに ChartZoomPanBehavior を追加し、EnableZooming=True に設定してください

関連スキル

Syncfusion WinUI コンポーネントを使用する際は、以下も必要になる場合があります：

• 円形チャート - 円グラフ、ドーナツグラフ、放射状グラフ向け
• 極座標チャート - 極座標およびレーダーの可視化向け
• 3D チャート - 3 次元データの表現向け
• ファネル／ピラミッドチャート - 階層データの可視化向け