syncfusion-wpf-3d-chart

Syncfusion WPF 3D Charts の実装

Windows Presentation Foundation アプリケーションでインタラクティブな 3D データビジュアライゼーションを作成するための、Syncfusion® WPF 3D Charts（SfChart3D）コントロールの実装に関する包括的なガイドです。このスキルでは、3D チャートのセットアップ、構成、系列の種類、軸、装飾要素、外観のカスタマイズ、インタラクティブ機能について説明します。

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

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

• 3D ビジュアライゼーションを作成する場合（Column、Bar、Line、Area、Scatter、Circular 系列）
• Depth Axis を使って X、Y、Z 座標でデータを 3D 空間にプロットする場合
• 回転、傾斜、遠近法のコントロールを備えたインタラクティブな 3D チャートを実装する場合
• 11 種類以上のチャートタイプ（Column、Bar、Line、Scatter、Area、Stacking のバリエーション、Pie、Doughnut）を使って3D 系列を構成する場合
• 複数の軸（Numerical、Category、DateTime、TimeSpan、Logarithmic）を設定する場合
• Depth Axis 上に複数の系列を配置したマンハッタンチャートを構築する場合
• 3D ラベル、マーカー、位置指定を使ってデータ装飾要素を追加する場合
• パレット、色、テーマを使って外観をカスタマイズする場合
• 動的な回転、選択、セグメントの分離によってユーザー操作を有効にする場合
• 大規模な 3D データセット向けにパフォーマンスを最適化する場合

コンポーネントの概要

SfChart3D コントロールは、WPF アプリケーション向けに包括的な 3D チャート機能を提供します。2 次元データを、全方向の回転に対応した 3 次元ビューで可視化できます。

主な機能：

• 11 種類以上の系列タイプ： Column、Bar、Line、Scatter、Area、Stacking のバリエーション、Pie、Doughnut
• 3D ビジュアライゼーション： データを最適に表示するための回転、傾斜、遠近角度
• Depth Axis（Z 軸）： X、Y、Z 座標を使用した真の 3D プロット
• マンハッタンチャート： Depth Axis 上での複数系列の可視化
• 複数の軸タイプ： Numerical、Category、DateTime、TimeSpan、Logarithmic
• インタラクティブ機能： 動的な回転、選択、セグメントの分離
• データ装飾要素： 3D ラベル、マーカー、位置指定
• 豊富なカスタマイズ： パレット、色、テーマ、スタイル設定
• データバインディング： ObservableCollection による完全な MVVM サポート
• アニメーション： 系列の読み込みとデータ更新のアニメーション

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

はじめに

📄 参照： references/getting-started.md

• インストールとアセンブリ参照（Syncfusion.SfChart.WPF）
• WPF プロジェクトへの SfChart3D コントロールの追加
• XAML 名前空間の構成
• PrimaryAxis と SecondaryAxis の設定
• ItemsSource、XBindingPath、YBindingPath を使った基本的なデータバインディング
• 完全なサンプルを使った最初の 3D チャートの作成
• タイトル、凡例、ツールチップ、データラベルの追加
• ObservableCollection を使った ViewModel のセットアップ

系列の種類

📄 参照： references/series-types.md

• 11 種類以上の系列タイプと共通プロパティの概要
• Spacing と SegmentSpacing を使った Column チャート（ColumnSeries3D）
• Bar チャート（BarSeries3D）
• Line チャート（LineSeries3D）
• サイズを構成できる Scatter チャート（ScatterSeries3D）
• Area チャート（AreaSeries3D）
• Stacking チャート（StackingColumnSeries3D、StackingColumn100Series3D、StackingBarSeries3D、StackingBar100Series3D）
• Circular チャート（PieSeries3D、DoughnutSeries3D）
• Circular チャートの機能（係数、半円、動的な分離）
• 系列の選択と Interior プロパティ
• 各系列タイプの用途

軸の構成

📄 参照： references/axes-configuration.md

• 軸の概要（PrimaryAxis、SecondaryAxis、DepthAxis）
• 数値データ向けの NumericalAxis3D
• カテゴリデータ向けの CategoryAxis3D
• 時系列データ向けの DateTimeAxis3D
• 時間間隔データ向けの TimeSpanAxis3D
• 指数データ向けの LogarithmicAxis3D
• ZBindingPath を使った Depth Axis（Z 軸）の設定
• X、Y、Z 座標による真の 3D プロット
• Depth Axis 上に複数の系列を配置したマンハッタンチャート
• 軸のカスタマイズ（ヘッダー、間隔、範囲）
• 軸の構成に関する問題のトラブルシューティング

データ装飾

📄 参照： references/adornments.md

• ChartAdornmentInfo3D の構成
• ShowLabel プロパティによるデータラベルの有効化
• データマーカー（種類、形状、カスタマイズ）
• ラベルの配置オプション
• ラベルの書式設定とテンプレート
• 装飾のスタイルと外観
• 大規模なデータセットに関するパフォーマンスの考慮事項

外観のカスタマイズ

📄 参照： references/appearance-customization.md

• 定義済みのカラーパレット（Metro、AutumnBrights、FloraHues、Pineapple、TomotoSpectrum、RedChrome、PurpleChrome、BlueChrome、GreenChrome、Elite、LightCandy、SandyBeach）
• 系列とセグメントへのパレットの適用
• ColorModel と CustomBrushes によるカスタムパレット
• データに基づく色付けのための SegmentColorPath
• Series Interior プロパティ
• テーマとの連携
• スタイル設定のベストプラクティス

インタラクティブ機能

📄 参照： references/interactive-features.md

• 3D 回転とナビゲーション（EnableRotation、Rotation、Tilt、PerspectiveAngle）
• マウスやタッチデバイスによる動的な回転
• 選択のサポート（セグメントと系列の選択）
• 円形系列の展開（ExplodeOnMouseClick、ExplodeIndex、ExplodeAll）
• ツールチップの構成（ShowTooltip プロパティ）
• 系列の読み込みアニメーションのサポート
• ユーザー操作のパターンとベストプラクティス

クイックスタートの例

3D Column チャートを作成する最小限の例を示します。

XAML：

<Window xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF">
    
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    
    <chart:SfChart3D Header="Sales Data 3D" Width="500" Height="500">
        
        
        <chart:SfChart3D.PrimaryAxis>
            <chart:CategoryAxis3D Header="Month"/>
        </chart:SfChart3D.PrimaryAxis>
        
        
        <chart:SfChart3D.SecondaryAxis>
            <chart:NumericalAxis3D Header="Sales"/>
        </chart:SfChart3D.SecondaryAxis>
        
        
        <chart:SfChart3D.Legend>
            <chart:ChartLegend/>
        </chart:SfChart3D.Legend>
        
        
        <chart:ColumnSeries3D 
            Label="Revenue" 
            ItemsSource="{Binding SalesData}" 
            XBindingPath="Month" 
            YBindingPath="Sales"
            ShowTooltip="True">
            
            
            <chart:ColumnSeries3D.AdornmentsInfo>
                <chart:ChartAdornmentInfo3D ShowLabel="True"/>
            </chart:ColumnSeries3D.AdornmentsInfo>
        </chart:ColumnSeries3D>
        
    </chart:SfChart3D>
    
</Window>

C# ViewModel：

using System.Collections.ObjectModel;

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 = 63000 },
            new SalesData { Month = "Jun", Sales = 71000 }
        };
    }
}

よく使われるパターン

パターン 1：回転可能な 3D チャート

データをより適切に探索できるよう、インタラクティブな回転を有効にします。

<chart:SfChart3D EnableRotation="True" Rotation="45" Tilt="-30" PerspectiveAngle="90">
    
</chart:SfChart3D>

パターン 2：マンハッタンチャート（奥行き軸上の複数系列）

奥行き軸に沿って複数の系列を可視化します。

<chart:SfChart3D Rotation="43">
    <chart:SfChart3D.PrimaryAxis>
        <chart:CategoryAxis3D/>
    </chart:SfChart3D.PrimaryAxis>
    <chart:SfChart3D.SecondaryAxis>
        <chart:NumericalAxis3D/>
    </chart:SfChart3D.SecondaryAxis>
    
    
    <chart:SfChart3D.DepthAxis>
        <chart:CategoryAxis3D/>
    </chart:SfChart3D.DepthAxis>
    
    <chart:LineSeries3D Label="Product A" ItemsSource="{Binding Data1}" 
                        XBindingPath="X" YBindingPath="Y"/>
    <chart:LineSeries3D Label="Product B" ItemsSource="{Binding Data2}" 
                        XBindingPath="X" YBindingPath="Y"/>
</chart:SfChart3D>

パターン 3：X、Y、Z 座標を使った真の 3D プロット

3 つの次元すべてを使ってデータをプロットします。

<chart:SfChart3D>
    <chart:SfChart3D.PrimaryAxis>
        <chart:NumericalAxis3D/>
    </chart:SfChart3D.PrimaryAxis>
    <chart:SfChart3D.SecondaryAxis>
        <chart:NumericalAxis3D/>
    </chart:SfChart3D.SecondaryAxis>
    
    
    <chart:SfChart3D.DepthAxis>
        <chart:NumericalAxis3D Interval="1"/>
    </chart:SfChart3D.DepthAxis>
    
    <chart:ColumnSeries3D 
        ItemsSource="{Binding Data3D}" 
        XBindingPath="XValue" 
        YBindingPath="YValue" 
        ZBindingPath="ZValue"/>
</chart:SfChart3D>

パターン 4：展開効果のある 3D 円グラフ

インタラクティブな円形チャートを作成します。

<chart:PieSeries3D 
    ItemsSource="{Binding CategoryData}" 
    XBindingPath="Category" 
    YBindingPath="Value"
    ExplodeOnMouseClick="True"
    CircleCoefficient="0.8">
</chart:PieSeries3D>

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

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

<chart:SfChart3D Palette="Custom">
    <chart:SfChart3D.ColorModel>
        <chart:ChartColorModel>
            <chart:ChartColorModel.CustomBrushes>
                <SolidColorBrush Color="#6366F1"/>
                <SolidColorBrush Color="#8B5CF6"/>
                <SolidColorBrush Color="#EC4899"/>
                <SolidColorBrush Color="#F59E0B"/>
            </chart:ChartColorModel.CustomBrushes>
        </chart:ChartColorModel>
    </chart:SfChart3D.ColorModel>
    
    
</chart:SfChart3D>

主なプロパティのリファレンス

SfChart3D コントロール

• EnableRotation - マウス／タッチによる回転を有効にします
• Rotation - 初期回転角度（0～360）
• Tilt - 垂直方向の傾斜角度
• PerspectiveAngle - 3D の遠近感（0～180）
• Depth - 3D 効果のためのチャートの奥行き
• PrimaryAxis - X 軸の構成
• SecondaryAxis - Y 軸の構成
• DepthAxis - Z 軸の構成（省略可能）
• Header - チャートのタイトル
• Legend - 凡例の構成
• Palette - カラーパレットの選択

系列の共通プロパティ

• ItemsSource - データコレクションのバインディング
• XBindingPath - X 値に使用するプロパティ
• YBindingPath - Y 値に使用するプロパティ
• ZBindingPath - Z 値に使用するプロパティ（奥行き軸）
• Label - 凡例に表示する系列名
• ShowTooltip - ツールチップを有効にします
• Interior - 系列の塗りつぶし色
• AdornmentsInfo - データラベルの構成

間隔のプロパティ（Column／Bar）

• Spacing - セグメント間の間隔（0～1）
• SegmentSpacing - 系列間の間隔（0～1）

円形系列のプロパティ

• CircleCoefficient - 内側の円のサイズ（Pie）
• DoughnutCoefficient - 内側の円のサイズ（Doughnut）
• StartAngle - 半円形の開始角度
• EndAngle - 半円形の終了角度
• ExplodeOnMouseClick - クリックによる展開を有効にします
• ExplodeIndex - 展開するセグメントのインデックス
• ExplodeAll - すべてのセグメントを展開します

よくあるユースケース

ユースケース 1：財務データの可視化

複数の製品の四半期ごとの収益を 3D で可視化します。

• 製品を比較するには、DepthAxis を使った ColumnSeries3D を使用します
• 四半期と製品には CategoryAxis3D を適用します
• 異なる視点から表示できるよう、Rotation を有効にします
• 正確な値を表示するには、データラベルを追加します

ユースケース 2：科学データ分析

X、Y、Z 座標を使用して科学的な測定値をプロットします。

• 3D ポイントには ScatterSeries3D と ZBindingPath を使用します
• 3 つすべての軸に NumericalAxis3D を適用します
• データを探索できるように動的回転を有効にします
• データポイントの表示にはカスタムマーカーを使用します

ユースケース 3：市場シェアダッシュボード

市場シェアの分布を 3D で表示します。

• 比例データには PieSeries3D または DoughnutSeries3D を使用します
• ブランドカラーにはカスタムパレットを適用します
• インタラクティブ性を高めるため、ExplodeOnMouseClick を有効にします
• 詳細情報を示すツールチップを追加します

ユースケース 4：時系列の比較

複数のデータセットを 3D で時系列比較します。

• Manhattan chart パターンには LineSeries3D を使用します
• 時間ベースの X 軸には DateTimeAxis3D を適用します
• 系列を識別するには Label プロパティを使用します
• 系列を切り替えられるように Legend を有効にします

ユースケース 5：パフォーマンス指標ダッシュボード

積み上げ型のパフォーマンス指標を視覚化します。

• 累積データには StackingColumnSeries3D を使用します
• ColorModel を使ってカスタムカラーを適用します
• 指標の値を示すデータラベルを追加します
• 詳細をドリルダウンできるようにツールチップを有効にします

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

問題： グラフが表示されない

• アセンブリ参照 Syncfusion.SfChart.WPF を確認します
• XAML の名前空間宣言を確認します
• ItemsSource にデータが設定されていることを確認します
• XBindingPath と YBindingPath がプロパティ名と一致していることを確認します

問題： 3D 効果が表示されない

• Depth プロパティを設定します（デフォルト：100）
• Rotation と Tilt の角度を設定します
• 奥行きの見え方を調整するには PerspectiveAngle を調整します

問題： 回転しない

• EnableRotation="True" を設定します
• グラフに十分なスペース（Width/Height）があることを確認します
• マウスイベントの競合がないか確認します

問題： 奥行き軸が表示されない

• SfChart3D に DepthAxis の設定を追加します
• 系列に ZBindingPath を設定します
• 系列の種類が奥行き軸に対応していることを確認します（Column、Bar、Line、Scatter、StackingColumn、StackingBar）

詳しいトラブルシューティングや高度な使用例については、上記の該当するリファレンスドキュメントを参照してください。