syncfusion-aspnetcore-charts

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion ASP.NET Core Charts

实现Syncfusion ASP.NET Core Charts

The Syncfusion ASP.NET Core Chart component is a feature-rich data visualization control that supports 25+ interactive chart types. It provides extensive customization options, multiple axes, data binding capabilities, and interactive features like zooming, panning, crosshair, and tooltips.

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

When to Use This Skill

何时使用该技能

Use this skill when you need to:

Create any type of chart or graph in ASP.NET Core applications
Visualize data with line, area, column, bar, or other chart types
Display financial data with candlestick, OHLC, or technical indicators
Implement interactive charts with zoom, pan, crosshair, or selection
Create multi-series charts or combination charts
Add data labels, markers, legends, or annotations to charts
Configure axes (numeric, datetime, category, logarithmic)
Export charts to PDF, SVG, or image formats
Build dashboards with multiple chart components
Implement accessible charts with WCAG compliance

在以下场景中使用该技能：

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

Component Overview

组件概述

Key Capabilities:

25+ Chart Types: Line, Area, Column, Bar, Scatter, Bubble, Candle, OHLC, and more
Data Binding: JSON arrays, DataManager, OData services, dynamic updates
Multiple Axes: Support for multiple X and Y axes with different scales
Interactivity: Zooming, panning, crosshair, trackball, selection, tooltips
Customization: Themes, colors, gradients, custom templates
Advanced Features: Annotations, striplines, trendlines, technical indicators, error bars
Export: PDF, SVG, PNG, JPEG, CSV formats
Accessibility: WCAG 2.0 compliant, keyboard navigation, RTL support

核心功能：

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

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Installation and NuGet package setup
Adding Chart tag helper to ASP.NET Core project
Script manager registration
Creating your first chart
Basic configuration and running the application

📄 阅读： references/getting-started.md

安装与NuGet包设置
向ASP.NET Core项目添加Chart标签助手
注册脚本管理器
创建你的第一个图表
基础配置与运行应用

Chart Types

图表类型

📄 Read: references/line-area-charts.md

Line, Step Line, Spline charts
Area, Step Area, Spline Area charts
Stacked Area and 100% Stacked Area
Range Area and Spline Range Area
When to use each type and complete examples

📄 Read: references/column-bar-charts.md

Column and Bar charts
Stacked Column/Bar and 100% Stacked
Range Column charts
Vertical chart orientation
Complete configuration examples

📄 Read: references/financial-charts.md

Candlestick charts
OHLC (Open-High-Low-Close) charts
HiLo and HiLoOpenClose charts
Technical indicators (SMA, EMA, RSI, MACD, etc.)
Financial data binding patterns

📄 Read: references/scatter-bubble-charts.md

Scatter plots for correlation analysis
Bubble charts with three dimensions
Point customization and sizing
Complete implementation examples

📄 Read: references/specialized-charts.md

Box and Whisker (statistical distribution)
Histogram (frequency distribution)
Pareto (cumulative analysis)
Waterfall (sequential value changes)
Polar and Radar charts
Complete examples for each type

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

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

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

柱形图和条形图
堆叠柱形/条形图和100%堆叠图
范围柱形图
垂直图表方向
完整配置示例

📄 阅读： references/financial-charts.md

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

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

用于相关性分析的散点图
三维气泡图
点的自定义与尺寸设置
完整实现示例

📄 阅读： references/specialized-charts.md

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

Data Binding

数据绑定

📄 Read: references/data-binding.md

Binding to JSON object arrays
DataManager integration
OData web services
Complex property binding
Dynamic data updates
Local vs remote data

📄 阅读： references/data-binding.md

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

Axes Configuration

坐标轴配置

📄 Read: references/axes-configuration.md

Axis types: Numeric, DateTime, Category, Logarithmic
Multiple axes configuration
Axis crossing and positioning
Inversed axis
Axis title and styling
Range and interval customization

📄 Read: references/axis-labels.md

Smart label management (trim, wrap, rotate, hide)
Multilevel labels for grouping
Label formatting and templates
Custom label placement
Edge label handling
Label rotation and alignment

📄 阅读： references/axes-configuration.md

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

📄 阅读： references/axis-labels.md

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

Series Configuration

系列配置

📄 Read: references/series-configuration.md

Adding multiple series
Series types and properties
Combination charts (mixing chart types)
Empty points handling
Series customization
Performance optimization

📄 阅读： references/series-configuration.md

添加多个系列
系列类型与属性
组合图表（混合多种图表类型）
空值点处理
系列自定义
性能优化

Visual Elements

视觉元素

📄 Read: references/data-labels.md

Enabling and positioning data labels
Label templates and formatting
Text mapping from data source
Smart label arrangement
Customization (font, color, border)
Label connectors

📄 Read: references/markers-and-legends.md

Data marker shapes and customization
Marker visibility and sizing
Legend positioning and layout
Legend customization and templates
Legend pagination
Toggle series visibility

📄 阅读： references/data-labels.md

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

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

数据标记点形状与自定义
标记点可见性与尺寸
图例定位与布局
图例自定义与模板
图例分页
切换系列可见性

Interactivity Features

交互功能

📄 Read: references/zooming-panning.md

Zooming modes: Selection, Pinch, Mousewheel
Panning support
Zoom toolbar configuration
Reset zoom functionality
Programmatic zoom control

📄 Read: references/crosshair-trackball.md

Crosshair configuration and customization
Trackball mode for multiple series
Tooltip integration
Line styles and labels
Shared tooltips

📄 Read: references/tooltips.md

Enabling and customizing tooltips
Tooltip templates
Shared tooltips across series
Format and styling
Tooltip animations

📄 Read: references/selection.md

Point and series selection
Selection modes and patterns
Multiple selection
Selection events
Visual feedback customization

📄 阅读： references/zooming-panning.md

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

📄 阅读： references/crosshair-trackball.md

十字线配置与自定义
多系列轨迹球模式
工具提示集成
线条样式与标签
共享工具提示

📄 阅读： references/tooltips.md

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

📄 阅读： references/selection.md

点与系列选择
选择模式与样式
多重选择
选择事件
视觉反馈自定义

Advanced Features

高级功能

📄 Read: references/annotations-striplines.md

Chart annotations (text, shapes, images)
Annotation positioning and alignment
Strip lines for highlighting regions
Segment and recurrence patterns
Customization and styling

📄 Read: references/trendlines-error-bars.md

Trendline types: Linear, Exponential, Logarithmic, Polynomial
Forecasting with trendlines
Error bars for uncertainty
Error bar modes and types
Customization options

📄 Read: references/multiple-panes.md

Creating multiple chart panes
Pane configuration and sizing
Associating series with panes
Synchronized axes
Layout customization

📄 阅读： references/annotations-striplines.md

图表注释（文本、形状、图片）
注释定位与对齐
用于高亮区域的条纹线
分段与重复模式
自定义与样式

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

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

📄 阅读： references/multiple-panes.md

创建多面板图表
面板配置与尺寸
将系列关联到面板
同步坐标轴
布局自定义

Appearance and Theming

外观与主题

📄 Read: references/appearance-customization.md

Built-in themes (Material, Bootstrap, Fabric, etc.)
Chart dimensions and sizing
Background and border customization
Gradient colors and fills
Chart title and subtitle
Print and export support

📄 阅读： references/appearance-customization.md

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

Accessibility and Localization

无障碍与本地化

📄 Read: references/accessibility-localization.md

WCAG 2.0 compliance
Keyboard navigation
Screen reader support
RTL (Right-to-Left) support
Internationalization (i18n)
Localization of chart elements

📄 阅读： references/accessibility-localization.md

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

Quick Start Example

快速入门示例

Here's a minimal example to create a basic line chart:

cshtml

@* 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>

csharp

// 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();
}

以下是创建基础折线图的最简示例：

cshtml

@* 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>

csharp

// 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();
}

Common Patterns

常见模式

Multiple Series Chart

多系列图表

cshtml

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

cshtml

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

Chart with Data Labels and Markers

带数据标签和标记点的图表

cshtml

<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-marker>
            <e-series-datalabel visible="true" position="Top">
            </e-series-datalabel>
        </e-series>
    </e-series-collection>
</ejs-chart>

cshtml

<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-marker>
            <e-series-datalabel visible="true" position="Top">
            </e-series-datalabel>
        </e-series>
    </e-series-collection>
</ejs-chart>

Combination Chart

组合图表

cshtml

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

cshtml

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

Chart with Zooming and Crosshair

带缩放和十字线的图表

cshtml

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

cshtml

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

Key Configuration Options

核心配置选项

Chart-Level Properties

图表级属性

```
title
```
: Chart title text
```
width
```
/
```
height
```
: Chart dimensions
```
theme
```
: Visual theme (Material, Bootstrap, Fabric, etc.)
```
background
```
: Background color
```
palettes
```
: Custom color palette for series

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

Primary Axis (

e-chart-primaryxaxis

)

主坐标轴（

e-chart-primaryxaxis

）

```
valueType
```
: Category, Numeric, DateTime, Logarithmic
```
title
```
: Axis title
```
minimum
```
/
```
maximum
```
: Axis range
```
interval
```
: Label interval
```
labelFormat
```
: Format string for labels

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

Series Properties (

e-series

)

系列属性（

e-series

）

```
type
```
: Chart type (Line, Column, Bar, Area, etc.)
```
dataSource
```
: Data to visualize
```
xName
```
/
```
yName
```
: Property names for X and Y values
```
name
```
: Series name for legend
```
fill
```
: Custom color
```
width
```
: Line/border width

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

Interactive Features

交互功能

```
e-chart-zoomsettings
```
: Enable zooming capabilities
```
e-chart-crosshairsettings
```
: Configure crosshair
```
e-chart-tooltipsettings
```
: Tooltip customization
```
e-chart-legendsettings
```
: Legend configuration

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

Visual Elements

视觉元素

```
e-series-marker
```
: Data point markers
```
e-series-datalabel
```
: Labels on data points
```
e-chart-annotations
```
: Custom annotations
```
e-striplines
```
: Highlight regions

```
e-series-marker
```
: 数据点标记
```
e-series-datalabel
```
: 数据点标签
```
e-chart-annotations
```
: 自定义注释
```
e-striplines
```
: 高亮区域

Common Use Cases

常见用例

1. Sales Dashboard

1. 销售仪表板

Use Column or Bar charts with multiple series to compare sales across products, regions, or time periods. Add data labels for exact values and legends for clarity.

使用多系列柱形图或条形图比较不同产品、地区或时间段的销售额。添加数据标签显示精确值，添加图例提升清晰度。

2. Financial Analysis

2. 金融分析

Use Candlestick or OHLC charts for stock price visualization. Add technical indicators (SMA, EMA, RSI) and enable zooming for detailed analysis.

使用K线图或OHLC图可视化股票价格。添加技术指标（SMA、EMA、RSI）并启用缩放功能进行详细分析。

3. Trend Analysis

3. 趋势分析

Use Line or Spline charts with trendlines to show data trends over time. Add forecasting to predict future values.

使用折线图或样条折线图搭配趋势线展示数据随时间的变化趋势。添加预测功能预测未来值。

4. Statistical Distribution

4. 统计分布

Use Box and Whisker charts for statistical analysis, Histogram for frequency distribution, or Scatter plots for correlation analysis.

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

5. Performance Monitoring

5. 性能监控

Use Area charts with multiple series and real-time data updates. Add annotations and striplines to mark significant events or thresholds.

使用多系列面积图搭配实时数据更新。添加注释和条纹线标记重要事件或阈值。

6. Comparison Analysis

6. 对比分析

Use Stacked Column/Bar or 100% Stacked charts to show part-to-whole relationships. Use Pareto charts for cumulative analysis.

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

Troubleshooting Tips

故障排除技巧

Chart not rendering:

Verify
```
Syncfusion.EJ2.AspNet.Core
```
NuGet package is installed

Ensure

@addTagHelper *, Syncfusion.EJ2

is in

_ViewImports.cshtml

Check that
```
<ejs-scripts>
```
is added at the end of
```
<body>
```
in layout
Confirm script reference is included in
```
<head>
```

Data not displaying:

Verify
```
dataSource
```
is properly bound
Check
```
xName
```
and
```
yName
```
match property names (case-sensitive)
Ensure data is not null or empty
Verify axis
```
valueType
```
matches data type

Performance issues with large data:

Use
```
enableDataVirtualization
```
for large datasets
Reduce marker size or disable markers
Use lighter chart types (Line instead of Spline)
Consider data aggregation or sampling

Styling not applied:

Verify theme is correctly set
Check CSS import order
Use browser developer tools to inspect elements
Ensure custom styles have proper specificity

图表未渲染：

确认已安装
```
Syncfusion.EJ2.AspNet.Core
```
NuGet包

确保

_ViewImports.cshtml

中包含

@addTagHelper *, Syncfusion.EJ2

检查布局文件的
```
<body>
```
末尾是否添加了
```
<ejs-scripts>
```
确认
```
<head>
```
中包含脚本引用

数据未显示：

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

大数据集性能问题：

对大数据集使用
```
enableDataVirtualization
```
减小标记点尺寸或禁用标记点
使用更轻量化的图表类型（如折线图替代样条折线图）
考虑数据聚合或采样

样式未生效：

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

Related Components

API Reference

API参考

For a comprehensive reference of all Chart API properties, methods, and events, see:

📄 Read: references/api-reference.md

Complete list of all properties (configuration, data binding, display, interactivity, accessibility)
All event properties and their purposes
Series and axis configuration options
Common property combinations and usage patterns
Link to official Syncfusion documentation

如需查看所有Chart API属性、方法和事件的完整参考，请访问：

📄 阅读： references/api-reference.md

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

Additional Resources

额外资源

Official API Documentation: Chart API Reference
Live Demos: ASP.NET Core Chart Demos
GitHub Samples: ASP.NET Core Examples

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

syncfusion-aspnetcore-charts

Original

Translation

Implementing Syncfusion ASP.NET Core Charts

实现Syncfusion ASP.NET Core Charts

When to Use This Skill

何时使用该技能

Component Overview

组件概述

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

Chart Types

图表类型

Data Binding

数据绑定

Axes Configuration

坐标轴配置

Series Configuration

系列配置

Visual Elements

视觉元素

Interactivity Features

交互功能

Advanced Features

高级功能

Appearance and Theming

外观与主题

Accessibility and Localization

无障碍与本地化

Quick Start Example

快速入门示例

Common Patterns

常见模式

Multiple Series Chart

多系列图表

Chart with Data Labels and Markers

带数据标签和标记点的图表

Combination Chart

组合图表

Chart with Zooming and Crosshair

带缩放和十字线的图表

Key Configuration Options

核心配置选项

Chart-Level Properties

图表级属性

Primary Axis (e-chart-primaryxaxis)

主坐标轴（e-chart-primaryxaxis）

Series Properties (e-series)

系列属性（e-series）

Interactive Features

交互功能

Visual Elements

视觉元素

Common Use Cases

常见用例

1. Sales Dashboard

1. 销售仪表板

2. Financial Analysis

2. 金融分析

3. Trend Analysis

3. 趋势分析

4. Statistical Distribution

4. 统计分布

5. Performance Monitoring

5. 性能监控

6. Comparison Analysis

6. 对比分析

Troubleshooting Tips

故障排除技巧

Related Components

相关组件

API Reference

API参考

Additional Resources

额外资源

Primary Axis (
`e-chart-primaryxaxis`
)

主坐标轴（
`e-chart-primaryxaxis`
）

Series Properties (
`e-series`
)

系列属性（
`e-series`
）