syncfusion-blazor-charts

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Blazor Charts

实现Syncfusion Blazor图表

A comprehensive guide for implementing the Syncfusion Blazor Chart component to create interactive, feature-rich data visualizations in Blazor applications. The Chart component supports 33+ chart types, multiple axes, advanced interactivity, and extensive customization options.

本指南是在Blazor应用中实现Syncfusion Blazor Chart组件、创建交互性强、功能丰富的数据可视化内容的综合指南。该Chart组件支持33+种图表类型、多轴配置、高级交互功能和丰富的自定义选项。

When to Use This Skill

何时使用本技能

Use this skill when you need to:

Create data visualizations in Blazor applications (line, column, bar, area, etc.)
Implement financial charts for stock analysis (candle, HILO, HILOOC)
Build statistical visualizations (histogram, box-whisker, pareto, waterfall)
Display comparative data with stacked or grouped charts
Show range-based data with range area/column charts
Create polar or radar charts for circular data representation
Add interactive features like tooltips, zooming, crosshair, selection
Customize chart appearance with themes, gradients, annotations
Handle dynamic data with live updates and data editing
Implement accessible charts with ARIA support and internationalization

当你需要完成以下需求时可使用本技能：

在Blazor应用中创建数据可视化内容（折线图、柱状图、条形图、面积图等）
为股票分析实现金融图表（K线、HILO、HILOOC）
构建统计可视化内容（直方图、箱线图、帕累托图、瀑布图）
通过堆叠或分组图表展示对比数据
借助范围面积/柱状图展示基于范围的数据
创建极坐标或雷达图以环形形式展示数据
添加交互功能，如提示框、缩放、十字准星、选择功能
通过主题、渐变、注释自定义图表外观
通过实时更新和数据编辑处理动态数据
借助ARIA支持和国际化能力实现无障碍访问的图表

Component Overview

组件概览

The Syncfusion Blazor Chart component is a powerful data visualization tool that provides:

33+ Chart Types: Line, Column, Bar, Area, Spline, Scatter, Bubble, Candle, HILO, Polar, Radar, and more
Multiple Axes: Support for category, numeric, datetime, and logarithmic axes
Rich Interactivity: Zooming, panning, crosshair, trackball, tooltips, selection
Data Binding: Work with List, DataManager, dynamic updates, and live data
Visual Elements: Markers, data labels, annotations, legends, gradients
Advanced Features: Technical indicators, trend lines, strip lines, multiple panes
Accessibility: Full ARIA support, keyboard navigation, localization, RTL
Customization: Themes, responsive design, print support, adaptive layout

Syncfusion Blazor Chart组件是一款功能强大的数据可视化工具，提供以下能力：

33+种图表类型：折线图、柱状图、条形图、面积图、样条图、散点图、气泡图、K线图、HILO图、极坐标图、雷达图等
多轴支持：支持分类轴、数值轴、日期时间轴、对数轴
丰富交互能力：缩放、平移、十字准星、追踪球、提示框、选择功能
数据绑定：支持与List、DataManager绑定，适配动态更新和实时数据场景
可视化元素：标记点、数据标签、注释、图例、渐变填充
高级功能：技术指标、趋势线、带状线、多窗格布局
无障碍支持：完整ARIA支持、键盘导航、本地化、RTL适配
自定义能力：主题切换、响应式设计、打印支持、自适应布局

Documentation and Navigation Guide

文档与导航指南

Complete API Reference

完整API参考

📄 Read: references/api-reference.md

CRITICAL: Use this reference FIRST for all API-related questions

Use this authoritative API reference when:

Looking up correct enum values (ChartSeriesType, ValueType, SelectionMode, etc.)
Finding public method signatures (RefreshAsync, ExportAsync, ShowTooltip, etc.)
Verifying property names and types
Generating code samples
Troubleshooting API-related issues

Topics covered:

Complete list of SfChart public methods with signatures
All chart enumerations with correct values
Key component classes and their properties
Method usage examples
Common patterns and best practices

Key Points:

All enum values are exact - do not use variations
Method names follow C# conventions (e.g.,
```
RefreshAsync
```
not
```
Refresh
```
)
Always use
```
@ref
```
to access chart instance for method calls
Namespace:
```
Syncfusion.Blazor.Charts
```

📄 阅读： references/api-reference.md

重要提示：所有API相关问题请优先查阅本参考文档

当你遇到以下场景时可使用本权威API参考：

查找正确的枚举值（ChartSeriesType、ValueType、SelectionMode等）
查询公共方法签名（RefreshAsync、ExportAsync、ShowTooltip等）
验证属性名称和类型
生成代码示例
排查API相关问题

覆盖内容：

SfChart所有公共方法及完整签名
所有图表枚举及对应正确值
核心组件类及其属性
方法使用示例
通用模式与最佳实践

核心要点：

所有枚举值均为精确值，请勿使用变体写法
方法名称遵循C#命名规范（例如使用
```
RefreshAsync
```
而非
```
Refresh
```
）
始终通过
```
@ref
```
获取图表实例后调用方法
命名空间：
```
Syncfusion.Blazor.Charts
```

Getting Started

快速入门

📄 Read: references/getting-started.md

Use this when:

Setting up a new Blazor Chart project
Installing NuGet packages and configuring services
Creating your first chart component
Understanding basic chart structure and data binding
Working with Visual Studio, VS Code, or .NET CLI

Topics covered:

Installation and prerequisites
Package setup (Syncfusion.Blazor.Charts)
Namespace imports and service registration
Script references
Basic chart implementation
Simple data binding example

📄 阅读： references/getting-started.md

当你遇到以下场景时可使用本文档：

搭建全新Blazor Chart项目
安装NuGet包并配置服务
创建你的第一个图表组件
理解基础图表结构和数据绑定逻辑
在Visual Studio、VS Code或.NET CLI环境下开发

覆盖内容：

安装说明与前置依赖
包配置（Syncfusion.Blazor.Charts）
命名空间导入与服务注册
脚本引用配置
基础图表实现
简单数据绑定示例

Chart Types

图表类型

Common Chart Types

常用图表类型

📄 Read: references/chart-types-common.md

Use this for frequently-used chart types:

Line charts for trend visualization
Area charts for showing magnitude over time
Column charts for categorical comparisons
Bar charts for horizontal comparisons
Spline charts for smooth curves
Step charts for stepped data progression

Topics covered:

Line, Area, Column, Bar chart implementations
Spline and Spline Area variations
Step Line and Step Area patterns
When to use each chart type
Configuration and customization
Multi-series examples

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

适用于高频使用的图表类型场景：

展示趋势的折线图
展示时间维度数值量级的面积图
分类对比用的柱状图
横向对比用的条形图
展示平滑曲线的样条图
展示阶梯式数据变化的阶梯图

覆盖内容：

折线图、面积图、柱状图、条形图实现方案
样条图、样条面积图变体实现
阶梯线图、阶梯面积图实现模式
各图表类型适用场景
配置与自定义方法
多系列示例

Specialized Chart Types

特殊图表类型

📄 Read: references/chart-types-specialized.md

Use this for specialized visualization needs:

Financial charts (Candle, HILO, HILOOC)
Statistical charts (Box-Whisker, Histogram, Error Bar, Pareto, Waterfall)
Stacked charts (Stack Area/Bar/Column/Line)
Range charts (Range Area/Column/Step Area)
Polar and Radar charts
Scatter and Bubble charts
Vertical chart orientation

Topics covered:

Financial chart patterns and configurations
Statistical analysis chart types
Stacking modes (normal vs 100%)
Range visualization techniques
Circular chart layouts
XY scatter relationships
Chart orientation options

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

适用于特殊可视化需求场景：

金融图表（K线、HILO、HILOOC）
统计图表（箱线图、直方图、误差棒图、帕累托图、瀑布图）
堆叠图表（堆叠面积/条形/柱状/折线图）
范围图表（范围面积/柱状/阶梯面积图）
极坐标与雷达图
散点与气泡图
垂直方向图表

覆盖内容：

金融图表模式与配置方法
统计分析类图表类型
堆叠模式（普通模式vs100%堆叠模式）
范围可视化技巧
环形图表布局
XY散点关系展示
图表方向配置选项

Axes and Data Configuration

轴与数据配置

📄 Read: references/axes-and-scales.md

Use this when:

Configuring axis types (category, numeric, datetime, logarithmic)
Customizing axis appearance and behavior
Formatting axis labels and values
Working with multiple axes
Setting axis ranges and intervals

Topics covered:

Category axis for discrete data
Numeric axis for continuous values
DateTime axis for time-series data
Logarithmic axis for exponential data
Axis customization (title, range, interval)
Label formatting, rotation, and positioning
Multiple axis configuration
Inverse and opposed axes

📄 Read: references/data-handling.md

Use this when:

Binding data sources to charts
Adding, removing, or updating data dynamically
Enabling data editing
Sorting chart data
Working with live or streaming data

Topics covered:

Data source binding (List, DataManager)
Dynamic data operations
Data editing functionality
Chart sorting options
Real-time data updates
Data serialization patterns

📄 阅读： references/axes-and-scales.md

当你遇到以下场景时可使用本文档：

配置轴类型（分类轴、数值轴、日期时间轴、对数轴）
自定义轴外观与行为
格式化轴标签与数值
配置多轴场景
设置轴范围与间隔

覆盖内容：

适配离散数据的分类轴
适配连续数值的数值轴
适配时间序列数据的日期时间轴
适配指数级数据的对数轴
轴自定义配置（标题、范围、间隔）
标签格式化、旋转与定位
多轴配置方案
反向轴与对置轴配置

📄 阅读： references/data-handling.md

当你遇到以下场景时可使用本文档：

为图表绑定数据源
动态新增、删除或更新数据
开启数据编辑功能
对图表数据排序
处理实时或流数据

覆盖内容：

数据源绑定（List、DataManager）
动态数据操作
数据编辑功能
图表排序选项
实时数据更新
数据序列化模式

Visual Elements

可视化元素

📄 Read: references/visual-elements.md

Use this when:

Adding data markers to chart points
Displaying data labels on series
Creating custom label templates
Adding annotations (text, shapes, images)
Applying gradient fills

Topics covered:

Data marker types and customization
Data label visibility and formatting
Label positioning strategies
Data label templates
Last data label highlighting
Chart annotations (text, shapes, images)
Gradient color fills

📄 Read: references/legend.md

Use this when:

Enabling and configuring chart legend
Positioning legend (top, bottom, left, right)
Customizing legend appearance
Implementing legend click behavior
Creating custom legend templates

Topics covered:

Legend visibility and positioning
Legend shape and text customization
Interactive legend (toggle series)
Legend pagination
Custom legend templates
Legend alignment options

📄 阅读： references/visual-elements.md

当你遇到以下场景时可使用本文档：

为图表点添加数据标记
在系列上展示数据标签
创建自定义标签模板
添加注释（文本、形状、图片）
应用渐变填充

覆盖内容：

数据标记类型与自定义方法
数据标签可见性控制与格式化
标签定位策略
数据标签模板
末尾数据标签高亮
图表注释（文本、形状、图片）
渐变色填充配置

📄 阅读： references/legend.md

当你遇到以下场景时可使用本文档：

开启并配置图表图例
调整图例位置（上、下、左、右）
自定义图例外观
实现图例点击交互逻辑
创建自定义图例模板

覆盖内容：

图例可见性与位置配置
图例形状与文本自定义
交互式图例（切换系列显示状态）
图例分页
自定义图例模板
图例对齐选项

Interactive Features

交互功能

📄 Read: references/interactive-features.md

Use this when:

Enabling tooltips with custom formatting
Adding crosshair or trackball for data tracking
Implementing point, series, or cluster selection
Enabling zooming and panning
Creating interactive user experiences

Topics covered:

Tooltip configuration and templates
Crosshair and trackball features
Selection modes and patterns
Zoom types (selection, pinch, mousewheel)
Zoom toolbar configuration
Pan functionality
User interaction events

📄 阅读： references/interactive-features.md

当你遇到以下场景时可使用本文档：

开启支持自定义格式化的提示框
添加十字准星或追踪球实现数据追踪
实现点、系列、簇选择功能
开启缩放与平移能力
打造交互式用户体验

覆盖内容：

提示框配置与模板
十字准星与追踪球功能
选择模式与实现模式
缩放类型（框选、捏合、鼠标滚轮）
缩放工具栏配置
平移功能
用户交互事件

Customization and Appearance

自定义与外观配置

📄 Read: references/appearance-styling.md

Use this when:

Customizing chart appearance and themes
Setting chart dimensions and sizing
Configuring responsive/adaptive layout
Enabling print functionality
Styling background, borders, and margins

Topics covered:

Chart appearance customization
Theme configuration
Chart dimensions and sizing
Responsive design patterns
Adaptive layout for mobile
Print support
Background and border styling
Gradient customization

📄 Read: references/advanced-features.md

Use this when:

Adding technical indicators (EMA, SMA, RSI, etc.)
Implementing trend lines (linear, exponential, polynomial)
Creating strip lines (horizontal/vertical bands)
Using multiple panes (sub-charts)
Handling empty points

Topics covered:

Technical indicators for financial charts
Trend line types and configuration
Strip line patterns
Multiple pane layouts
Empty point handling strategies
Row and column definitions

📄 阅读： references/appearance-styling.md

当你遇到以下场景时可使用本文档：

自定义图表外观与主题
设置图表尺寸
配置响应式/自适应布局
开启打印功能
自定义背景、边框与边距

覆盖内容：

图表外观自定义
主题配置
图表尺寸设置
响应式设计模式
移动端自适应布局
打印支持
背景与边框样式
渐变自定义

📄 阅读： references/advanced-features.md

当你遇到以下场景时可使用本文档：

添加技术指标（EMA、SMA、RSI等）
实现趋势线（线性、指数、多项式）
创建带状线（水平/垂直色块）
使用多窗格布局（子图表）
处理空值点

覆盖内容：

金融图表技术指标
趋势线类型与配置
带状线实现模式
多窗格布局
空值点处理策略
行与列定义

Accessibility and Internationalization

无障碍与国际化

📄 Read: references/accessibility-internationalization.md

Use this when:

Implementing accessible charts (ARIA, keyboard nav)
Configuring advanced accessibility features
Enabling internationalization (i18n)
Setting up localization (l10n)
Supporting RTL layouts

Topics covered:

Accessibility features and ARIA support
Keyboard navigation patterns
Advanced accessibility configuration
Internationalization setup
Localization resources
RTL support
Screen reader compatibility

📄 阅读： references/accessibility-internationalization.md

当你遇到以下场景时可使用本文档：

实现无障碍访问的图表（ARIA、键盘导航）
配置高级无障碍功能
开启国际化（i18n）能力
配置本地化（l10n）资源
支持RTL布局

覆盖内容：

无障碍功能与ARIA支持
键盘导航模式
高级无障碍配置
国际化配置
本地化资源
RTL支持
屏幕阅读器适配

Events

事件

📄 Read: references/events.md

Use this when:

Handling chart lifecycle events
Responding to user interactions (clicks, mouse events)
Listening to axis, series, or point events
Implementing custom event handlers
Triggering actions on zoom, pan, or selection

Topics covered:

Chart load and render events
Point and series events
Mouse events (click, move, leave)
Axis label render events
Legend events
Zoom and pan events
Selection events
Event handler patterns

📄 阅读： references/events.md

当你遇到以下场景时可使用本文档：

处理图表生命周期事件
响应用户交互（点击、鼠标事件）
监听轴、系列或点相关事件
实现自定义事件处理逻辑
在缩放、平移或选择操作时触发指定行为

覆盖内容：

图表加载与渲染事件
点与系列相关事件
鼠标事件（点击、移动、离开）
轴标签渲染事件
图例相关事件
缩放与平移事件
选择事件
事件处理模式

Practical Examples and How-To Guides

实践示例与操作指南

📄 Read: references/practical-examples.md

Use this for common implementation scenarios:

Adding/removing series dynamically
Hiding axes programmatically
Converting milliseconds to datetime
Updating points dynamically
Implementing lazy loading
Creating live/real-time charts
Getting selected data
Synchronizing multiple charts
Adding threshold lines
Custom tooltip tables

Topics covered:

Dynamic series management
Axis visibility control
Date conversion techniques
Dynamic point updates
Lazy loading patterns
Live chart implementation
Selection data retrieval
Chart synchronization
Threshold line implementation
Custom tooltip tables

📄 阅读： references/practical-examples.md

适用于常见实现场景：

动态新增/删除系列
编程方式隐藏轴
毫秒值转日期时间格式
动态更新数据点
实现懒加载
创建实时/动态图表
获取选中数据
多图表联动
添加阈值线
自定义提示框表格

覆盖内容：

动态系列管理
轴可见性控制
日期转换技巧
动态数据点更新
懒加载实现模式
实时图表实现方案
选中数据获取方法
图表联动实现
阈值线实现方案
自定义提示框表格

Public Methods Reference

公共方法参考

The

SfChart

component provides several public methods for programmatic control. Always use

@ref

to access these methods:

SfChart

组件提供多个公共方法支持编程控制。始终通过

@ref

获取实例后调用这些方法：

Essential Methods

核心方法

razor

<SfChart @ref="ChartRef">
    <!-- Configuration -->
</SfChart>

@code {
    SfChart ChartRef;
    
    // Refresh the chart
    async Task RefreshChart() => await ChartRef.RefreshAsync();
    
    // Export the chart
    async Task ExportChart() => await ChartRef.ExportAsync(ExportType.PNG, "chart.png");
    
    // Print the chart
    async Task PrintChart() => await ChartRef.PrintAsync();
    
    // Show/Hide tooltip
    void ShowChartTooltip() => ChartRef.ShowTooltip("January", 35);
    void HideChartTooltip() => ChartRef.HideTooltip();
    
    // Show/Hide crosshair
    void ShowChartCrosshair() => ChartRef.ShowCrosshair(100, 50);
    void HideChartCrosshair() => ChartRef.HideCrosshair();
    
    // Selection control
    void ClearSelections() => ChartRef.ClearSelection();
    
    // Sorting
    void SortData() => ChartRef.Sort("YValue", ListSortDirection.Descending);
    void ClearChartSort() => ChartRef.ClearSort();
}

See references/api-reference.md for complete method documentation.

razor

<SfChart @ref="ChartRef">
    <!-- 配置内容 -->
</SfChart>

@code {
    SfChart ChartRef;
    
    // 刷新图表
    async Task RefreshChart() => await ChartRef.RefreshAsync();
    
    // 导出图表
    async Task ExportChart() => await ChartRef.ExportAsync(ExportType.PNG, "chart.png");
    
    // 打印图表
    async Task PrintChart() => await ChartRef.PrintAsync();
    
    // 显示/隐藏提示框
    void ShowChartTooltip() => ChartRef.ShowTooltip("January", 35);
    void HideChartTooltip() => ChartRef.HideTooltip();
    
    // 显示/隐藏十字准星
    void ShowChartCrosshair() => ChartRef.ShowCrosshair(100, 50);
    void HideChartCrosshair() => ChartRef.HideCrosshair();
    
    // 选择控制
    void ClearSelections() => ChartRef.ClearSelection();
    
    // 排序
    void SortData() => ChartRef.Sort("YValue", ListSortDirection.Descending);
    void ClearChartSort() => ChartRef.ClearSort();
}

完整方法文档请查阅 references/api-reference.md。

⚠️ CRITICAL: API Usage Guidelines

⚠️ 重要提示：API使用规范

1. Enum Names - MUST Use Full Namespace

1. 枚举名称 - 必须使用完整命名空间

Syncfusion Blazor Charts requires FULLY QUALIFIED enum names:

razor

<!-- ✅ CORRECT - Use full namespace -->
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
<ChartSeries Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column" />

<!-- ❌ WRONG - Short form will cause errors -->
<ChartPrimaryXAxis ValueType="ValueType.Category" />
<ChartSeries Type="ChartSeriesType.Column" />

Always use
Syncfusion.Blazor.Charts.
prefix for:

```
ValueType
```
(Category, Double, DateTime, etc.)
```
ChartSeriesType
```
(Column, Line, Area, etc.)

LegendPosition

SelectionMode

ZoomMode

ChartShape

, etc.

Syncfusion Blazor Charts要求使用完全限定的枚举名称：

razor

<!-- ✅ 正确写法 - 使用完整命名空间 -->
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
<ChartSeries Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column" />

<!-- ❌ 错误写法 - 短写会导致报错 -->
<ChartPrimaryXAxis ValueType="ValueType.Category" />
<ChartSeries Type="ChartSeriesType.Column" />

以下枚举始终需要添加
Syncfusion.Blazor.Charts.
前缀：

```
ValueType
```
（Category、Double、DateTime等）
```
ChartSeriesType
```
（Column、Line、Area等）

LegendPosition

、

SelectionMode

、

ZoomMode

、

ChartShape

等

2. Component Property Restrictions

2. 组件属性限制

⚠️ Common Property Errors to Avoid:

⚠️ 需要规避的常见属性错误：

ChartCrosshairLine - Limited Properties

ChartCrosshairLine - 支持的属性有限

razor

<!-- ✅ CORRECT - Only Width and Color supported -->
<ChartCrosshairSettings Enable="true">
    <ChartCrosshairLine Width="1" Color="#666"></ChartCrosshairLine>
</ChartCrosshairSettings>

<!-- ❌ WRONG - DashArray NOT supported on ChartCrosshairLine -->
<ChartCrosshairLine Width="1" Color="#666" DashArray="5,5"></ChartCrosshairLine>

Supported ChartCrosshairLine Properties:

```
Width
```
- Line width (number)
```
Color
```
- Line color (string)

NOT Supported:

❌
```
DashArray
```
- Will cause runtime error
❌
```
Opacity
```
- Not available on this component

razor

<!-- ✅ 正确写法 - 仅支持Width和Color属性 -->
<ChartCrosshairSettings Enable="true">
    <ChartCrosshairLine Width="1" Color="#666"></ChartCrosshairLine>
</ChartCrosshairSettings>

<!-- ❌ 错误写法 - ChartCrosshairLine不支持DashArray属性 -->
<ChartCrosshairLine Width="1" Color="#666" DashArray="5,5"></ChartCrosshairLine>

ChartCrosshairLine支持的属性：

```
Width
```
- 线宽（数值类型）
```
Color
```
- 线条颜色（字符串类型）

不支持的属性：

❌
```
DashArray
```
- 会导致运行时报错
❌
```
Opacity
```
- 该组件无此属性

Striplines - Use Plural Form

带状线 - 使用复数形式标签

razor

<!-- ✅ CORRECT - ChartStriplines (plural) -->
<ChartPrimaryYAxis>
    <ChartStriplines>
        <ChartStripline Start="50" End="60" Color="red" />
    </ChartStriplines>
</ChartPrimaryYAxis>

<!-- ❌ WRONG - ChartAxisStripLineSettings does not exist -->
<ChartAxisStripLineSettings>
    <ChartAxisStripLine Start="50" End="60" />
</ChartAxisStripLineSettings>

razor

<!-- ✅ 正确写法 - ChartStriplines（复数形式） -->
<ChartPrimaryYAxis>
    <ChartStriplines>
        <ChartStripline Start="50" End="60" Color="red" />
    </ChartStriplines>
</ChartPrimaryYAxis>

<!-- ❌ 错误写法 - ChartAxisStripLineSettings不存在 -->
<ChartAxisStripLineSettings>
    <ChartAxisStripLine Start="50" End="60" />
</ChartAxisStripLineSettings>

3. Validation Checklist

3. 校验清单

Before deploying, verify:

✅ All enums use
```
Syncfusion.Blazor.Charts.
```
prefix
✅ ChartCrosshairLine uses ONLY Width and Color
✅ Striplines use
```
<ChartStriplines>
```
and
```
<ChartStripline>
```
✅ Component references use
```
@ref
```
for method access
✅ Property names match official API exactly (case-sensitive)

部署前请确认：

✅ 所有枚举都添加了
```
Syncfusion.Blazor.Charts.
```
前缀
✅ ChartCrosshairLine仅使用Width和Color属性
✅ 带状线使用
```
<ChartStriplines>
```
和
```
<ChartStripline>
```
标签
✅ 组件通过
```
@ref
```
获取实例后调用方法
✅ 属性名称与官方API完全一致（大小写敏感）

Quick Start Example

快速入门示例

Here's a minimal example to create a column chart with data:

razor

@page "/chart-demo"
@using Syncfusion.Blazor.Charts

<SfChart Title="Sales Analysis">
    <ChartPrimaryXAxis Title="Month" ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
    </ChartPrimaryXAxis>
    
    <ChartPrimaryYAxis Title="Sales in Dollar">
    </ChartPrimaryYAxis>
    
    <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
    
    <ChartSeriesCollection>
        <ChartSeries DataSource="@SalesData" 
                     Name="Sales" 
                     XName="Month" 
                     YName="SalesValue" 
                     Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column">
            <ChartMarker>
                <ChartDataLabel Visible="true"></ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code {
    public class SalesInfo
    {
        public string Month { get; set; }
        public double SalesValue { get; set; }
    }

    public List<SalesInfo> SalesData = new List<SalesInfo>
    {
        new SalesInfo { Month = "Jan", SalesValue = 35 },
        new SalesInfo { Month = "Feb", SalesValue = 28 },
        new SalesInfo { Month = "Mar", SalesValue = 34 },
        new SalesInfo { Month = "Apr", SalesValue = 32 },
        new SalesInfo { Month = "May", SalesValue = 40 },
        new SalesInfo { Month = "Jun", SalesValue = 32 }
    };
}

Prerequisites:

Install
```
Syncfusion.Blazor.Charts
```
NuGet package

Add

@using Syncfusion.Blazor.Charts

_Imports.razor

builder.Services.AddSyncfusionBlazor();

Program.cs

Add script reference in
```
App.razor
```

以下是创建带数据的柱状图的最小示例：

razor

@page "/chart-demo"
@using Syncfusion.Blazor.Charts

<SfChart Title="销售分析">
    <ChartPrimaryXAxis Title="月份" ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
    </ChartPrimaryXAxis>
    
    <ChartPrimaryYAxis Title="销售额（美元）">
    </ChartPrimaryYAxis>
    
    <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
    
    <ChartSeriesCollection>
        <ChartSeries DataSource="@SalesData" 
                     Name="销售额" 
                     XName="Month" 
                     YName="SalesValue" 
                     Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column">
            <ChartMarker>
                <ChartDataLabel Visible="true"></ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code {
    public class SalesInfo
    {
        public string Month { get; set; }
        public double SalesValue { get; set; }
    }

    public List<SalesInfo> SalesData = new List<SalesInfo>
    {
        new SalesInfo { Month = "Jan", SalesValue = 35 },
        new SalesInfo { Month = "Feb", SalesValue = 28 },
        new SalesInfo { Month = "Mar", SalesValue = 34 },
        new SalesInfo { Month = "Apr", SalesValue = 32 },
        new SalesInfo { Month = "May", SalesValue = 40 },
        new SalesInfo { Month = "Jun", SalesValue = 32 }
    };
}

前置依赖：

安装
```
Syncfusion.Blazor.Charts
```
NuGet包

在

_Imports.razor

中添加

@using Syncfusion.Blazor.Charts

在

Program.cs

中注册服务：

builder.Services.AddSyncfusionBlazor();

在
```
App.razor
```
中添加脚本引用

Common Patterns

通用实现模式

Multi-Series Comparison Chart

多系列对比图表

razor

<SfChart Title="Product Sales Comparison">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Product1Sales" XName="Month" YName="Sales" 
                     Name="Product 1" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column">
        </ChartSeries>
        <ChartSeries DataSource="@Product2Sales" XName="Month" YName="Sales" 
                     Name="Product 2" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
    
    <ChartLegendSettings Visible="true"></ChartLegendSettings>
</SfChart>

razor

<SfChart Title="产品销售对比">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Product1Sales" XName="Month" YName="Sales" 
                     Name="产品1" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column">
        </ChartSeries>
        <ChartSeries DataSource="@Product2Sales" XName="Month" YName="Sales" 
                     Name="产品2" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
    
    <ChartLegendSettings Visible="true"></ChartLegendSettings>
</SfChart>

Time-Series Line Chart with Zooming

支持缩放的时间序列折线图

razor

<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" 
                        Title="Date">
    </ChartPrimaryXAxis>
    
    <ChartZoomSettings EnableSelectionZooming="true" 
                       EnablePan="true" 
                       EnableMouseWheelZooming="true">
    </ChartZoomSettings>
    
    <ChartSeriesCollection>
        <ChartSeries DataSource="@TimeSeriesData" 
                     XName="Date" 
                     YName="Value" 
                     Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

razor

<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" 
                        Title="日期">
    </ChartPrimaryXAxis>
    
    <ChartZoomSettings EnableSelectionZooming="true" 
                       EnablePan="true" 
                       EnableMouseWheelZooming="true">
    </ChartZoomSettings>
    
    <ChartSeriesCollection>
        <ChartSeries DataSource="@TimeSeriesData" 
                     XName="Date" 
                     YName="Value" 
                     Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Stacked Area Chart with Legend

带图例的堆叠面积图

razor

<SfChart Title="Resource Allocation">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    
    <ChartSeriesCollection>
        <ChartSeries DataSource="@ResourceData1" XName="Period" YName="Hours" 
                     Name="Development" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StackingArea">
        </ChartSeries>
        <ChartSeries DataSource="@ResourceData2" XName="Period" YName="Hours" 
                     Name="Testing" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StackingArea">
        </ChartSeries>
        <ChartSeries DataSource="@ResourceData3" XName="Period" YName="Hours" 
                     Name="Documentation" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StackingArea">
        </ChartSeries>
    </ChartSeriesCollection>
    
    <ChartLegendSettings Visible="true" Position="Syncfusion.Blazor.Charts.LegendPosition.Bottom">
    </ChartLegendSettings>
</SfChart>

razor

<SfChart Title="资源分配">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    
    <ChartSeriesCollection>
        <ChartSeries DataSource="@ResourceData1" XName="Period" YName="Hours" 
                     Name="开发" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StackingArea">
        </ChartSeries>
        <ChartSeries DataSource="@ResourceData2" XName="Period" YName="Hours" 
                     Name="测试" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StackingArea">
        </ChartSeries>
        <ChartSeries DataSource="@ResourceData3" XName="Period" YName="Hours" 
                     Name="文档" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StackingArea">
        </ChartSeries>
    </ChartSeriesCollection>
    
    <ChartLegendSettings Visible="true" Position="Syncfusion.Blazor.Charts.LegendPosition.Bottom">
    </ChartLegendSettings>
</SfChart>

Key Configuration Properties

核心配置属性

Chart Component (

SfChart

)

图表组件（

SfChart

）

```
Title
```
- Chart title text
```
Width
```
/
```
Height
```
- Chart dimensions (accepts px or %, default: "100%")
```
Theme
```
- Visual theme (see Theme enum in API reference)
```
Background
```
- Chart background color
```
EnableAnimation
```
- Enable/disable animation (default: true)
```
SelectionMode
```
- Selection mode (None, Series, Point, Cluster, DragXY, DragX, DragY, Lasso)
```
HighlightMode
```
- Highlight mode (None, Series, Point, Cluster)

```
Title
```
- 图表标题文本
```
Width
```
/
```
Height
```
- 图表尺寸（支持px或%，默认值："100%"）
```
Theme
```
- 视觉主题（详见API参考中的Theme枚举）
```
Background
```
- 图表背景色
```
EnableAnimation
```
- 开启/关闭动画（默认值：true）
```
SelectionMode
```
- 选择模式（None、Series、Point、Cluster、DragXY、DragX、DragY、Lasso）
```
HighlightMode
```
- 高亮模式（None、Series、Point、Cluster）

Primary Axes (

ChartPrimaryXAxis

ChartPrimaryYAxis

)

主轴（

ChartPrimaryXAxis

、

ChartPrimaryYAxis

）

ValueType

- Axis type:

Syncfusion.Blazor.Charts.ValueType.Category

ValueType.Double

ValueType.DateTime

ValueType.Logarithmic

ValueType.DateTimeCategory

```
Title
```
- Axis title
```
Minimum
```
/
```
Maximum
```
- Axis range
```
Interval
```
- Spacing between labels
```
LabelFormat
```
- Format string for labels (e.g., "C0", "N2", "dd MMM")
```
EdgeLabelPlacement
```
- Edge label handling (None, Hide, Shift)
```
LabelIntersectAction
```
- Label intersection handling (None, Hide, Trim, Wrap, MultipleRows, Rotate45, Rotate90)
Striplines - Use
```
<ChartStriplines>
```
(plural) for horizontal/vertical bands

ValueType

- 轴类型：

Syncfusion.Blazor.Charts.ValueType.Category

、

ValueType.Double

、

ValueType.DateTime

、

ValueType.Logarithmic

、

ValueType.DateTimeCategory

```
Title
```
- 轴标题
```
Minimum
```
/
```
Maximum
```
- 轴范围
```
Interval
```
- 标签间隔
```
LabelFormat
```
- 标签格式化字符串（例如"C0"、"N2"、"dd MMM"）
```
EdgeLabelPlacement
```
- 边缘标签处理逻辑（None、Hide、Shift）
```
LabelIntersectAction
```
- 标签重叠处理逻辑（None、Hide、Trim、Wrap、MultipleRows、Rotate45、Rotate90）
带状线 - 使用
```
<ChartStriplines>
```
（复数形式）添加水平/垂直色块

Series (

ChartSeries

)

系列（

ChartSeries

）

```
DataSource
```
- Data collection (IEnumerable<object>)
```
XName
```
/
```
YName
```
- Property names for X and Y values (case-sensitive)

Type

- Chart type:

Syncfusion.Blazor.Charts.ChartSeriesType.Column

ChartSeriesType.Line

, etc. (see API reference)

```
Name
```
- Series name for legend
```
Fill
```
- Series color (CSS color string)
```
Width
```
- Line/border width (pixels)
```
DashArray
```
- Dash pattern (e.g., "5,5")
```
Opacity
```
- Transparency (0 to 1)

```
DataSource
```
- 数据集（IEnumerable<object>）
```
XName
```
/
```
YName
```
- X轴和Y轴对应的属性名称（大小写敏感）

Type

- 图表类型：

Syncfusion.Blazor.Charts.ChartSeriesType.Column

、

ChartSeriesType.Line

等（详见API参考）

```
Name
```
- 系列在图例中展示的名称
```
Fill
```
- 系列颜色（CSS颜色字符串）
```
Width
```
- 线条/边框宽度（像素）
```
DashArray
```
- 虚线样式（例如"5,5"）
```
Opacity
```
- 透明度（取值范围0到1）

Interactivity

交互配置

```
ChartTooltipSettings
```
- Tooltip configuration
- ```
Enable
```
  - Show/hide tooltip
- ```
Shared
```
  - Enable shared tooltip for multiple series
- ```
Format
```
  - Custom tooltip format
- ```
Template
```
  - Custom tooltip template (RenderFragment)
```
ChartZoomSettings
```
- Zoom and pan options
- ```
EnableSelectionZooming
```
  - Enable selection-based zoom
- ```
EnableMouseWheelZooming
```
  - Enable mouse wheel zoom
- ```
EnablePinchZooming
```
  - Enable pinch zoom (touch devices)
- ```
EnablePan
```
  - Enable panning
- ```
Mode
```
  - Zoom mode (X, Y, XY)
```
SelectionMode
```
- Selection behavior (see SelectionMode enum)
```
ChartCrosshairSettings
```
- Crosshair configuration
- ```
Enable
```
  - Show/hide crosshair
- ```
LineType
```
  - Crosshair line type (Vertical, Horizontal, Both)
- ```
ChartCrosshairLine
```
  - Line style (Width, Color ONLY - NO DashArray)

```
ChartTooltipSettings
```
- 提示框配置
- ```
Enable
```
  - 显示/隐藏提示框
- ```
Shared
```
  - 为多系列开启共享提示框
- ```
Format
```
  - 自定义提示框格式
- ```
Template
```
  - 自定义提示框模板（RenderFragment）
```
ChartZoomSettings
```
- 缩放与平移配置
- ```
EnableSelectionZooming
```
  - 开启框选缩放
- ```
EnableMouseWheelZooming
```
  - 开启鼠标滚轮缩放
- ```
EnablePinchZooming
```
  - 开启捏合缩放（触控设备）
- ```
EnablePan
```
  - 开启平移
- ```
Mode
```
  - 缩放模式（X、Y、XY）
```
SelectionMode
```
- 选择行为（详见SelectionMode枚举）
```
ChartCrosshairSettings
```
- 十字准星配置
- ```
Enable
```
  - 显示/隐藏十字准星
- ```
LineType
```
  - 十字准星线条类型（Vertical、Horizontal、Both）
- ```
ChartCrosshairLine
```
  - 线条样式（仅支持Width、Color属性 - 不支持DashArray）

Visual Elements

可视化元素

```
ChartMarker
```
- Data point markers
- ```
Visible
```
  - Show/hide markers
- ```
Shape
```
  - Marker shape (see ChartShape enum)
- ```
Width
```
  /
```
Height
```
  - Marker dimensions
```
ChartDataLabel
```
- Data labels on points
- ```
Visible
```
  - Show/hide labels
- ```
Position
```
  - Label position
- ```
Template
```
  - Custom label template
```
ChartLegendSettings
```
- Legend configuration
- ```
Visible
```
  - Show/hide legend
- ```
Position
```
  - Legend position (see LegendPosition enum)
```
ChartAnnotations
```
- Custom annotations
- Support for text, images, and shapes

```
ChartMarker
```
- 数据点标记
- ```
Visible
```
  - 显示/隐藏标记
- ```
Shape
```
  - 标记形状（详见ChartShape枚举）
- ```
Width
```
  /
```
Height
```
  - 标记尺寸
```
ChartDataLabel
```
- 数据点标签
- ```
Visible
```
  - 显示/隐藏标签
- ```
Position
```
  - 标签位置
- ```
Template
```
  - 自定义标签模板
```
ChartLegendSettings
```
- 图例配置
- ```
Visible
```
  - 显示/隐藏图例
- ```
Position
```
  - 图例位置（详见LegendPosition枚举）
```
ChartAnnotations
```
- 自定义注释
- 支持文本、图片、形状类型

syncfusion-blazor-charts

Original

Translation

Implementing Syncfusion Blazor Charts

实现Syncfusion Blazor图表

When to Use This Skill

何时使用本技能

Component Overview

组件概览

Documentation and Navigation Guide

文档与导航指南

Complete API Reference

完整API参考

Getting Started

快速入门

Chart Types

图表类型

Common Chart Types

常用图表类型

Specialized Chart Types

特殊图表类型

Axes and Data Configuration

轴与数据配置

Visual Elements

可视化元素

Interactive Features

交互功能

Customization and Appearance

自定义与外观配置

Accessibility and Internationalization

无障碍与国际化

Events

事件

Practical Examples and How-To Guides

实践示例与操作指南

Public Methods Reference

公共方法参考

Essential Methods

核心方法

⚠️ CRITICAL: API Usage Guidelines

⚠️ 重要提示：API使用规范

1. Enum Names - MUST Use Full Namespace

1. 枚举名称 - 必须使用完整命名空间

2. Component Property Restrictions

2. 组件属性限制

ChartCrosshairLine - Limited Properties

ChartCrosshairLine - 支持的属性有限

Striplines - Use Plural Form

带状线 - 使用复数形式标签

3. Validation Checklist

3. 校验清单

Quick Start Example

快速入门示例

Common Patterns

通用实现模式

Multi-Series Comparison Chart

多系列对比图表

Time-Series Line Chart with Zooming

支持缩放的时间序列折线图

Stacked Area Chart with Legend

带图例的堆叠面积图

Key Configuration Properties

核心配置属性

Chart Component (SfChart)

图表组件（SfChart）

Primary Axes (ChartPrimaryXAxis, ChartPrimaryYAxis)

主轴（ChartPrimaryXAxis、ChartPrimaryYAxis）

Series (ChartSeries)

系列（ChartSeries）

Interactivity

交互配置

Visual Elements

可视化元素

Additional Resources

更多资源

Chart Component (
`SfChart`
)

图表组件（
`SfChart`
）

Primary Axes (
`ChartPrimaryXAxis`
,
`ChartPrimaryYAxis`
)

主轴（
`ChartPrimaryXAxis`
、
`ChartPrimaryYAxis`
）

Series (
`ChartSeries`
)

系列（
`ChartSeries`
）