syncfusion-aspnetcore-charts

实现 Syncfusion ASP.NET Core 图表

Syncfusion ASP.NET Core 图表组件是一款功能丰富的数据可视化控件，支持 25 种以上的交互式图表类型。它提供丰富的自定义选项、多坐标轴、数据绑定功能，以及缩放、平移、十字线和工具提示等交互功能。

目录

• 何时使用此技能
• 组件概述
• 文档与导航指南
  • 入门
  • 图表类型
  • 数据绑定
  • 坐标轴配置
  • 系列配置
  • 视觉元素
  • 交互功能
  • 高级功能
  • 外观与主题
  • 无障碍与本地化
• 快速入门示例
• 常见模式
  • 多系列图表
  • 带数据标签和标记的图表
  • 组合图表
  • 带缩放和十字线的图表
• 关键配置选项
  • 图表级属性
  • 主坐标轴 (e-chart-primaryxaxis)
  • 系列属性 (e-series)
  • 交互功能
  • 视觉元素选项
• 常见用例
  • 1. 销售仪表板
  • 2. 财务分析
  • 3. 趋势分析
  • 4. 统计分布
  • 5. 性能监控
  • 6. 对比分析
• 故障排除提示
• 相关组件
• API 参考
• 其他资源

何时使用此技能

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

• 在 ASP.NET Core 应用程序中创建任何类型的图表或示意图
• 使用折线图、面积图、柱形图、条形图或其他图表类型可视化数据
• 使用蜡烛图、OHLC 或技术指标展示财务数据
• 实现带有缩放、平移、十字线或选择功能的交互式图表
• 创建多系列图表或组合图表
• 为图表添加数据标签、标记、图例或注释
• 配置坐标轴（数值、日期时间、类别、对数）
• 将图表导出为 PDF、SVG 或图像格式
• 使用多个图表组件构建仪表板
• 实现符合 WCAG 标准的无障碍图表

组件概述

主要功能：

• 25 种以上的图表类型： 折线图、面积图、柱形图、条形图、散点图、气泡图、蜡烛图、OHLC 等
• 数据绑定： JSON 数组、DataManager、OData 服务、动态更新
• 多个坐标轴： 支持使用不同刻度的多个 X 轴和 Y 轴
• 交互功能： 缩放、平移、十字线、跟踪球、选择、工具提示
• 自定义： 主题、颜色、渐变、自定义模板
• 高级功能： 注释、条带线、趋势线、技术指标、误差线
• 导出： PDF、SVG、PNG、JPEG、CSV 格式
• 无障碍： 符合 WCAG 2.0 标准，支持键盘导航和 RTL

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 安装和配置 NuGet 包
• 在 ASP.NET Core 项目中添加图表标记帮助程序
• 注册脚本管理器
• 创建第一个图表
• 基本配置并运行应用程序

图表类型

📄 阅读： references/line-area-charts.md

• 折线图、阶梯折线图、样条曲线图
• 面积图、阶梯面积图、样条面积图
• 堆积面积图和 100% 堆积面积图
• 范围面积图和样条范围面积图
• 各类型的适用场景及完整示例

📄 阅读： references/column-bar-charts.md

• 柱形图和条形图
• 堆积柱形图／条形图和 100% 堆积图
• 范围柱形图
• 垂直图表方向
• 完整的配置示例

📄 阅读： references/financial-charts.md

• 蜡烛图
• OHLC（开盘价-最高价-最低价-收盘价）图
• HiLo 和 HiLoOpenClose 图
• 技术指标（SMA、EMA、RSI、MACD 等）
• 金融数据绑定模式

📄 阅读： references/scatter-bubble-charts.md

• 用于相关性分析的散点图
• 具有三个维度的气泡图
• 数据点自定义和大小设置
• 完整的实现示例

📄 阅读： references/specialized-charts.md

• 箱线图（统计分布）
• 直方图（频率分布）
• 帕累托图（累积分析）
• 瀑布图（连续数值变化）
• 极坐标图和雷达图
• 每种类型的完整示例

数据绑定

📄 阅读： references/data-binding.md

• 绑定到 JSON 对象数组
• DataManager 集成
• OData Web 服务
• 复杂属性绑定
• 动态数据更新
• 本地数据与远程数据

坐标轴配置

📄 阅读： references/axes-configuration.md

• 坐标轴类型：数值、日期时间、类别、对数
• 多坐标轴配置
• 坐标轴交叉和定位
• 反向坐标轴
• 坐标轴标题和样式
• 自定义范围和间隔

📄 阅读： references/axis-labels.md

• 智能标签管理（截断、换行、旋转、隐藏）
• 用于分组的多级标签
• 标签格式和模板
• 自定义标签位置
• 边缘标签处理
• 标签旋转和对齐

系列配置

📄 阅读： references/series-configuration.md

• 添加多个系列
• 系列类型和属性
• 组合图表（混合图表类型）
• 空数据点处理
• 系列自定义
• 性能优化

视觉元素

📄 阅读： references/data-labels.md

• 启用和定位数据标签
• 标签模板和格式
• 从数据源映射文本
• 智能标签排列
• 自定义（字体、颜色、边框）
• 标签连接线

📄 阅读： references/markers-and-legends.md

• 数据标记形状和自定义
• 标记可见性和大小
• 图例定位和布局
• 图例自定义和模板
• 图例分页
• 切换系列可见性

交互功能

📄 阅读： references/zooming-panning.md

• 缩放模式：选择、捏合、鼠标滚轮
• 支持平移
• 缩放工具栏配置
• 重置缩放功能
• 以编程方式控制缩放

📄 阅读： references/crosshair-trackball.md

• 十字准线配置和自定义
• 多系列的追踪球模式
• 工具提示集成
• 线条样式和标签
• 共享工具提示

📄 阅读： references/tooltips.md

• 启用和自定义工具提示
• 工具提示模板
• 系列间共享工具提示
• 格式和样式
• 工具提示动画

📄 阅读： references/selection.md

• 数据点和系列选择
• 选择模式和图案
• 多项选择
• 选择事件
• 自定义视觉反馈

高级功能

📄 阅读： references/annotations-striplines.md

• 图表注释（文本、形状、图像）
• 注释定位与对齐
• 用于突出显示区域的条带线
• 分段和重复模式
• 自定义与样式设置

📄 阅读： references/trendlines-error-bars.md

• 趋势线类型：线性、指数、对数、多项式
• 使用趋势线进行预测
• 用于表示不确定性的误差线
• 误差线模式和类型
• 自定义选项

📄 阅读： references/multiple-panes.md

• 创建多个图表窗格
• 窗格配置与尺寸设置
• 将系列关联到窗格
• 同步坐标轴
• 布局自定义

外观与主题

📄 阅读： references/appearance-customization.md

• 内置主题（Material、Bootstrap、Fabric 等）
• 图表尺寸设置
• 背景与边框自定义
• 渐变颜色与填充
• 图表标题与副标题
• 打印与导出支持

无障碍与本地化

📄 阅读： references/accessibility-localization.md

• 符合 WCAG 2.0 标准
• 键盘导航
• 屏幕阅读器支持
• RTL（从右向左）支持
• 国际化（i18n）
• 图表元素本地化

快速入门示例

下面是创建基本折线图的最小示例：

@* Add to your .cshtml page *@
<ejs-chart id="container" title="Sales Analysis">
    <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="@ViewBag.ChartData" xName="Month" yName="Sales" 
                  type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
        </e-series>
    </e-series-collection>
</ejs-chart>

// In your controller
public IActionResult Index()
{
    ViewBag.ChartData = new object[]
    {
        new { Month = "Jan", Sales = 35 },
        new { Month = "Feb", Sales = 28 },
        new { Month = "Mar", Sales = 34 },
        new { Month = "Apr", Sales = 32 },
        new { Month = "May", Sales = 40 }
    };
    return View();
}

常见模式

多系列图表

<ejs-chart id="container" title="Product Comparison">
    <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="@ViewBag.ProductA" xName="Month" yName="Sales" 
                  name="Product A" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
        </e-series>
        <e-series dataSource="@ViewBag.ProductB" xName="Month" yName="Sales" 
                  name="Product B" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
        </e-series>
    </e-series-collection>
    <e-chart-legendsettings visible="true"></e-chart-legendsettings>
</ejs-chart>

带数据标签和标记的图表

<ejs-chart id="container">
    <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="@ViewBag.Data" xName="X" yName="Y" 
                  type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
            <e-series-marker visible="true" height="10" width="10">
                <e-series-datalabel visible="true" position="Top">
                </e-series-datalabel>
            </e-series-marker>
        </e-series>
    </e-series-collection>
</ejs-chart>

组合图表

<ejs-chart id="container" title="Weather Analysis">
    <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="@ViewBag.Data" xName="Month" yName="Temperature" 
                  name="Temperature" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
        </e-series>
        <e-series dataSource="@ViewBag.Data" xName="Month" yName="Rainfall" 
                  name="Rainfall" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
        </e-series>
    </e-series-collection>
</ejs-chart>

带缩放和十字线的图表

<ejs-chart id="container">
    <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.DateTime" ></e-chart-primaryxaxis>
    <e-chart-zoomsettings enableSelectionZooming="true" enablePinchZooming="true">
    </e-chart-zoomsettings>
    <e-chart-crosshairsettings enable="true">
    </e-chart-crosshairsettings>
    <e-series-collection>
        <e-series dataSource="@ViewBag.Data" xName="Date" yName="Value" 
                  type="@Syncfusion.EJ2.Charts.ChartSeriesType.Area">
        </e-series>
    </e-series-collection>
</ejs-chart>

主要配置选项

图表级属性

• title：图表标题文本
• width/height：图表尺寸
• theme：视觉主题（Material、Bootstrap、Fabric 等）
• background：背景颜色
• palettes：系列的自定义调色板

主坐标轴（e-chart-primaryxaxis）

• valueType：类别、数值、日期时间、对数
• title：坐标轴标题
• minimum/maximum：坐标轴范围
• interval：标签间隔
• labelFormat：标签格式字符串

系列属性（e-series）

• type：图表类型（折线、柱形、条形、面积等）
• dataSource：要可视化的数据
• xName/yName：X 和 Y 值的属性名称
• name：用于图例的系列名称
• fill：自定义颜色
• width：线条/边框宽度

交互功能

• e-chart-zoomsettings：启用缩放功能
• e-chart-crosshairsettings：配置十字线
• e-chart-tooltipsettings：自定义工具提示
• e-chart-legendsettings：配置图例

视觉元素选项

• e-series-marker：数据点标记
• e-series-datalabel：数据点标签
• e-chart-annotations：自定义注释
• e-striplines：突出显示区域

常见用例

1. 销售仪表板

使用带多个系列的柱形图或条形图，比较不同产品、地区或时间段的销售额。添加数据标签以显示精确数值，并添加图例以便于查看。

2. 财务分析

使用蜡烛图或 OHLC 图表可视化股票价格。添加技术指标（SMA、EMA、RSI），并启用缩放以进行详细分析。

3. 趋势分析

使用带趋势线的折线图或样条图展示数据随时间变化的趋势。添加预测以估算未来值。

4. 统计分布

使用箱线图进行统计分析，使用直方图展示频数分布，或使用散点图分析相关性。

5. 性能监控

使用包含多个系列并支持实时数据更新的面积图。添加注释和条带线，标记重要事件或阈值。

6. 对比分析

使用堆积柱形图/条形图或 100% 堆积图，展示部分与整体的关系。使用帕累托图进行累积分析。

故障排除提示

图表未渲染：

• 确认已安装 Syncfusion.EJ2.AspNet.Core NuGet 包
• 确保 _ViewImports.cshtml 中包含 @addTagHelper *, Syncfusion.EJ2
• 检查布局中的 <body> 末尾是否添加了 <ejs-scripts>
• 确认 <head> 中包含脚本引用

未显示数据：

• 确认已正确绑定 dataSource
• 检查 xName 和 yName 是否与属性名称匹配（区分大小写）
• 确保数据不为 null 或空
• 确认坐标轴 valueType 与数据类型匹配

大数据量导致的性能问题：

• 对大型数据集使用 enableDataVirtualization
• 减小标记大小或禁用标记
• 使用更轻量的图表类型（使用 Line 而非 Spline）
• 考虑对数据进行聚合或采样

样式未生效：

• 确认主题设置正确
• 检查 CSS 导入顺序
• 使用浏览器开发者工具检查元素
• 确保自定义样式具有适当的优先级

相关组件

• 3D 图表： 用于三维可视化
• 股票图表： 专为金融数据设计，带导航器
• 范围导航器： 用于按日期筛选的时间轴控件
• 迷你图： 紧凑的内嵌图表
• 子弹图： 用于 KPI 可视化
• 史密斯圆图： 用于电气阻抗可视化

API 参考

如需了解所有 Chart API 属性、方法和事件的完整参考，请参阅：

📄 阅读： references/api-reference.md

• 所有属性的完整列表（配置、数据绑定、显示、交互性、无障碍）
• 所有事件属性及其用途
• 系列和坐标轴配置选项
• 常见属性组合和使用模式
• 官方 Syncfusion 文档链接

其他资源

• 官方 API 文档： Chart API Reference
• 在线演示： ASP.NET Core Chart Demos
• GitHub 示例： ASP.NET Core Examples