syncfusion-javascript-chart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Charts in Syncfusion TypeScript & JavaScript

在 Syncfusion TypeScript 与 JavaScript 中实现图表

The Syncfusion Chart component provides a comprehensive suite of visualization tools for building interactive, data-driven dashboards. With 15+ chart types, advanced customization options, and real-time data support, you can create professional visualizations for any use case. Works in both TypeScript (with full type safety) and JavaScript (ES5 CDN-based or webpack).

Syncfusion Chart 组件提供了一套全面的可视化工具，可用于构建交互式、数据驱动的仪表板。凭借15+种图表类型、高级自定义选项和实时数据支持，你可以为任意使用场景打造专业的可视化效果。同时支持 TypeScript（具备完整类型安全）和 JavaScript（基于ES5 CDN 或 webpack 两种模式）。

Platform Support

平台支持

This skill covers both TypeScript and JavaScript implementations:

TypeScript (Primary):

Full type definitions and IDE support
Module-based imports with
```
Chart.Inject()
```
Webpack/bundler-based setup
Advanced type checking

JavaScript (ES5):

CDN-based or local script loading
Global namespace access (
```
ej.charts.Chart
```
)
No build step required
Compatible with ES5 and modern browsers

Where noted, code examples show both TS and JS variants. Choose based on your project setup.

本教程涵盖 TypeScript 和 JavaScript 两种实现方式：

TypeScript（首选）：

完整的类型定义与IDE支持
基于模块导入，配合
```
Chart.Inject()
```
使用
基于Webpack/打包工具的项目配置
高级类型检查能力

JavaScript（ES5）：

基于CDN或本地脚本加载
全局命名空间访问（
```
ej.charts.Chart
```
）
无需构建步骤
兼容ES5和现代浏览器

有标注的位置，代码示例会同时展示TS和JS两种版本，你可以根据项目配置选择合适的版本。

When to Use This Skill

何时使用本教程

Use this skill when you need to:

Create basic charts - Line, area, bar, column, pie, or scatter plots
Visualize complex data - Multiple series, stacked charts, grouped data
Build dashboards - Combine charts with real-time data updates
Customize appearance - Colors, fonts, animations, themes
Add interactivity - Tooltips, legends, selection, zooming, crosshairs
Implement advanced features - Technical indicators, trendlines, annotations
Export charts - PNG, SVG, PDF, or print functionality
Optimize performance - Handle large datasets efficiently
Support accessibility - WCAG compliance, keyboard navigation, RTL

当你需要完成以下任务时可使用本教程：

创建基础图表 - 折线图、面积图、条形图、柱形图、饼图或散点图
复杂数据可视化 - 多系列、堆叠图、分组数据展示
构建仪表板 - 结合实时数据更新的图表组合
自定义外观 - 颜色、字体、动画、主题配置
添加交互能力 - 提示框、图例、选择、缩放、十字准星
实现高级特性 - 技术指标、趋势线、标注
导出图表 - 导出为PNG、SVG、PDF格式或直接打印
性能优化 - 高效处理大型数据集
支持无障碍访问 - 符合WCAG标准、键盘导航、RTL支持

Navigation Guide

导航指南

Choose the reference that matches your task:

选择匹配你任务的参考文档：

Getting Started

入门指南

📄 Read: references/getting-started.md

Installation and setup
Basic chart creation with minimal code
Data binding fundamentals
Theme selection and initial configuration

📄 阅读： references/getting-started.md

安装与配置
用最少代码创建基础图表
数据绑定基础
主题选择与初始化配置

Chart Types & Selection

图表类型与选型

📄 Read: references/chart-types.md

Overview of 15+ chart types (Line, Area, Bar, Column, Pie, Doughnut, Polar, Radar, Waterfall, Funnel, Stock, etc.)
When to use each type
Basic implementation for each chart type
Series combinations and variations

📄 阅读： references/chart-types.md

15+种图表类型概览（折线图、面积图、条形图、柱形图、饼图、环形图、极坐标图、雷达图、瀑布图、漏斗图、股票图等）
各图表类型的适用场景
各图表类型的基础实现
系列组合与变体用法

Series Configuration

系列配置

📄 Read: references/series-configuration.md

Configuring series properties and data
Data labels and marker customization
Stacking and grouping strategies
Empty point handling and data gaps

📄 阅读： references/series-configuration.md

配置系列属性与数据
数据标签与标记点自定义
堆叠与分组策略
空值处理与数据缺口处理

Axes Customization

坐标轴自定义

📄 Read: references/axes-customization.md

Category, numeric, and datetime axes
Axis labels, formatting, and ranges
Multiple axes and panes
Custom axis positioning and scrolling

📄 阅读： references/axes-customization.md

分类轴、数值轴、日期时间轴
轴标签、格式化与范围设置
多轴与窗格配置
自定义轴定位与滚动

Features & Interaction

特性与交互

📄 Read: references/features-interaction.md

Tooltips, crosshairs, and track balls
Legend configuration and positioning
Selection, zooming, and panning
Annotations, markers, and indicators

📄 阅读： references/features-interaction.md

提示框、十字准星、轨迹球
图例配置与定位
选择、缩放和平移
标注、标记与指标

Styling & Appearance

样式与外观

📄 Read: references/styling-appearance.md

Color schemes, gradients, and themes
Font, border, and background customization
Chart area and plot area styling
Responsive design and layout

📄 阅读： references/styling-appearance.md

配色方案、渐变与主题
字体、边框与背景自定义
图表区域与绘图区域样式
响应式设计与布局

Advanced Features

高级特性

📄 Read: references/advanced-features.md

Technical indicators (SMA, EMA, MACD, RSI, Stochastic, etc.)
Trendlines and trend analysis
Export to PNG, SVG, PDF, Print
Animations and smooth transitions

📄 阅读： references/advanced-features.md

技术指标（SMA、EMA、MACD、RSI、随机指标等）
趋势线与趋势分析
导出为PNG、SVG、PDF、打印
动画与平滑过渡效果

Data Handling & Updates

数据处理与更新

📄 Read: references/data-handling.md

Dynamic data updates and real-time charts
Data editing and user interaction
Loading and caching large datasets
Working with various data sources

📄 阅读： references/data-handling.md

动态数据更新与实时图表
数据编辑与用户交互
大型数据集加载与缓存
适配多种数据源

Accessibility & RTL

无障碍访问与RTL

📄 Read: references/accessibility-rtl.md

WCAG compliance and accessibility standards
Keyboard navigation
ARIA labels and screen reader support
Right-to-left (RTL) language support

📄 阅读： references/accessibility-rtl.md

WCAG合规与无障碍标准
键盘导航
ARIA标签与屏幕阅读器支持
从右到左（RTL）语言支持

API Reference

API参考

📄 Read: references/api-reference.md

Complete Chart API documentation
All classes, enumerations, and interfaces
Methods and events reference
Module injection guide
Configuration patterns

📄 阅读： references/api-reference.md

完整的Chart API文档
所有类、枚举与接口说明
方法与事件参考
模块注入指南
配置模式

Troubleshooting & Optimization

故障排查与优化

📄 Read: references/troubleshooting.md

Common issues and solutions
Performance optimization techniques
Browser compatibility notes
Debugging strategies

📄 阅读： references/troubleshooting.md

常见问题与解决方案
性能优化技巧
浏览器兼容性说明
调试策略

Quick Start Example

快速入门示例

TypeScript:

typescript

import { Chart, LineSeries, DateTime, Legend, Tooltip, Category } from '@syncfusion/ej2-charts';

// Inject required modules
Chart.Inject(LineSeries, DateTime, Legend, Tooltip, Category);

const data = [
  { month: 'Jan', sales: 21 },
  { month: 'Feb', sales: 24 },
  { month: 'Mar', sales: 36 },
  { month: 'Apr', sales: 38 },
  { month: 'May', sales: 54 }
];

const chart = new Chart({
  primaryXAxis: { valueType: 'Category' },
  title: 'Monthly Sales',
  tooltip: { enable: true },
  legendSettings:{ visible: true },
  series: [{
    dataSource: data,
    xName: 'month',
    yName: 'sales',
    type: 'Line',
    name: 'Sales'
  }]
}, '#chart');

TypeScript：

typescript

import { Chart, LineSeries, DateTime, Legend, Tooltip, Category } from '@syncfusion/ej2-charts';

// Inject required modules
Chart.Inject(LineSeries, DateTime, Legend, Tooltip, Category);

const data = [
  { month: 'Jan', sales: 21 },
  { month: 'Feb', sales: 24 },
  { month: 'Mar', sales: 36 },
  { month: 'Apr', sales: 38 },
  { month: 'May', sales: 54 }
];

const chart = new Chart({
  primaryXAxis: { valueType: 'Category' },
  title: 'Monthly Sales',
  tooltip: { enable: true },
  legendSettings:{ visible: true },
  series: [{
    dataSource: data,
    xName: 'month',
    yName: 'sales',
    type: 'Line',
    name: 'Sales'
  }]
}, '#chart');

Common Patterns

常用模式

Pattern 1: Multi-Series Bar Chart

模式1：多系列条形图

Multiple data series displayed side-by-side for comparison:

typescript

series: [
  { dataSource: data, xName: 'month', yName: 'sales', type: 'Column', name: 'Sales' },
  { dataSource: data, xName: 'month', yName: 'revenue', type: 'Column', name: 'Revenue' }
]

并排展示多个数据系列便于对比：

typescript

series: [
  { dataSource: data, xName: 'month', yName: 'sales', type: 'Column', name: 'Sales' },
  { dataSource: data, xName: 'month', yName: 'revenue', type: 'Column', name: 'Revenue' }
]

Pattern 2: Stacked Column with Legend

模式2：带图例的堆叠柱形图

Stacked visualization showing composition and trends:

typescript

series: [
  { dataSource: data, xName: 'category', yName: 'value1', type: 'StackingColumn' },
  { dataSource: data, xName: 'category', yName: 'value2', type: 'StackingColumn' }
],
legend: { visible: true, position: 'Bottom' }

堆叠可视化展示构成与趋势：

typescript

series: [
  { dataSource: data, xName: 'category', yName: 'value1', type: 'StackingColumn' },
  { dataSource: data, xName: 'category', yName: 'value2', type: 'StackingColumn' }
],
legend: { visible: true, position: 'Bottom' }

Pattern 3: Real-Time Data Update

模式3：实时数据更新

Continuously updating chart with new data points:

typescript

// Update with new data
chart.series[0].dataSource = updatedData;
chart.refresh();

通过新数据点持续更新图表：

typescript

// Update with new data
chart.series[0].dataSource = updatedData;
chart.refresh();

Pattern 4: Interactive Selection

模式4：交互式选择

Enable user selection with event handling:

typescript

pointRender: (args: IPointRenderEventArgs) => {
  // Customize point on selection
},
selectionMode: 'Point'

启用用户选择与事件处理：

typescript

pointRender: (args: IPointRenderEventArgs) => {
  // Customize point on selection
},
selectionMode: 'Point'

Key Properties

核心属性

Chart-level:

```
primaryXAxis
```
,
```
primaryYAxis
```
- Configure axes
```
series
```
- Define data series
```
tooltip
```
- Enable/configure tooltips
```
legend
```
- Control legend display
```
title
```
- Chart title

Series-level:

```
dataSource
```
- Data binding
```
xName
```
,
```
yName
```
- Data field mapping
```
type
```
- Chart type (Line, Column, Pie, etc.)
```
marker
```
- Point customization
```
dataLabel
```
- Label display

Customization:

```
palette
```
- Color scheme
```
theme
```
- Built-in theme
```
background
```
- Chart background
```
height
```
,
```
width
```
- Dimensions

图表层级：

```
primaryXAxis
```
、
```
primaryYAxis
```
- 配置坐标轴
```
series
```
- 定义数据系列
```
tooltip
```
- 启用/配置提示框
```
legend
```
- 控制图例展示
```
title
```
- 图表标题

系列层级：

```
dataSource
```
- 数据绑定
```
xName
```
、
```
yName
```
- 数据字段映射
```
type
```
- 图表类型（Line、Column、Pie等）
```
marker
```
- 数据点自定义
```
dataLabel
```
- 标签展示

自定义配置：

```
palette
```
- 配色方案
```
theme
```
- 内置主题
```
background
```
- 图表背景
```
height
```
、
```
width
```
- 尺寸设置