syncfusion-wpf-charts

Syncfusion WPF Charts（SfChart）の実装

Windows Presentation Foundation アプリケーションで Syncfusion® WPF Charts（SfChart）コントロールを実装するための包括的なガイドです。このスキルでは、基本的なチャートの設定から、テクニカルインジケーター、インタラクティブな動作、パフォーマンスの最適化などの高度な機能まで、すべてを解説します。

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

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

• WPF アプリケーションでチャートを使ったデータの可視化を作成する
• 38 種類以上のシリーズタイプを実装する（Line、Column、Bar、Area、Pie、Financial など）
• チャート軸を設定する（Category、Numeric、DateTime、Logarithmic、TimeSpan、DateTimeCategory）
• ItemsSource とバインディングパスを使ってチャートにデータをバインドする
• インタラクティブ機能を追加する（ズーム、パン、ツールチップ、クロスヘア、トラックボール）
• チャートの外観をカスタマイズする（色、テーマ、スタイル、テンプレート）
• テクニカルインジケーターを使った金融チャートを実装する
• 大規模なデータセット向けにチャートのパフォーマンスを最適化する
• WPF アプリケーションからチャートをエクスポートまたは印刷する
• WPF のチャート関連の問題をトラブルシューティングする

コンポーネントの概要

SfChart は、次の機能を備えた強力なデータ可視化コントロールです。

• 38 種類以上のチャートタイプ： Line、Column、Bar、Area、Bubble、Scatter、Pie、Doughnut、Funnel、Pyramid、Financial（Candle、OHLC）、Radar、Polar、Range、Spline など
• 高いパフォーマンス： 大規模なデータセット（数百万のポイント）をミリ秒単位で描画
• インタラクティブ機能： ズーム、パン、ツールチップ、クロスヘア、トラックボール、選択、ビジュアルデータ編集
• 柔軟なデータバインディング： MVVM のサポート、複雑なデータ構造、動的更新
• 複数の軸： 複雑な可視化のために、複数の軸を重ねて表示
• テクニカルインジケーター： 金融分析向けの 10 種類以上のインジケーター（SMA、EMA、RSI、MACD など）
• 豊富なカスタマイズ： テーマ、スタイル、テンプレート、色、フォント、レイアウト
• 高度な機能： 注釈、ストリップライン、凡例、データラベル、マーカー
• エクスポートと印刷： チャートを画像として保存、印刷、状態のシリアライズ／デシリアライズ

Namespace: Syncfusion.UI.Xaml.Charts
Assembly: Syncfusion.SfChart.WPF

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

はじめに

📄 参照： references/getting-started.md

基本的なチャートの実装は、ここから始めてください。

• チャートの参照設定と NuGet パッケージの追加
• 軸を使った基本的なチャートの初期化
• 最初のシリーズの追加
• シンプルなデータバインディングの設定
• 最初のチャートアプリケーションの実行
• 最小限の動作例

シリーズタイプとデータの可視化

📄 参照： references/series-types.md

使用可能な 38 種類以上のシリーズタイプについて説明します。

• Line、Column、Bar、Area シリーズ
• Bubble チャートと Scatter チャート
• Financial チャート（Candle、OHLC、HiLo、HiLoOpenClose）
• Pie チャートと Doughnut チャート
• Funnel チャートと Pyramid チャート
• Radar チャートと Polar チャート
• Range シリーズ（RangeArea、RangeColumn）
• Spline のバリエーション（Spline、SplineArea）
• 積み上げシリーズ（StackingColumn、StackingArea など）
• 各シリーズタイプの使いどころ
• 複数のシリーズの組み合わせ

軸の設定

📄 参照： references/axes-configuration.md

データを適切に表現できるよう、チャート軸を設定します。

• 軸のタイプ（CategoryAxis、NumericalAxis、DateTimeAxis、LogarithmicAxis）
• 主軸と副軸
• 複数軸のサポートと配置
• 軸ラベル、書式設定、回転
• 軸の範囲、間隔、自動範囲
• 軸線のカスタマイズ
• 軸の交差と反転
• 軸のストリップライン

データバインディング

📄 参照： references/data-binding.md

チャートシリーズにデータをバインドします。

• ItemsSource プロパティの設定
• XBindingPath と YBindingPath の設定
• コレクションとリストへのバインディング
• 複雑なプロパティのバインディング
• 動的なデータ更新
• MVVM パターンの実装
• ObservableCollection のサポート
• 複数シリーズのデータバインディング

凡例

📄 読む： references/legends.md

グラフの凡例を設定します：

• 凡例の位置とドッキング
• 凡例の表示と切り替え
• 凡例アイコンとカスタマイズ
• 凡例項目のテンプレート
• カスタム凡例項目
• 凡例の向き

インタラクティブ機能

📄 読む： references/interactive-features.md

ユーザー操作機能を追加します：

• ツールチップの設定とカスタマイズ
• クロスヘアの動作とスタイル設定
• トラックボール機能
• ズームとパン（ピンチ、範囲選択、マウスホイール）
• 選択モード（単一、複数、系列）
• データの視覚的な編集
• サイズ変更可能なスクロールバー
• タッチ操作のサポート

装飾（データラベルとマーカー）

📄 読む： references/adornments.md

データポイントに追加情報を表示します：

• データラベルの設定
• ラベルの内容と書式設定
• スマートなラベル配置
• データマーカー（シンボル）
• マーカーのカスタマイズ
• ラベルの回転と配置
• カスタム装飾テンプレート

外観とスタイル設定

📄 読む： references/appearance-styling.md

グラフの外観をカスタマイズします：

• グラフ領域のスタイル設定（背景、境界線）
• 系列の色とパレット
• グラフヘッダーのカスタマイズ
• プロット領域の設定
• テーマとビジュアルスタイル
• フォントのカスタマイズ
• 透かしのサポート
• グラデーションと単色の塗りつぶし

注釈

📄 読む： references/annotations.md

グラフにカスタム注釈を追加します：

• テキスト注釈
• 形状注釈（線、長方形、楕円）
• 画像注釈
• カスタム注釈テンプレート
• 位置と配置
• 注釈の操作
• 動的な注釈

ストリップライン

📄 読む： references/striplines.md

ストリップラインで軸の領域を強調表示します：

• 軸へのストリップラインの追加
• ストリップラインのスタイル設定と色
• 複数のストリップライン
• ストリップラインのラベル
• 繰り返しストリップライン
• ストリップラインの配置

テクニカル指標

📄 読む： references/technical-indicators.md

金融分析指標を実装します：

• 10 種類以上のテクニカル指標（SMA、EMA、RSI、MACD、ボリンジャーバンドなど）
• 指標の設定とパラメーター
• 指標と金融系列の組み合わせ
• 同じグラフ上の複数の指標
• カスタム指標のスタイル設定
• 指標シグナル

パフォーマンスの最適化

📄 読む： references/performance-optimization.md

大規模なデータセット向けにグラフを最適化します：

• 高速な系列タイプ（FastLine、FastColumn、FastBar など）
• パフォーマンスに関するベストプラクティス
• レンダリングの最適化
• メモリ管理
• データのサンプリング手法
• セグメントのレンダリング
• アニメーションのパフォーマンス

印刷とエクスポート

📄 読む： references/printing-exporting.md

グラフをエクスポートして印刷します：

• 印刷機能
• 画像形式（PNG、JPEG、BMP）へのエクスポート
• エクスポート設定オプション
• グラフのシリアル化
• グラフの状態の保存と読み込み
• エクスポート品質の設定

クイックスタートの例

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

<Window x:Class="ChartDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
        Title="Sales Chart" Height="450" Width="800">
    
    <syncfusion:SfChart>
        
        <syncfusion:SfChart.PrimaryAxis>
            <syncfusion:CategoryAxis Header="Month"/>
        </syncfusion:SfChart.PrimaryAxis>
        
        
        <syncfusion:SfChart.SecondaryAxis>
            <syncfusion:NumericalAxis Header="Sales ($)"/>
        </syncfusion:SfChart.SecondaryAxis>
        
        
        <syncfusion:ColumnSeries ItemsSource="{Binding SalesData}"
                                 XBindingPath="Month"
                                 YBindingPath="Sales"
                                 Label="Monthly Sales">
            <syncfusion:ColumnSeries.AdornmentsInfo>
                <syncfusion:ChartAdornmentInfo ShowLabel="True"/>
            </syncfusion:ColumnSeries.AdornmentsInfo>
        </syncfusion:ColumnSeries>
    </syncfusion:SfChart>
</Window>

using Syncfusion.UI.Xaml.Charts;
using System.Collections.ObjectModel;

namespace ChartDemo
{
    public class SalesData
    {
        public string Month { get; set; }
        public double Sales { get; set; }
    }

    public class ViewModel
    {
        public ObservableCollection<SalesData> SalesData { get; set; }

        public ViewModel()
        {
            SalesData = new ObservableCollection<SalesData>
            {
                new SalesData { Month = "Jan", Sales = 35000 },
                new SalesData { Month = "Feb", Sales = 48000 },
                new SalesData { Month = "Mar", Sales = 42000 },
                new SalesData { Month = "Apr", Sales = 56000 },
                new SalesData { Month = "May", Sales = 67000 },
                new SalesData { Month = "Jun", Sales = 72000 }
            };
        }
    }
}

よく使われるパターン

パターン 1：複数系列のグラフ

<syncfusion:SfChart>
    <syncfusion:SfChart.PrimaryAxis>
        <syncfusion:CategoryAxis/>
    </syncfusion:SfChart.PrimaryAxis>
    
    <syncfusion:SfChart.SecondaryAxis>
        <syncfusion:NumericalAxis/>
    </syncfusion:SfChart.SecondaryAxis>
    
    
    <syncfusion:LineSeries ItemsSource="{Binding Data2023}"
                           XBindingPath="Month"
                           YBindingPath="Value"
                           Label="2023"/>
    
    
    <syncfusion:LineSeries ItemsSource="{Binding Data2024}"
                           XBindingPath="Month"
                           YBindingPath="Value"
                           Label="2024"/>
</syncfusion:SfChart>

パターン 2：ツールチップとズーム機能付きのグラフ

<syncfusion:SfChart>
    <syncfusion:SfChart.PrimaryAxis>
        <syncfusion:DateTimeAxis/>
    </syncfusion:SfChart.PrimaryAxis>
    
    <syncfusion:SfChart.SecondaryAxis>
        <syncfusion:NumericalAxis/>
    </syncfusion:SfChart.SecondaryAxis>
    
    
    <syncfusion:LineSeries ItemsSource="{Binding Data}"
                           XBindingPath="Date"
                           YBindingPath="Value"
                           ShowTooltip="True"/>
    
    
    <syncfusion:SfChart.Behaviors>
        <syncfusion:ChartZoomPanBehavior EnableMouseWheelZooming="True"
                                          EnablePanning="True"
                                          EnableSelectionZooming="True"/>
    </syncfusion:SfChart.Behaviors>
</syncfusion:SfChart>

パターン 3：テクニカル指標付き金融グラフ

<syncfusion:SfChart>
    <syncfusion:SfChart.PrimaryAxis>
        <syncfusion:DateTimeAxis/>
    </syncfusion:SfChart.PrimaryAxis>
    
    <syncfusion:SfChart.SecondaryAxis>
        <syncfusion:NumericalAxis/>
    </syncfusion:SfChart.SecondaryAxis>
    
    
    <syncfusion:CandleSeries ItemsSource="{Binding StockData}"
                             XBindingPath="Date"
                             High="High"
                             Low="Low"
                             Open="Open"
                             Close="Close"/>
    
    
    <syncfusion:SimpleAverageIndicator ItemsSource="{Binding StockData}"
                             XBindingPath="Date"
                             High="High"
                             Low="Low"
                             Open="Open"
                             Close="Close"
                             Period="14"/>
</syncfusion:SfChart>

主なプロパティとクラス

SfChart クラス

• PrimaryAxis - 横軸（X 軸）
• SecondaryAxis - 縦軸（Y 軸）
• Series - グラフ系列のコレクション
• Legend - グラフの凡例設定
• Header - グラフのタイトル
• Behaviors - インタラクティブ動作のコレクション

ChartSeries の基本プロパティ

• ItemsSource - 系列のデータソース
• XBindingPath - X 値のプロパティパス
• YBindingPath - Y 値のプロパティパス
• Label - 系列名（凡例に表示）
• ShowTooltip - ツールチップの有効化／無効化
• Palette - 系列のカラーパレット

共通の軸プロパティ

• Header - 軸のタイトル
• Interval - 軸ラベルの間隔
• Minimum/Maximum - 軸の範囲の上限と下限
• LabelFormat - 軸ラベルの書式文字列
• ShowGridLines - グリッド線の表示／非表示

一般的なユースケース

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

複数年の比較、ツールチップ、データラベルを使って、月ごとの売上推移を表示します。

使用する場面：

• ビジネスレポート用ダッシュボード
• 財務実績の追跡
• 時系列の傾向分析

推奨される系列： 凡例とツールチップを備えた Line、Column、または Area 系列。

ユースケース 2：株式市場分析

ローソク足チャートとテクニカル指標（移動平均、RSI、MACD）を使って、株価を表示します。

使用する場面：

• 金融アプリケーション
• 取引プラットフォーム
• 投資分析ツール

推奨される系列： テクニカル指標を備えた CandleSeries、HiLoOpenCloseSeries。

ユースケース 3：データ分布の可視化

円グラフまたはドーナツグラフを使って、データの分布と割合を表示します。

使用する場面：

• 市場シェア分析
• 予算配分の表示
• アンケート結果の可視化

推奨される系列： データラベルを備えた PieSeries、DoughnutSeries。

ユースケース 4：科学データのプロット

高性能な系列とズーム機能を使って、大規模なデータセットをプロットします。

使用する場面：

• 科学アプリケーション
• エンジニアリングデータの可視化
• リアルタイム監視

推奨される系列： ズームとパン機能を備えた FastLineSeries、ScatterSeries。

ユースケース 5：比較チャート

グループ化または積み上げた列を使って、複数のデータセットを並べて比較します。

使用する場面：

• 製品比較
• 期間ごとの比較分析
• カテゴリ比較

推奨される系列： ColumnSeries、StackingColumnSeries、GroupedColumnSeries。

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

1. 適切な系列タイプを選択する： データと可視化の目的に合わせて系列タイプを選択します。傾向には Line、比較には Column、割合には Pie、株価データには Financial を使用します。

2. 大規模なデータには Fast 系列を使用する： 数千件のデータポイントを扱う場合は、パフォーマンスを向上させるために Fast 系列タイプ（FastLineSeries、FastColumnSeries）を使用します。

3. インタラクティブ機能を有効にする： ツールチップ、ズーム、トラックボールを追加して、ユーザーエクスペリエンスとデータ探索を向上させます。

4. MVVM でデータをバインドする： 動的なデータ更新には ObservableCollection と INotifyPropertyChanged を使用します。

5. 外観をカスタマイズする： テーマとカスタムスタイルを適用して、アプリケーションのデザイン言語に合わせます。

6. パフォーマンスを最適化する： アニメーションを無効にし、セグメントレンダリングを使用し、非常に大規模なデータセットにはデータサンプリングを実装します。

7. 異なるスケールには複数の軸を使用する： 値の範囲や単位が異なるデータを表示する場合は、複数の軸を使用します。

8. 注釈でコンテキストを追加する： 注釈とストリップラインを使用して、重要な値、しきい値、領域を強調表示します。

関連コンポーネント

• Range Selector： ../implementing-range-selectors/ - チャートデータのフィルタリングに使用する日付／値の範囲を選択します

トラブルシューティング

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

• Syncfusion.SfChart.WPF アセンブリ参照を確認します
• データバインディングと ItemsSource を確認します
• 軸が適切に構成されていることを確認します
• ライセンスが必要なアプリケーションでは、ライセンスキーを確認します

パフォーマンスに問題がある場合：

• 大規模なデータセットには Fast 系列タイプに切り替えます
• 不要な場合はアニメーションを無効にします
• データサンプリングまたは集計を使用します
• セグメントレンダリングを有効にします

データが更新されない場合：

• ItemsSource には ObservableCollection を使用します
• データモデルに INotifyPropertyChanged を実装します
• バインディングパス（XBindingPath、YBindingPath）を確認します

次のステップ

1. はじめにを読む：最初のチャートを設定します
2. 系列の種類を確認する：適切なビジュアライゼーションを見つけます
3. データバインディングを設定する：データを接続します
4. インタラクティブ機能を追加する：ユーザーエクスペリエンスを向上させます
5. 外観をカスタマイズする：アプリケーションのデザインに合わせます

各トピックの詳細については、上記の「ドキュメントとナビゲーションガイド」セクションに記載されている該当のリファレンスファイルを参照してください。