syncfusion-aspnetcore-3d-chart

实现 Syncfusion 3D Chart

Syncfusion 3D Chart 是适用于 ASP.NET Core 应用程序的强大数据可视化组件。它全面支持多种图表类型、数据绑定、坐标轴配置和丰富的交互功能。

何时使用此技能

在以下情况下使用此技能：

• 在 ASP.NET Core Razor 应用程序中呈现 3D 图表
• 绑定本地、远程或 OData 数据源
• 配置多种图表类型（条形图、柱形图、堆积图变体）
• 自定义坐标轴、图例和数据标签
• 添加样式和外观自定义
• 实现用户交互（选择、工具提示）
• 导出或打印图表数据
• 提升图表的无障碍访问能力

组件概览

Syncfusion 3D Chart（<ejs-chart3d>）是一个标记帮助程序组件，具有以下特性：

• 呈现支持鼠标和触控操作的交互式 3D 可视化效果
• 支持多个系列和数据点，并智能定位标签
• 提供可配置的图例、数据标签和工具提示
• 支持选择数据点、系列或簇
• 通过自定义调色板和 CSS 提供丰富的样式设置

主要功能：

• 支持多种图表类型和堆积选项
• 本地、远程和 OData 数据绑定
• 响应式设计和 RTL 支持
• 导出为 PNG/SVG 格式
• 打印功能
• 符合 WCAG 无障碍访问标准

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 安装和 NuGet 包设置
• ASP.NET Core 项目配置
• 标记帮助程序注册
• 脚本和样式引用
• 使用精简示例呈现基本图表
• 初始数据绑定设置

数据绑定与系列配置

📄 阅读： references/data-binding-series.md

• 将本地 JSON 数据绑定到系列
• 使用 DataManager 进行远程数据绑定
• 配置 OData 适配器
• 处理空数据点
• 映射 XName 和 YName 属性
• 对远程数据进行查询筛选

图表类型与系列

📄 阅读： references/chart-types-series.md

• 实现条形图类型
• 设置柱形图类型
• 堆积条形图和堆积柱形图
• 堆积 100% 条形图和柱形图变体
• 系列可见性和数据映射
• 特定类型的配置

坐标轴与刻度配置

📄 阅读： references/axes-configuration.md

• 配置分类坐标轴和标签
• 配置数值坐标轴和范围
• 日期时间坐标轴绑定和格式设置
• 为指数数据配置对数坐标轴
• 在单个图表中使用多个窗格
• 坐标轴自定义和标签定位

数据标签与图例

📄 阅读： references/data-labels-legends.md

• 启用数据标签并设置其位置
• 数据标签模板和格式设置
• 图例位置（顶部、底部、左侧、右侧）
• 使用坐标自定义图例位置
• 图例对齐和反向选项
• 标签可见性和重叠处理

样式与外观

📄 阅读： references/styling-appearance.md

• 为系列自定义调色板
• 根据数据进行点级颜色映射
• 自定义图表背景和边框
• 自定义单个数据点
• 边框样式和图表尺寸
• 主题和配色方案配置

用户交互与事件

📄 阅读： references/user-interactions.md

• 选择模式：Point、Series 和 Cluster
• 突出显示点选结果并处理相关事件
• 系列选择行为
• 启用并配置工具提示
• 固定与跟踪式工具提示定位
• 工具提示格式模板和样式
• 处理选择事件

高级功能

📄 阅读： references/advanced-features.md

• 打印功能配置
• 导出为 PNG/SVG 格式
• 无障碍功能与 WCAG 合规性
• 事件处理（PointRender、TextRender、SelectionComplete）
• 大型数据集的性能优化
• 跨浏览器兼容性

快速入门示例

以下是一个使用数据渲染 3D 柱状图的最简示例：

<ejs-chart3d id="container" title="Product Sales" enableRotation="true" rotation="7" tilt="10" depth="100">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category">
    </e-chart3d-primaryxaxis>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.chartData" 
                          xName="month" 
                          yName="sales" 
                          type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column">
        </e-chart3d-series>
    </e-chart3d-series-collection>
    <e-chart3d-legendsettings position="@Syncfusion.EJ2.Charts.LegendPosition.Bottom"></e-chart3d-legendsettings>
    <e-chart3d-tooltipsettings enable="true"></e-chart3d-tooltipsettings>
</ejs-chart3d>

// Controller
public class HomeController : Controller
{
    public IActionResult Index()
    {
        List<ChartData> chartData = new List<ChartData>
        {
            new ChartData { month = "Jan", sales = 35 },
            new ChartData { month = "Feb", sales = 28 },
            new ChartData { month = "Mar", sales = 34 }
        };
        ViewBag.chartData = chartData;
        return View();
    }
}

public class ChartData
{
    public string month { get; set; }
    public double sales { get; set; }
}

常见模式

模式 1：多系列对比

可视化多个数据系列以进行对比时：

1. 定义多个 <e-chart3d-series> 元素，并指定不同的数据源
2. 使用自定义调色板设置对比色
3. 启用图例以标识系列
4. 使用图例点击事件切换系列的可见性

模式 2：交互式数据探索

启用用户与数据的交互时：

1. 设置 SelectionMode="@Syncfusion.EJ2.Charts.Chart3DSelectionMode.Point"，以便单独选择数据点
2. 启用工具提示并使用自定义格式模板
3. 处理 PointRender 事件以实现动态样式
4. 实现选择事件回调以进行更新

模式 3：实时数据更新

显示动态变化的数据时：

1. 将数据绑定到动态数据源
2. 更新数据集合并调用刷新
3. 对于大型数据集，可考虑使用远程数据绑定
4. 根据数据范围实现合适的坐标轴缩放

模式 4：多窗格显示

对比不同尺度的数据时：

1. 在图表中定义多个行，并设置行跨度
2. 通过索引将系列分配到指定行
3. 为每一行配置独立坐标轴
4. 使用同步的 x 轴进行对齐

关键属性速查

属性	用途	常见值
type	图表类型	Column、Bar、StackingColumn、StackingBar、StackingColumn100、StackingBar100
xName	X 轴数据字段	数据对象中的字段名
yName	Y 轴数据字段	数据对象中的字段名
dataSource	系列数据	对象列表或 DataManager
visible	系列可见性	true、false
cornerRadius	条形/柱形圆角	0-10（像素）
marker.visible	显示数据点标记	true、false
dataLabel.visible	显示数据标签	true、false
tooltip.enable	启用工具提示	true、false
selectionMode	选择行为	None、Point、Series、Cluster
background	图表背景颜色	十六进制颜色或命名颜色
wallColor	3D 背面颜色	十六进制颜色

获取帮助

有关详细示例和高级用法，请参阅上面的各个参考指南。每份指南都涵盖特定功能领域，并提供完整的代码示例、边缘情况和故障排除内容。

---

后续步骤：

• 从“入门”开始，设置你的第一个图表
• 根据功能需求选择相关参考指南
• 每个参考文件均为独立文档，包含所有必要示例