syncfusion-wpf-surface-chart

Syncfusion WPF Surface Chart の実装

SfSurfaceChart は、複数のデータポイントを結ぶ三次元のサーフェスです。

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

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

• X、Y、Z 座標を使って三次元データを可視化する
• 数学関数や科学データの 3D サーフェスプロットを作成する
• 地形図や標高マップを表示する
• 等高線図やワイヤーフレームの可視化を表示する
• 回転やズームに対応したインタラクティブな 3D チャートを実装する
• 値を色分けしたヒートマップを描画する
• 3 つの変数間の関係を可視化する
• メッシュまたはグリッドベースの 3D 可視化を作成する

Syncfusion WPF Surface Chart（SfSurfaceChart）は、グリッド形式の三次元データの描画に特化しており、標準サーフェス、ワイヤーフレーム、等高線ビューなど、複数の可視化タイプに対応しています。

コンポーネントの概要

SfSurfaceChart は、三次元空間にデータポイントを表示する強力な 3D 可視化コントロールです。データポイントをつないで連続したサーフェスを作成するため、3 つの変数間の関係を調べるのに最適です。

主な機能：

• 4 種類のサーフェスタイプ：Surface、WireframeSurface、Contour、WireframeContour
• 複数のデータバインド方法（ItemsSource またはデータポイントの直接指定）
• カスタマイズ可能な 3 つの軸（X、Y、Z）
• 値を表すカラーバー
• 定義済みおよびカスタムのカラーパレット
• インタラクティブな回転、傾斜、ズーム
• 透視投影と正投影のカメラ投影
• グラデーションおよび単色の描画

視覚要素：

• サーフェスヘッダー — チャートのタイトル
• 壁 — チャートを囲む壁（左、下、後ろ）
• 主グリッド線 — 軸のグリッド線
• カラーバー — 色の対応付けによる値の範囲表示
• 軸ラベル — X、Y、Z 軸のラベル
• 軸ヘッダー — 各軸のヘッダー

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

はじめに

📄 参照: references/getting-started.md

• アセンブリ参照とインストール
• サーフェスチャート要素の視覚的な構造
• XAML からサーフェスチャートを作成する
• コードビハインドからサーフェスチャートを作成する
• 基本的な初期化とセットアップ
• ヘッダー、軸、カラーバーの追加
• 完全な動作例
• テーマのサポートとカスタマイズ

サーフェスタイプ

📄 参照: references/surface-types.md

• 4 種類のサーフェスタイプの概要
• Surface — 標準的な 3D サーフェスの可視化
• WireframeSurface — メッシュ／ワイヤーフレーム描画
• Contour — 上から見た 2D 等高線ビュー
• WireframeContour — メッシュ等高線の可視化
• データに適したタイプの選び方
• Type プロパティの設定
• 視覚的な比較とユースケース

データバインド

📄 参照: references/data-binding.md

• データ構造の要件（グリッド形式）
• コレクションで ItemsSource プロパティを使用する
• XBindingPath、YBindingPath、ZBindingPath のマッピング
• RowSize と ColumnSize の設定
• Data.AddPoints メソッドによるデータの直接入力
• データモデルと ViewModel の作成
• XAML とコードビハインドでのバインド
• パフォーマンスに関する考慮事項

軸の設定

📄 参照: references/axes-configuration.md

• X、Y、Z 軸のセットアップ
• 既定の軸と明示的な軸定義
• Header と HeaderTemplate のカスタマイズ
• LabelTemplate と LabelFormat のオプション
• Minimum と Maximum の範囲設定
• Interval と目盛りの設定
• GridLines のカスタマイズ（線の色、太さ）
• EdgeLabelsDrawingMode のオプション
• RangePadding の設定
• 軸のスタイル設定例

表示領域のカスタマイズ

📄 参照： references/surface-area.md

• 表示領域のプロパティの概要
• Rotation プロパティと Rotate プロパティ
• 表示角度を設定する Tilt プロパティ
• インタラクティブ操作を有効にする EnableRotation
• CameraProjection（Perspective／Orthographic）
• ヘッダーとタイトルのカスタマイズ
• 壁のブラシ（LeftWallBrush、BottomWallBrush、BackWallBrush）
• WallThickness の設定
• ワイヤーフレームの線と太さ
• ShowContourLine オプション
• カラーグラデーションの BrushCount
• ApplyGradientBrush 設定

カラーバーの設定

📄 参照： references/color-bar.md

• カラーバーの目的と値の表示
• DockPosition プロパティ（Left、Right、Top、Bottom）
• 値を表示する ShowLabel プロパティ
• カラーバーの追加と設定
• パレットとの連携
• XAML とコードビハインドの設定

パレットと色

📄 参照： references/palettes.md

• パレットの概要と目的
• 12 種類の定義済みパレット（Metro、AutumnBrights、FloraHues、Pineapple など）
• Palette プロパティを使用した定義済みパレットの適用
• ChartColorModel を使用したカスタムパレットの作成
• CustomBrushes コレクション
• グラデーションと単色の描画
• パレットの表示例

ユーザー操作

📄 参照： references/user-interactions.md

• ズーム機能と EnableZooming
• プログラムによるズームに使用する ZoomLevel プロパティ
• ピンチズームのサポート
• EnableRotation による回転
• プログラムによる回転に使用する Rotate プロパティ
• 表示角度を設定する Tilt プロパティ
• インタラクティブ操作とプログラム制御
• 回転、傾斜、ズームの組み合わせ

トラブルシューティング

📄 参照： references/troubleshooting.md

• よくある問題と解決策
• データが正しく表示されない
• RowSize と ColumnSize の不一致
• 軸の範囲とスケーリングの問題
• パフォーマンス最適化のヒント
• カラーバーが表示されない問題
• ワイヤーフレーム描画の問題
• アセンブリ参照エラー

クイックスタートの例

XAML での基本的なサーフェスチャート

<Window xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF">
    <Grid>
        <chart:SfSurfaceChart Type="Surface" 
                             ItemsSource="{Binding DataValues}"
                             XBindingPath="X" 
                             YBindingPath="Y" 
                             ZBindingPath="Z"
                             RowSize="{Binding RowSize}"
                             ColumnSize="{Binding ColumnSize}"
                             Header="3D Surface Chart"
                             Rotate="30" 
                             Tilt="15">
            
            
            <chart:SfSurfaceChart.XAxis>
                <chart:SurfaceAxis Header="X-Axis" />
            </chart:SfSurfaceChart.XAxis>
            
            
            <chart:SfSurfaceChart.YAxis>
                <chart:SurfaceAxis Header="Y-Axis" LabelFormat="0.0" />
            </chart:SfSurfaceChart.YAxis>
            
            
            <chart:SfSurfaceChart.ZAxis>
                <chart:SurfaceAxis Header="Z-Axis" />
            </chart:SfSurfaceChart.ZAxis>
            
            
            <chart:SfSurfaceChart.ColorBar>
                <chart:ChartColorBar DockPosition="Right" ShowLabel="True" />
            </chart:SfSurfaceChart.ColorBar>
        </chart:SfSurfaceChart>
    </Grid>
</Window>

データモデルと ViewModel

// Data Model
public class Data
{
    public double X { get; set; }
    public double Y { get; set; }
    public double Z { get; set; }
}

// ViewModel
public class ViewModel
{
    public ObservableCollection<Data> DataValues { get; set; }
    public int RowSize { get; set; }
    public int ColumnSize { get; set; }
    
    public ViewModel()
    {
        DataValues = new ObservableCollection<Data>();
        
        // Generate sample data for mathematical surface
        double inc = 8.0 / 35;
        for (double x = -4; x < 4; x += inc)
        {
            for (double z = -4; z < 4; z += inc)
            {
                double y = 2 * (x * x) + 2 * (z * z) - 4;
                DataValues.Add(new Data() { X = x, Y = y, Z = z });
            }
        }
        
        RowSize = 35;
        ColumnSize = 35;
    }
}

コードビハインドでの基本的なサーフェスチャート

using Syncfusion.UI.Xaml.Charts;

// Create surface chart
SfSurfaceChart chart = new SfSurfaceChart();
chart.Type = SurfaceType.Surface;
chart.Header = "3D Surface Chart";
chart.Rotate = 30;
chart.Tilt = 15;

// Add data directly using AddPoints
for (double x = -4; x < 4; x += 0.2)
{
    for (double z = -4; z < 4; z += 0.2)
    {
        double y = 2 * (x * x) + 2 * (z * z) - 4;
        chart.Data.AddPoints(x, y, z);
    }
}

chart.RowSize = 40;
chart.ColumnSize = 40;

// Configure axes
chart.XAxis = new SurfaceAxis { Header = "X-Axis" };
chart.YAxis = new SurfaceAxis { Header = "Y-Axis", LabelFormat = "0.0" };
chart.ZAxis = new SurfaceAxis { Header = "Z-Axis" };

// Add color bar
ChartColorBar colorBar = new ChartColorBar();
colorBar.DockPosition = ChartDock.Right;
colorBar.ShowLabel = true;
chart.ColorBar = colorBar;

// Add to grid
grid.Children.Add(chart);

一般的なパターン

パターン 1：数学関数の可視化

3D で数学関数を可視化する場合：

// Generate data for z = sin(x) * cos(y)
for (double x = -Math.PI; x <= Math.PI; x += 0.1)
{
    for (double y = -Math.PI; y <= Math.PI; y += 0.1)
    {
        double z = Math.Sin(x) * Math.Cos(y);
        chart.Data.AddPoints(x, z, y);
    }
}

chart.RowSize = 63;  // Number of x points
chart.ColumnSize = 63;  // Number of y points

パターン 2：上から見た等高線チャート

ユーザーが 3D データの 2D 等高線表示を必要とする場合：

<chart:SfSurfaceChart Type="Contour" 
                     Rotate="0"
                     ItemsSource="{Binding DataValues}"
                     XBindingPath="X" 
                     YBindingPath="Y" 
                     ZBindingPath="Z">
    <chart:SfSurfaceChart.ColorBar>
        <chart:ChartColorBar DockPosition="Right" ShowLabel="True"/>
    </chart:SfSurfaceChart.ColorBar>
</chart:SfSurfaceChart>

パターン 3：ユーザー操作に対応したインタラクティブチャート

ユーザーがチャートを操作する必要がある場合：

<chart:SfSurfaceChart EnableRotation="True" 
                     EnableZooming="True"
                     Type="Surface">
    
</chart:SfSurfaceChart>

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

ユーザーが特定の色を必要とする場合：

<chart:SfSurfaceChart Palette="Custom">
    <chart:SfSurfaceChart.ColorModel>
        <chart:ChartColorModel>
            <chart:ChartColorModel.CustomBrushes>
                <SolidColorBrush Color="Blue"/>
                <SolidColorBrush Color="Lime"/>
                <SolidColorBrush Color="Yellow"/>
                <SolidColorBrush Color="OrangeRed"/>
            </chart:ChartColorModel.CustomBrushes>
        </chart:ChartColorModel>
    </chart:SfSurfaceChart.ColorModel>
</chart:SfSurfaceChart>

パターン 5：ワイヤーフレームの可視化

ユーザーがメッシュ構造を確認する必要がある場合：

chart.Type = SurfaceType.WireframeSurface;
chart.WireframeStroke = new SolidColorBrush(Colors.Green);
chart.WireframeStrokeThickness = 1;

主なプロパティ

基本プロパティ

• Type - サーフェスの種類（Surface、WireframeSurface、Contour、WireframeContour）
• ItemsSource - バインディング対象のデータコレクション
• XBindingPath, YBindingPath, ZBindingPath - X、Y、Z 値のプロパティパス
• RowSize, ColumnSize - データのグリッドサイズ
• Data - AddPoints メソッドを使用する直接的なデータコレクション

表示プロパティ

• Header - チャートのタイトル
• Rotate - 回転角度（0～360）
• Tilt - 表示方向の傾斜角度
• Palette - カラースキーム（Metro、AutumnBrights、FloraHues など）
• ColorBar - 色で値の範囲を示すインジケーター

操作プロパティ

• EnableRotation - マウスドラッグによる回転を許可
• EnableZooming - マウスホイールによるズームを許可
• ZoomLevel - プログラムによるズームレベル

軸のプロパティ

• XAxis, YAxis, ZAxis - 軸の設定オブジェクト
• 各軸でサポートされるプロパティ：Header、LabelFormat、Minimum、Maximum、Interval など

カスタマイズプロパティ

• CameraProjection - Perspective または Orthographic 表示
• LeftWallBrush, BottomWallBrush, BackWallBrush - 壁の色
• WallThickness - 壁の境界線の太さ
• WireframeStroke, WireframeStrokeThickness - ワイヤーフレームの外観
• ApplyGradientBrush - グラデーションによる色付けを有効化
• BrushCount - グラデーションの色段階数

よくある用途

ユースケース 1：科学データの可視化

シナリオ： 研究者が、X、Y 座標と測定された Z 値を含む実験データを可視化する必要があります。

アプローチ： データコレクションで ItemsSource バインディングを使用し、科学表記に適した軸を設定します。プロフェッショナルな見た目にするには、Metro や BlueChrome などの見やすいカラーパレットを使用します。

ユースケース 2：数式関数のプロット

シナリオ： 学生が z = f(x, y) のような 3D 数学関数を可視化する必要があります。

アプローチ： 入れ子のループを使用してプログラムからデータを生成し、直接入力には Data.AddPoints を使用します。探索しやすいよう回転を有効にし、わかりやすさを重視してワイヤーフレームまたは標準のサーフェス型を使用します。

ユースケース 3：地形マッピング

シナリオ： 標高データまたは地形の可視化を表示します。

アプローチ： カラーグラデーションを使った 2D 表現には Contour 型を、3D 地形には Surface 型を使用します。標高レベルに合わせたアースカラーのカスタムパレット（緑、茶、白）を適用します。

ユースケース 4：ヒートマップの可視化

シナリオ： 2 つの次元にわたる強度または値の分布を表示します。

アプローチ： 平面表示には Rotate="0" を指定した Contour 型を使用し、ShowLabel="True" を指定して ColorBar を設定します。また、滑らかな遷移になるよう、適切な BrushCount を指定してグラデーションブラシを適用します。

ユースケース 5：インタラクティブなデータ探索

シナリオ： ユーザーが複雑な 3D データセットを複数の角度から探索する必要があります。

アプローチ： EnableRotation と EnableZooming の両方を有効にし、Rotate と Tilt で初期の見やすい角度を設定します。また、Surface 型を動的に切り替える UI コントロールの追加を検討します。

ユースケース 6：エンジニアリング分析

シナリオ： エンジニアリングシミュレーションにおける応力、温度、または圧力の分布を可視化します。

アプローチ： Surface 型または WireframeSurface 型を使用し、エンジニアリング標準に合わせたカスタムカラーパレット（例：低温・低値には青、高温・高値には赤）を適用します。また、適切な単位と精度で軸を設定します。

---

次のステップ

1. 初期設定について： getting-started.md をお読みください
2. 可視化の種類を選ぶには： surface-types.md をお読みください
3. データ統合について： data-binding.md をお読みください
4. 詳細なカスタマイズについて： 必要に応じて、個別の機能リファレンスを参照してください

SfSurfaceChart では、RowSize と ColumnSize が一貫したグリッド形式のデータが必要です。データポイントの順序は重要です。サーフェスを正しく描画するには、行優先または列優先の形式で整理してください。