syncfusion-aspnetcore-accumulation-chart

实现 Syncfusion ASP.NET Core 累积图表

一份关于实现 Syncfusion 的 ASP.NET Core 累积图表组件的综合指南。该组件使用可缩放矢量图形（SVG）呈现圆形数据可视化图表，包括饼图、圆环图、金字塔图和漏斗图。

目录

• 何时使用此指南
• 组件概览
• 文档与导航指南
  • 入门
  • 图表类型和变体
  • 数据可视化功能
  • 数据处理
  • 高级功能
  • 无障碍功能
• 快速入门示例
  • 1. 安装软件包
  • 2. 注册标记帮助程序（~/Pages/_ViewImports.cshtml）
  • 3. 添加脚本（~/Pages/Shared/_Layout.cshtml）
  • 4. 创建饼图（~/Pages/Index.cshtml）
  • 5. 定义数据模型（~/Pages/Index.cshtml.cs 或单独的类）
• 常见模式
  • 模式 1：带中心标签的圆环图
  • 模式 2：带智能标签和工具提示的饼图
  • 模式 3：包含小数值的分组数据
  • 模式 4：支持导出的漏斗图
• API 参考
  • AccumulationChart 类
  • AccumulationSeries 类
  • AccumulationDataLabelSettings 类
  • AccumulationChartLegendSettings 类
  • AccumulationChartTooltipSettings 类
  • 可用枚举
  • 相关类
• 关键属性
  • AccumulationChart 属性
  • AccumulationSeries 属性
  • DataLabel 属性
• 常见用例
  • 1. 市场份额分析
  • 2. 预算分配
  • 3. 调查结果
  • 4. 销售漏斗跟踪
  • 5. 组织层级结构
  • 6. 移动仪表板
  • 7. 报告生成
  • 8. 实时监控
• 相关组件
• 浏览器支持
• 其他资源

何时使用此指南

在以下情况下使用此指南：

• 在 ASP.NET Core 应用程序中创建饼图、圆环图、金字塔图或漏斗图
• 可视化比例数据或百分比分布
• 使用金字塔图或漏斗图显示层级数据
• 为累积图表添加数据标签、工具提示和图例
• 实现交互功能（扇区分离、选择、下钻）
• 处理图表中的分组数据或空数据点
• 导出或打印累积图表
• 确保图表符合无障碍要求（WCAG 2.2）
• 实时动态更新图表数据
• 使用主题、颜色和渐变自定义图表外观

组件概览

AccumulationChart 是一种圆形图形组件，可将数据划分为多个扇区，以展示数值比例。它支持：

• 图表类型： 饼图（包括圆环图变体）、金字塔图、漏斗图
  • 注意： 圆环图是通过在饼图上设置 innerRadius 实现的，并非单独的类型
• 智能标签： 自动定位标签，防止重叠
• 分组： 根据数值或数量合并较小的数据点
• 半圆图： 自定义半饼图／半圆环图的起始角度和结束角度
• 图例： 显示额外的数据点信息
• 工具提示： 交互式数据点详情
• 空数据点： 妥善处理缺失数据
• 无障碍支持： 完全符合 WCAG 2.2 A 级和 AA 级要求
• 导出： PNG、JPEG、SVG、PDF 格式
• 打印： 支持直接通过浏览器打印

文档与导航指南

入门

📄 阅读： references/getting-started.md

阅读时机： 首次设置累积图表，或需要完整的安装和基本实现指南时。

你将了解：

• 先决条件和系统要求
• 安装 Syncfusion NuGet 包
• 注册标记帮助程序和脚本资源
• 创建第一个饼图／圆环图
• 基本数据绑定（dataSource、xName、yName）
• CSS 主题导入和脚本管理器设置
• 运行和测试图表
• 完整的最简可运行示例

图表类型和变体

📄 阅读： references/chart-types.md

阅读时机： 需要实现特定图表类型（饼图、圆环图、金字塔图、漏斗图），或自定义图表几何形状和外观时。

你将了解：

• 饼图的实现和配置
• 带内半径和中心标签的圆环图
• 自定义金字塔图的宽度、间距和颈部
• 漏斗图的颈部尺寸
• 所有图表类型的半径自定义
• 半饼图／半圆环图的起始角度和结束角度
• 扇区分离（单个和多个数据点）
• 图表中心定位
• 每种类型的完整代码示例

数据可视化功能

📄 阅读： references/data-visualization.md

阅读时机： 需要通过数据标签、工具提示、图例、颜色或自定义样式增强图表时。

你将了解：

• 数据标签的可见性、位置和模板
• 用于防止重叠的智能标签
• 外部标签的连接线
• 工具提示配置和模板
• 图例的位置、对齐方式和自定义设置
• 标题和副标题配置
• 数据点颜色和渐变填充
• 从数据源映射文本
• 边框和边距自定义
• 完整的样式模式

数据处理

📄 阅读： references/data-handling.md

阅读时机： 处理复杂数据场景时，例如对小数值进行分组、处理缺失数据或动态更新图表。

你将了解：

• 按数值或数量阈值对数据点分组
• 分组设置（阈值、模式、颜色、名称）
• 空数据点处理（null／undefined 值）
• 空数据点模式（Zero、Drop、Average、Gap）
• 动态数据更新和实时场景
• 数据源绑定模式
• 数据排序和排列
• 边缘情况和故障排除

高级功能

📄 阅读： references/advanced-features.md

阅读时机： 实现注释、导出／打印功能，或从 EJ1 迁移到 EJ2 时。

你将了解：

• 图表注释（文本、形状、图像）
• 注释定位（坐标、区域、对齐方式）
• 导出为图像格式（PNG、JPEG、SVG）
• 导出为 PDF
• 打印功能和自定义设置
• EJ1 到 EJ2 的 API 迁移指南
• 性能优化提示
• 复杂实现模式

无障碍访问

📄 阅读： references/accessibility.md

阅读时机： 为残障用户制作无障碍图表，或确保符合 WCAG 2.2 标准时。

你将了解：

• 符合 WCAG 2.2 A 级和 AA 级标准的功能
• 键盘导航（Tab、方向键、Enter）
• ARIA 属性和角色
• 屏幕阅读器支持和播报
• 高对比度主题支持
• 焦点指示器和视觉反馈
• 颜色对比度要求
• 无障碍配色方案
• 使用辅助技术进行测试
• 完整的无障碍图表实现

快速入门示例

以下是在 ASP.NET Core 中呈现饼图的最简示例：

1. 安装程序包

Install-Package Syncfusion.EJ2.AspNet.Core -Version <your_version_here>

2. 注册 Tag Helper（~/Pages/_ViewImports.cshtml）

@addTagHelper *, Syncfusion.EJ2

3. 添加脚本（~/Pages/Shared/_Layout.cshtml）

<head>
    
    <script src=""></script>
</head>
<body>
    
    <ejs-scripts></ejs-scripts>
</body>

4. 创建饼图（~/Pages/Index.cshtml）

@{
    List<PieChartData> chartData = new List<PieChartData>
    {
        new PieChartData { xValue = "Chrome", yValue = 37 },
        new PieChartData { xValue = "Firefox", yValue = 22 },
        new PieChartData { xValue = "Safari", yValue = 19 },
        new PieChartData { xValue = "Edge", yValue = 12 },
        new PieChartData { xValue = "Others", yValue = 10 }
    };
}

<ejs-accumulationchart id="pieChart" enableSmartLabels="true" title="Browser Market Share" subTitle="Pie chart showing browser usage distribution">
    <e-accumulation-series-collection>
        <e-accumulation-series dataSource="@chartData" xName="xValue" yName="yValue" name="Browsers">
            <e-accumulationseries-datalabel visible="true" position="Outside" name="text" format="p0">
                <e-connectorstyle type="Curve" length="20"></e-connectorstyle>
                <e-font fontWeight="600"></e-font>
            </e-accumulationseries-datalabel>
        </e-accumulation-series>
    </e-accumulation-series-collection>
    <e-accumulationchart-legendsettings position="Bottom" alignment="Center" toggleVisibility="true">
    </e-accumulationchart-legendsettings>
    <e-accumulationchart-tooltipsettings enable="true" format="${point.x}: <b>${point.y}%</b>" header="Browser">
    </e-accumulationchart-tooltipsettings>
</ejs-accumulationchart>

要点：

• title 和 subTitle 是 <ejs-accumulationchart> 上的直接属性，不是子标签
• <e-font> 是 <e-accumulationseries-datalabel> 内的正确子标签，而不是 <e-datalabelfont>
• 使用 format="p0" 可显示不带小数的百分比

5. 定义数据模型（~/Pages/Index.cshtml.cs 或单独的类）

public class PieChartData
{
    public string xValue { get; set; }
    public double yValue { get; set; }
}

结果： 一个显示浏览器使用情况统计信息的基本饼图。

常见模式

模式 1：带中心标签的圆环图/甜甜圈图

<ejs-accumulationchart id="container">
    <e-accumulation-series-collection>
        <e-accumulation-series dataSource="chartData" xName="x" yName="y" innerRadius="65%">
            
        </e-accumulation-series>
    </e-accumulation-series-collection>
    <e-accumulationchart-centerlabel text="Mobile<br>Browsers<br>Statistics">
    </e-accumulationchart-centerlabel>
    <e-accumulationchart-legendsettings visible="false">
    </e-accumulationchart-legendsettings>
</ejs-accumulationchart>

使用场景： 仪表板 KPI，在中心文本中显示总值。

模式 2：带智能标签和工具提示的饼图

<ejs-accumulationchart id="smartLabelChart" enableSmartLabels="true" title="Market Share" subTitle="Distribution by browser">
    <e-accumulation-series-collection>
        <e-accumulation-series dataSource="@chartData" xName="xValue" yName="yValue">
            <e-accumulationseries-datalabel visible="true" 
                                          position="Outside" 
                                          name="text"
                                          format="p0">
                <e-connectorstyle type="Curve" length="20"></e-connectorstyle>
                <e-font fontWeight="600"></e-font>
            </e-accumulationseries-datalabel>
        </e-accumulation-series>
    </e-accumulation-series-collection>
    <e-accumulationchart-legendsettings position="Bottom" alignment="Center" toggleVisibility="true">
    </e-accumulationchart-legendsettings>
    <e-accumulationchart-tooltipsettings enable="true" format="${point.x}: <b>${point.y}%</b>" header="Browser">
    </e-accumulationchart-tooltipsettings>
</ejs-accumulationchart>

使用场景： 防止包含许多小扇区的图表中标签重叠。

模式 3：包含小数值的分组数据

<ejs-accumulationchart id="groupedChart">
    <e-accumulation-series-collection>
        <e-accumulation-series dataSource="@chartData" 
                              xName="xValue" 
                              yName="yValue"
                              groupTo="11">
        </e-accumulation-series>
    </e-accumulation-series-collection>
</ejs-accumulationchart>

使用场景： 将低于 11% 的数值合并为一个“其他”组。

模式 4：带导出的漏斗图

<button id="exportBtn">Export as PNG</button>

<ejs-accumulationchart id="funnelChart">
    <e-accumulation-series-collection>
        <e-accumulation-series dataSource="@chartData" 
                              xName="xValue" 
                              yName="yValue" 
                              type="Funnel"
                              neckWidth="15%"
                              neckHeight="18%">
        </e-accumulation-series>
    </e-accumulation-series-collection>
</ejs-accumulationchart>

<script>
    document.getElementById('exportBtn').onclick = function() {
        var chart = document.getElementById('funnelChart').ej2_instances[0];
        chart.export('PNG', 'funnel-chart');
    };
</script>

使用场景： 销售漏斗可视化并导出图像。

API 参考

AccumulationChart 类

表示主要的累积图表组件。所有属性都在 Syncfusion.EJ2.Charts 命名空间中定义。

构造函数

public AccumulationChart()

核心属性

属性	类型	默认值	描述	API 参考
Accessibility	AccumulationAccessibility	null	用于改善累积图表元素可访问性的选项	AccumulationAccessibility
Annotations	List<AccumulationAnnotationSettings>	null	用于突出显示特定数据点的注释	AccumulationAnnotationSettings
Background	string	null	背景颜色（十六进制或 rgba）	-
BackgroundImage	string	null	背景图片 URL	-
Border	AccumulationChartBorder	null	图表边框配置	AccumulationChartBorder
Center	AccumulationChartCenter	null	饼图/圆环图的中心位置（x、y 百分比）	AccumulationChartCenter
CenterLabel	AccumulationChartCenterLabel	null	圆环图的中心标签配置	AccumulationChartCenterLabel
DataSource	object	null	图表数据集合	-
EnableAnimation	bool	true	启用图表加载动画	-
EnableBorderOnMouseMove	bool	true	启用鼠标悬停边框	-
EnableExport	bool	true	启用导出为 JPEG、PNG、SVG、PDF、XLSX、CSV	-
EnableHtmlSanitizer	bool	false	清理图表内容中不可信的 HTML	-
EnablePersistence	bool	false	在页面重新加载后保留组件状态	-
EnableRtl	bool	false	启用从右到左渲染	-
EnableSmartLabels	bool	true	自动排列标签以避免重叠	-
FocusBorderColor	string	-	用于可访问性的焦点边框颜色	-
FocusBorderMargin	double	0	焦点边框边距	-
FocusBorderWidth	double	1.5	焦点边框宽度	-
Height	string	null	图表高度（例如："450px"、"100%"）	-
HighlightColor	string	""	悬停时突出显示数据点的颜色	-
HighlightMode	AccumulationHighlightMode	None	突出显示模式：None 或 Point	AccumulationHighlightMode
HighlightPattern	SelectionPattern	None	用于突出显示系列/数据点的图案	SelectionPattern
IsMultiSelect	bool	false	启用多个数据点选择（需要 selectionMode=Point）	-
LegendSettings	AccumulationChartLegendSettings	null	图例配置	AccumulationChartLegendSettings
Locale	string	""	文化/本地化覆盖设置（默认值：en-US）	-
Margin	AccumulationChartMargin	null	图表边距（左、右、上、下）	AccumulationChartMargin
NoDataTemplate	object	null	图表为空状态的模板	-
SelectedDataIndexes	object	null	初始选中的数据点索引	-
SelectionMode	AccumulationSelectionMode	None	选择模式：None 或 Point	AccumulationSelectionMode
SelectionPattern	SelectionPattern	None	用于选中系列/数据点的图案	SelectionPattern
Series	List<AccumulationSeries>	null	图表系列集合	AccumulationSeries
SubTitle	string	null	图表副标题文本	-
SubTitleStyle	AccumulationChartSubTitleStyle	null	副标题字体和样式	AccumulationChartSubTitleStyle
Theme	AccumulationTheme	Material	视觉主题	AccumulationTheme
Title	string	null	图表标题文本	-
TitleStyle	AccumulationChartTitleStyleSettings	null	标题字体和样式	AccumulationChartTitleStyleSettings
Tooltip	AccumulationChartTooltipSettings	null	工具提示配置	AccumulationChartTooltipSettings
UseGroupingSeparator	bool	false	数字使用千位分隔符	-
Width	string	null	图表宽度（例如："100px"、"100%"）	-

事件属性

事件	类型	描述
AfterExport	string	导出完成后触发
AnimationComplete	string	动画完成后触发
AnnotationRender	string	注释渲染前触发
BeforeExport	string	开始导出前触发
BeforePrint	string	开始打印前触发
BeforeResize	string	窗口调整大小前触发
ChartDoubleClick	string	双击时触发
ChartMouseClick	string	单击鼠标时触发
ChartMouseDown	string	按下鼠标时触发
ChartMouseLeave	string	光标离开时触发
ChartMouseMove	string	移动鼠标或悬停时触发
ChartMouseUp	string	松开鼠标时触发
LegendClick	string	单击图例后触发
LegendRender	string	图例渲染前触发
Load	string	图表加载前触发
Loaded	string	图表加载后触发
PointClick	string	单击数据点时触发
PointMove	string	将鼠标悬停在数据点上时触发
PointRender	string	数据点渲染前触发
Resized	string	窗口调整大小完成后触发
SelectionComplete	string	选择完成后触发
SeriesRender	string	系列渲染前触发
TextRender	string	数据标签渲染前触发
TooltipRender	string	工具提示渲染前触发

AccumulationSeries 类

表示累积图中的数据系列。

属性

属性	类型	默认值	描述	API 参考
DataSource	object[]	null	系列数据集合	-
XName	string	null	X 值（类别）的字段名称	-
YName	string	null	Y 值（数值数据）的字段名称	-
Type	string	"Pie"	系列类型：Pie、Pyramid、Funnel（Doughnut = Pie + innerRadius）	-
Radius	string	"80%"	图表半径（百分比或像素）	-
InnerRadius	string	"0%"	用于环形效果的内半径（百分比）	-
StartAngle	double	0	起始角度（度，0-360）	-
EndAngle	double	360	结束角度（度，0-360）	-
Explode	bool	false	启用点击分离扇区	-
ExplodeIndex	double	null	预先分离的数据点索引	-
ExplodeOffset	string	"10%"	分离的扇区移动距离	-
GroupTo	string	null	分组阈值（数值或百分比）	-
GroupMode	string	"Value"	分组模式：Value 或 Point	-
GroupName	string	"Others"	分组数据点的名称	-
PyramidMode	string	"Linear"	金字塔模式：Linear 或 Surface	-
FunnelMode	string	"Standard"	漏斗模式：Standard 或 Trapezoidal	-
NeckWidth	string	"20%"	漏斗颈部宽度（百分比）	-
NeckHeight	string	"20%"	漏斗颈部高度（百分比）	-
Width	string	"80%"	金字塔/漏斗宽度（百分比）	-
Height	string	"80%"	金字塔/漏斗高度（百分比）	-
GapRatio	double	0	金字塔/漏斗分段之间的间距	-
Palettes	string[]	null	自定义调色板	-
PointColorMapping	string	null	数据点颜色的字段名称	-
PointRender	string	null	数据点渲染前触发的事件	-
DataLabel	AccumulationDataLabelSettings	null	数据标签配置	AccumulationDataLabelSettings
EmptyPointSettings	AccumulationChartEmptyPointSettings	null	空数据点处理方式	AccumulationChartEmptyPointSettings
ConnectorStyle	AccumulationChartConnector	null	连接线样式	AccumulationChartConnector
Border	AccumulationChartBorder	null	系列边框样式	AccumulationChartBorder
LegendShape	LegendShape	SeriesType	图例图标形状	LegendShape
TooltipMappingName	string	null	自定义工具提示内容的字段	-

AccumulationDataLabelSettings 类

配置显示在数据点上的数据标签。

属性

属性	类型	默认值	描述
Visible	bool	false	显示/隐藏数据标签
Position	string	"Outside"	标签位置：Inside 或 Outside
Name	string	null	标签文本的字段名称
Template	string	null	标签的 HTML 模板
Format	string	null	数字格式（例如 "p1"、"n2"、"c2"）
TextWrap	string	"Normal"	文本换行方式：Normal、Wrap、AnyWhere
MaxWidth	double	null	标签最大宽度（像素）
Font	object	null	字体配置
Border	object	null	标签边框配置
ConnectorStyle	string	"Line"	连接线类型：Line 或 Curve

AccumulationChartLegendSettings 类

配置图表的图例。

属性

属性	类型	默认值	描述	API 参考
Visible	bool	false	显示/隐藏图例	-
Position	string	"Right"	图例位置：Top、Bottom、Left、Right	LegendPosition
Alignment	string	"Center"	图例对齐方式：Near、Center、Far	Alignment
Width	string	"0"	图例宽度（像素或百分比）	-
Height	string	"0"	图例高度（像素或百分比）	-
Reverse	bool	false	反转图例项顺序	-
Layout	string	"Vertical"	布局：Vertical 或 Horizontal	-
MaximumColumns	double	null	水平布局中的最大列数	-
ShapeWidth	double	15	图例形状宽度	-
ShapeHeight	double	15	图例形状高度	-
Title	object	null	图例标题配置	-
Template	string	null	图例的自定义 HTML 模板	-
TextWrap	string	"Normal"	文本换行：Normal 或 Wrap	-
MaximumLabelWidth	double	null	图例项标签的最大宽度	-
EnablePages	bool	false	为较大的图例启用分页	-
ToggleVisibility	bool	true	点击图例时切换数据点的可见性	-

AccumulationChartTooltipSettings 类

配置图表的工具提示。

属性

属性	类型	默认值	描述
Enable	bool	false	启用/禁用工具提示
Header	string	null	自定义工具提示标题
Format	string	null	工具提示文本格式
Template	string	null	工具提示的 HTML 模板
Fill	string	null	工具提示背景颜色
Border	object	null	工具提示边框配置
TextStyle	object	null	工具提示文本样式
Location	object	null	固定工具提示位置（x、y）
Opacity	double	1	工具提示不透明度
Shared	bool	false	显示共享工具提示

可用枚举

枚举	值	描述
AccumulationTheme	Fabric, FabricDark, Bootstrap4, Bootstrap, BootstrapDark, HighContrastLight, HighContrast, Tailwind, TailwindDark, Bootstrap5, Bootstrap5Dark, Fluent, FluentDark, Fluent2, Fluent2Dark, Fluent2HighContrast, Material3, Material3Dark, Material, MaterialDark	图表主题选项
AccumulationHighlightMode	None, Point	高亮行为
AccumulationSelectionMode	None, Point	选择行为
SelectionPattern	None, Chessboard, Dots, DiagonalForward, Crosshatch, Pacman, DiagonalBackward, Grid, Turquoise, Star, Triangle, Circle, Tile, HorizontalDash, VerticalDash, Rectangle, Box, VerticalStripe, HorizontalStripe, Bubble	高亮/选择的图案选项
LegendShape	Circle, Rectangle, Triangle, Diamond, Cross, HorizontalLine, VerticalLine, Pentagon, InvertedTriangle, SeriesType	图例图标形状

相关类

类	命名空间	说明	API 参考
AccumulationChartBorder	Syncfusion.EJ2.Charts	边框配置	AccumulationChartBorder
AccumulationChartCenter	Syncfusion.EJ2.Charts	中心位置	AccumulationChartCenter
AccumulationChartMargin	Syncfusion.EJ2.Charts	边距配置	AccumulationChartMargin
AccumulationChartConnector	Syncfusion.EJ2.Charts	连接线样式	AccumulationChartConnector
AccumulationChartEmptyPointSettings	Syncfusion.EJ2.Charts	空数据点处理	AccumulationChartEmptyPointSettings
AccumulationAnnotationSettings	Syncfusion.EJ2.Charts	注释配置	AccumulationAnnotationSettings
AccumulationAccessibility	Syncfusion.EJ2.Charts	无障碍选项	AccumulationAccessibility

关键属性

AccumulationChart 属性

属性	类型	说明	示例
enableSmartLabels	boolean	自动排列标签以避免重叠	true
center	object	图表中心的位置（x、y 百分比）	{x: "50%", y: "50%"}
legendSettings	object	图例配置（位置、对齐方式）	{visible: true, position: 'Right'}
tooltipSettings	object	工具提示配置和模板	{enable: true, format: '${point.x}: ${point.y}'}
title	string	图表标题文本	"Browser Market Share"
height	string	图表高度	"450px"
width	string	图表宽度	"100%"
theme	string	视觉主题	"Material"
background	string	背景颜色	"#ffffff"

AccumulationSeries 属性

属性	类型	说明	示例
type	string	图表类型：Pie、Pyramid、Funnel（Doughnut = Pie + innerRadius）	"Pie"
dataSource	object[]	数据集合	@chartData
xName	string	类别标签对应的字段	"xValue"
yName	string	数值对应的字段	"yValue"
radius	string	图表半径（百分比或像素）	"80%"
innerRadius	string	环形图的内半径（百分比）	"40%"
startAngle	number	起始角度（度）	0
endAngle	number	结束角度（度）	360
explode	boolean	启用单击扇区分离效果	true
explodeIndex	number	预先分离扇区的索引	2
explodeOffset	string	分离距离	"10%"
groupTo	string	分组阈值	"11"
groupMode	string	分组依据：Point、Value	"Value"

DataLabel 属性

属性	类型	说明	示例
visible	boolean	显示/隐藏数据标签	true
position	string	内部或外部	"Outside"
name	string	标签文本对应的字段名	"text"
template	string	自定义 HTML 模板	"<div>${point.x}: ${point.y}%</div>"
connectorStyle	string	直线或曲线	"Curve"
font	object	字体自定义设置	{size: '12px', color: '#000'}

常见用例

1. 市场份额分析

使用饼图展示产品／服务的市场分布及竞争对手所占比例。

2. 预算分配

使用环形图和中心总计可视化部门支出或资源分配。

3. 调查结果

展示投票或调查问卷的回答，并将占比较小的值归为一组。

4. 销售漏斗跟踪

使用漏斗图监控从潜在客户到实际客户的转化阶段。

5. 组织层级

使用金字塔图展示团队规模或职位分布。

6. 移动仪表板

创建适用于触摸交互和小屏幕的响应式数据可视化。

7. 报告生成

将图表导出为图像或 PDF，供自动化报告系统使用。

8. 实时监控

动态更新图表以展示实时统计数据（服务器状态、用户活动）。

相关组件

• Chart： 用于折线图、条形图、柱形图、面积图及其他笛卡尔坐标图
• RangeNavigator： 用于基于时间轴的数据探索
• StockChart： 用于金融数据可视化
• TreeMap： 用于通过矩形展示层级数据

浏览器支持

• Chrome（最新版本）
• Firefox（最新版本）
• Safari（最新版本）
• Edge（最新版本）
• Opera（最新版本）

其他资源

• Syncfusion ASP.NET Core 累积图表文档
• API 参考
• 在线演示
• GitHub 示例

---

后续步骤：

1. 阅读 getting-started.md，了解详细安装说明
2. 查看 chart-types.md，了解特定类型的功能
3. 阅读 data-visualization.md，了解样式设置
4. 查看 accessibility.md，了解合规要求