syncfusion-wpf-3d-chart

实现 Syncfusion WPF 3D 图表

全面介绍如何实现 Syncfusion® WPF 3D 图表（SfChart3D）控件，以便在 Windows Presentation Foundation 应用程序中创建交互式 3D 数据可视化。本技能涵盖 3D 图表的设置、配置、系列类型、坐标轴、装饰元素、外观自定义和交互功能。

何时使用此技能

在需要以下功能时使用此技能：

• 创建 3D 可视化效果，使用 Column、Bar、Line、Area、Scatter 或 Circular 系列
• 在 3D 空间中绘制数据，使用 X、Y 和 Z 坐标以及深度坐标轴
• 实现交互式 3D 图表，支持旋转、倾斜和透视控制
• 配置 3D 系列，支持 11 种以上图表类型（Column、Bar、Line、Scatter、Area、堆积变体、Pie、Doughnut）
• 设置多个坐标轴（Numerical、Category、DateTime、TimeSpan、Logarithmic）
• 构建曼哈顿图表，在深度坐标轴上显示多个系列
• 添加数据装饰元素，包括 3D 标签、标记和定位
• 自定义外观，包括调色板、颜色和主题
• 启用用户交互，支持动态旋转、选择和扇区分离
• 优化大型 3D 数据集的性能

组件概述

SfChart3D 控件为 WPF 应用程序提供全面的 3D 图表功能，可在三维视图中可视化二维数据，并支持完整的旋转操作。

主要功能：

• 11 种以上系列类型： Column、Bar、Line、Scatter、Area、堆积变体、Pie、Doughnut
• 3D 可视化： 通过旋转、倾斜和透视角度优化数据视图
• 深度坐标轴（Z 轴）： 使用 X、Y、Z 坐标进行真正的 3D 绘图
• 曼哈顿图表： 在深度坐标轴上显示多个系列
• 多种坐标轴类型： Numerical、Category、DateTime、TimeSpan、Logarithmic
• 交互功能： 动态旋转、选择、扇区分离
• 数据装饰元素： 3D 标签、标记和定位
• 丰富的自定义选项： 调色板、颜色、主题和样式
• 数据绑定： 全面支持 MVVM 和 ObservableCollection
• 动画： 系列加载和数据更新动画

文档与导航指南

入门

📄 阅读： 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 配置柱形图（ColumnSeries3D）
• 条形图（BarSeries3D）
• 折线图（LineSeries3D）
• 配置点大小的散点图（ScatterSeries3D）
• 面积图（AreaSeries3D）
• 堆积图（StackingColumnSeries3D、StackingColumn100Series3D、StackingBarSeries3D、StackingBar100Series3D）
• 圆形图（PieSeries3D、DoughnutSeries3D）
• 圆形图功能（系数、半圆形、动态扇区分离）
• 系列选择和 Interior 属性
• 各系列类型的适用场景

坐标轴配置

📄 阅读： references/axes-configuration.md

• 坐标轴概述（PrimaryAxis、SecondaryAxis、DepthAxis）
• 用于数值数据的 NumericalAxis3D
• 用于类别数据的 CategoryAxis3D
• 用于时间序列数据的 DateTimeAxis3D
• 用于时间间隔数据的 TimeSpanAxis3D
• 用于指数数据的 LogarithmicAxis3D
• 使用 ZBindingPath 设置深度坐标轴（Z 轴）
• 使用 X、Y、Z 坐标进行真正的 3D 绘图
• 在深度坐标轴上显示多个系列的曼哈顿图表
• 坐标轴自定义（标题、间隔、范围）
• 坐标轴配置问题的故障排除

数据装饰

📄 阅读： 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 柱状图的最简示例：

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 绘图

使用全部三个维度绘制数据：

<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 - 数据标签配置

间距属性（柱状图／条形图）

• Spacing - 数据段之间的间距（0-1）
• SegmentSpacing - 系列之间的间距（0-1）

圆形系列属性

• CircleCoefficient - 内圆大小（饼图）
• DoughnutCoefficient - 内圆大小（圆环图）
• StartAngle - 半圆图的起始角度
• EndAngle - 半圆图的结束角度
• ExplodeOnMouseClick - 启用点击分离
• ExplodeIndex - 要分离的数据段索引
• ExplodeAll - 分离所有数据段

常见用例

用例 1：财务数据可视化

以 3D 形式可视化多个产品的季度收入：

• 使用 ColumnSeries3D 和 DepthAxis 比较产品
• 对季度和产品应用 CategoryAxis3D
• 启用 Rotation 以切换不同视角
• 添加数据标签以显示确切数值

用例 2：科学数据分析

使用 X、Y、Z 坐标绘制科学测量数据：

• 使用 ScatterSeries3D 和 ZBindingPath 绘制 3D 点
• 为三个轴应用 NumericalAxis3D
• 启用动态旋转以探索数据
• 使用自定义标记来可视化数据点

用例 3：市场份额仪表板

以 3D 形式展示市场份额分布：

• 使用 PieSeries3D 或 DoughnutSeries3D 展示比例数据
• 应用自定义调色板以使用品牌颜色
• 启用 ExplodeOnMouseClick 以增加交互性
• 添加工具提示以显示详细信息

用例 4：时间序列比较

以 3D 形式比较多个时间序列数据集：

• 使用 LineSeries3D 和 Manhattan chart 样式
• 为基于时间的 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）

如需详细的故障排除信息和高级场景，请参阅上文中的特定参考文档。