299 lines
13 KiB
Markdown
299 lines
13 KiB
Markdown
# JavaScript图表库
|
||
|
||
`图表` `数据可视化` `JavaScript` `Canvas` `React` `Angular` `Vue`
|
||
|
||
# JavaScript 图表库
|
||
|
||
<div align="center">
|
||
<picture>
|
||
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/ag-logos/svg-logos/AG-Charts-Logo_Dark-Theme.svg?raw=true"/>
|
||
<source media="(prefers-color-scheme: light)" srcset="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/ag-logos/svg-logos/AG-Charts-Logo_Light-Theme.svg?raw=true"/>
|
||
<img width="100%" alt="AG Charts 徽标" src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/ag-logos/svg-logos/AG-Charts-Logo_Light-Theme.svg?raw=true"/>
|
||
</picture>
|
||
<div align="center">
|
||
<h4><a href="https://www.ag-grid.com/charts/">🌐 官网</a> • <a href="https://www.ag-grid.com/charts/javascript/quick-start/">📖 文档</a> • <a href="https://www.ag-grid.com/charts/gallery/">📊 图表画廊</a></h4>
|
||
</div>
|
||
<br>
|
||
<a href="https://github.com/ag-grid/ag-charts/releases">
|
||
<img src="https://img.shields.io/github/v/release/ag-grid/ag-charts?style=for-the-badge" alt="GitHub Release">
|
||
</a>
|
||
<a href="https://www.npmjs.com/package/ag-charts-community">
|
||
<img src="https://img.shields.io/npm/dm/ag-charts-community?style=for-the-badge" alt="NPM 下载量">
|
||
</a>
|
||
<a href="https://github.com/ag-grid/ag-charts">
|
||
<img src="https://img.shields.io/github/stars/ag-grid/ag-charts?style=for-the-badge" alt="GitHub 星标数">
|
||
</a>
|
||
<a href="https://github.com/ag-grid/ag-charts">
|
||
<img alt="GitHub forks" src="https://img.shields.io/github/forks/ag-grid/ag-charts?style=for-the-badge">
|
||
</a>
|
||
<br><br>
|
||
<p>
|
||
AG Charts 是一款<strong>功能完备</strong>、<strong>高度可定制</strong>的基于 Canvas 的 JavaScript 图表库。
|
||
它具备<strong>卓越的性能</strong>，<strong>无任何第三方依赖</strong>，并支持
|
||
<strong>React</strong>、<strong>Angular</strong> 和 <strong>Vue</strong>。
|
||
</p>
|
||
<br>
|
||
</div>
|
||
|
||
<picture>
|
||
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/ag-grid/ag-charts/blob/latest/packages/ag-charts-website/public/images/readme-assets/gallery-dark.gif?raw=true"/>
|
||
<source media="(prefers-color-scheme: light)" srcset="https://github.com/ag-grid/ag-charts/blob/latest/packages/ag-charts-website/public/images/readme-assets/gallery.gif?raw=true"/>
|
||
<img width="100%" alt="AG Charts JavaScript 图表示例预览" src="https://github.com/ag-grid/ag-charts/blob/latest/packages/ag-charts-website/public/images/readme-assets/gallery.gif?raw=true"/>
|
||
</picture>
|
||
|
||
## 📖 概览
|
||
|
||
<details>
|
||
<summary><strong>目录</strong></summary>
|
||
|
||
- [📖 概览](#-概览)
|
||
- [图表类型](#图表类型)
|
||
- [功能特性](#功能特性)
|
||
- [金融图表](#金融图表)
|
||
- [地图图表](#地图图表)
|
||
- [⚡️ 快速开始](#️-快速开始)
|
||
- [安装](#安装)
|
||
- [配置](#配置)
|
||
- [🤝 支持](#-支持)
|
||
- [企业支持](#企业支持)
|
||
- [Bug 报告](#bug-报告)
|
||
- [问题咨询](#问题咨询)
|
||
- [贡献](#贡献)
|
||
- [⚠️ 许可证](#️-许可证)
|
||
|
||
</details>
|
||
|
||
AG Charts 提供两个版本：社区版和企业版。
|
||
|
||
- `ag-charts-community` 免费使用，基于 MIT 许可证，包含核心图表类型，如[饼图](https://www.ag-grid.com/charts/javascript/pie-series/)、[面积图](https://www.ag-grid.com/charts/javascript/area-series/)、[柱状图](https://www.ag-grid.com/charts/javascript/bar-series/)、[散点图](https://www.ag-grid.com/charts/javascript/scatter-series/)和[气泡图](https://www.ag-grid.com/charts/javascript/bubble-series/)，以及 JavaScript 图表库应有的全部核心功能，包括[无障碍访问](https://www.ag-grid.com/charts/javascript/accessibility/)、[工具提示](https://www.ag-grid.com/charts/javascript/tooltips/)、[主题](https://www.ag-grid.com/charts/javascript/themes/)、[标记点](https://www.ag-grid.com/charts/javascript/markers/)、[图例](https://www.ag-grid.com/charts/javascript/legend/)、[坐标轴类型](https://www.ag-grid.com/charts/javascript/axes-types/)和[次坐标轴](https://www.ag-grid.com/charts/javascript/axes-secondary/)。
|
||
- `ag-charts-enterprise` 采用商业许可证，提供额外图表类型，如[地图](https://www.ag-grid.com/charts/javascript/maps/)、[桑基图](https://www.ag-grid.com/charts/javascript/sankey-series/)、[雷达图](https://www.ag-grid.com/charts/javascript/radar-area-series/)和[瀑布图](https://www.ag-grid.com/charts/javascript/waterfall-series/)，以及高级交互功能，如[动画](https://www.ag-grid.com/charts/javascript/animation/)、[右键菜单](https://www.ag-grid.com/charts/javascript/context-menu/)、[缩放](https://www.ag-grid.com/charts/javascript/zoom/)、[导航器](https://www.ag-grid.com/charts/javascript/navigator/)、[同步联动](https://www.ag-grid.com/charts/javascript/sync/)等，还包括[金融图表](https://www.ag-grid.com/charts/javascript/financial-charts/)。
|
||
|
||
### 功能与图表类型
|
||
|
||
#### 图表类型
|
||
|
||
AG Charts 提供 20 余种 JavaScript 图表类型，每种均可完全自定义：
|
||
|
||
| 图表类型 | AG Charts 社区版 | AG Charts 企业版 |
|
||
| -------- | --------------- | --------------- |
|
||
| 柱状图 | ✅ | ✅ |
|
||
| 折线图 | ✅ | ✅ |
|
||
| 面积图 | ✅ | ✅ |
|
||
| 散点图 | ✅ | ✅ |
|
||
| 气泡图 | ✅ | ✅ |
|
||
| 饼图 | ✅ | ✅ |
|
||
| 环形图 | ✅ | ✅ |
|
||
| 组合图 | ✅ | ✅ |
|
||
| 箱线图 | ❌ | ✅ |
|
||
| K线图（蜡烛图） | ❌ | ✅ |
|
||
| OHLC 图 | ❌ | ✅ |
|
||
| 热力图 | ❌ | ✅ |
|
||
| 直方图 | ❌ | ✅ |
|
||
| 南丁格尔玫瑰图 | ❌ | ✅ |
|
||
| 雷达折线图 | ❌ | ✅ |
|
||
| 雷达面积图 | ❌ | ✅ |
|
||
| 径向柱图 | ❌ | ✅ |
|
||
| 径向条形图 | ❌ | ✅ |
|
||
| 范围面积图 | ❌ | ✅ |
|
||
| 范围条形图 | ❌ | ✅ |
|
||
| 旭日图 | ❌ | ✅ |
|
||
| 树状图 | ❌ | ✅ |
|
||
| 瀑布图 | ❌ | ✅ |
|
||
| 桑基图 | ❌ | ✅ |
|
||
| 弦图 | ❌ | ✅ |
|
||
|
||
#### 功能特性
|
||
|
||
AG Charts JavaScript 图表库涵盖您期望的所有功能：
|
||
|
||
| 功能 | AG Charts 社区版 | AG Charts 企业版 |
|
||
| ---- | --------------- | --------------- |
|
||
| 无障碍访问 | ✅ | ✅ |
|
||
| 本地化 | ✅ | ✅ |
|
||
| 系列高亮 | ✅ | ✅ |
|
||
| 工具提示 | ✅ | ✅ |
|
||
| 触摸支持 | ✅ | ✅ |
|
||
| 交叉线 | ✅ | ✅ |
|
||
| 图例 | ✅ | ✅ |
|
||
| 样式器 | ✅ | ✅ |
|
||
| 系列标记点 | ✅ | ✅ |
|
||
| 动画 | ❌ | ✅ |
|
||
| 右键菜单 | ❌ | ✅ |
|
||
| 十字准线 | ❌ | ✅ |
|
||
| 导航器 | ❌ | ✅ |
|
||
| 同步联动 | ❌ | ✅ |
|
||
| 缩放 | ❌ | ✅ |
|
||
| 注释 | ❌ | ✅ |
|
||
| 误差棒 | ❌ | ✅ |
|
||
|
||
> ℹ️ **注意：** 请访问[定价页面](https://www.ag-grid.com/charts/license-pricing/)查看完整功能对比。
|
||
|
||
### 金融图表
|
||
|
||
只需提供数据，即可以最少的配置构建支持高级注释的交互式金融图表：
|
||
|
||
```js
|
||
const options = {
|
||
data: getData(),
|
||
};
|
||
|
||
AgCharts.createFinancialChart(options);
|
||
```
|
||
|
||
创建完成后，用户即可与金融图表进行交互并添加注释。
|
||
|
||
<picture>
|
||
<source media="(prefers-color-scheme: light)" srcset="https://github.com/ag-grid/ag-charts/blob/latest/packages/ag-charts-website/public/images/readme-assets/financial-charts-annotations-light.gif?raw=true"/>
|
||
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/ag-grid/ag-charts/blob/latest/packages/ag-charts-website/public/images/readme-assets/financial-charts-annotations.gif?raw=true"/>
|
||
<img width="100%" alt="金融图表注释" src="https://github.com/ag-grid/ag-charts/blob/latest/packages/ag-charts-website/public/images/readme-assets/financial-charts-annotations-light.gif?raw=true"/>
|
||
</picture>
|
||
|
||
默认图表类型为[K线图（蜡烛图）](https://www.ag-grid.com/charts/javascript/candlestick-series/)，另支持 [OHLC 图](https://www.ag-grid.com/charts/javascript/ohlc-series/)和[折线图](https://www.ag-grid.com/charts/javascript/line-series/)，满足多样化数据可视化需求。
|
||
|
||
---
|
||
|
||
### 地图图表
|
||
|
||
地图系列可让您以多种方式呈现地理数据。
|
||
|
||
<picture>
|
||
<source media="(prefers-color-scheme: light)" srcset="https://github.com/ag-grid/ag-charts/blob/latest/packages/ag-charts-website/public/images/readme-assets/map.gif?raw=true"/>
|
||
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/ag-grid/ag-charts/blob/latest/packages/ag-charts-website/public/images/readme-assets/map-dark.gif?raw=true"/>
|
||
<img width="100%" alt="AG Charts 地图图表预览" src="https://github.com/ag-grid/ag-charts/blob/latest/packages/ag-charts-website/public/images/readme-assets/map.gif?raw=true"/>
|
||
</picture>
|
||
|
||
地图可使用[形状](https://www.ag-grid.com/charts/javascript/map-shapes/)、[线条](https://www.ag-grid.com/charts/javascript/map-lines/)和[标记点](https://www.ag-grid.com/charts/javascript/map-markers/)系列展示数据：
|
||
|
||
```js
|
||
const options = {
|
||
topology: topology,
|
||
series: [
|
||
{
|
||
type: 'map-shape',
|
||
data: pacific,
|
||
idKey: 'name',
|
||
title: '太平洋',
|
||
},
|
||
// ...
|
||
],
|
||
legend: {
|
||
enabled: true,
|
||
},
|
||
// ...
|
||
};
|
||
```
|
||
|
||
## ⚡️ 快速开始
|
||
|
||
AG Charts 配置简单——只需提供数据和系列类型以及其他图表选项即可。以下为原生 JavaScript 安装说明，框架专属指南请参阅 **React**、**Angular** 和 **Vue** 对应文档。
|
||
|
||
### 安装
|
||
|
||
```sh
|
||
$ npm install ag-charts-community
|
||
```
|
||
|
||
### 配置
|
||
|
||
1. 提供容器元素
|
||
|
||
```html
|
||
<!doctype html>
|
||
<html lang="zh">
|
||
<head>
|
||
<title>AG Charts 快速开始</title>
|
||
<!-- JavaScript 图表核心库 -->
|
||
<script src="https://cdn.jsdelivr.net/npm/ag-charts-community/dist/umd/ag-charts-community.js"></script>
|
||
</head>
|
||
<body>
|
||
<!-- 图表容器 -->
|
||
<div id="myChart"></div>
|
||
<!-- 图表配置文件 -->
|
||
<script src="index.js"></script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
2. 实例化 JavaScript 图表
|
||
|
||
```js
|
||
// 图表选项
|
||
const options = {};
|
||
|
||
// 创建图表
|
||
const chart = agCharts.AgCharts.create(options);
|
||
```
|
||
|
||
3. 定义图表数据和系列
|
||
|
||
```js
|
||
// 图表选项
|
||
const options = {
|
||
// 容器：用于承载图表的 HTML 元素
|
||
container: document.getElementById('myChart'),
|
||
// 数据：要在图表中显示的数据
|
||
data: [
|
||
{ month: '1月', avgTemp: 2.3, iceCreamSales: 162000 },
|
||
{ month: '3月', avgTemp: 6.3, iceCreamSales: 302000 },
|
||
{ month: '5月', avgTemp: 16.2, iceCreamSales: 800000 },
|
||
{ month: '7月', avgTemp: 22.8, iceCreamSales: 1254000 },
|
||
{ month: '9月', avgTemp: 14.5, iceCreamSales: 950000 },
|
||
{ month: '11月', avgTemp: 8.9, iceCreamSales: 200000 },
|
||
],
|
||
// 系列：定义使用的图表类型和数据
|
||
series: [{ type: 'bar', xKey: 'month', yKey: 'iceCreamSales' }],
|
||
};
|
||
```
|
||
|
||
> ℹ️ **注意：** 有关使用 AG Charts 构建 JavaScript 图表的更多信息，请参阅我们的[文档](https://www.ag-grid.com/charts/javascript/quick-start/)。
|
||
|
||
## 🤝 支持
|
||
|
||
### 企业支持
|
||
|
||
AG Charts 企业版客户可通过 [ZenDesk](https://ag-grid.zendesk.com/hc/en-us) 获得专属支持服务，由我们的支持团队和工程团队全程跟进。
|
||
|
||
### Bug 报告
|
||
|
||
如果您发现了 Bug，请在本仓库的 [issues](https://github.com/ag-grid/ag-charts/issues) 区提交报告。
|
||
|
||
<img src="https://img.shields.io/github/issues-closed/ag-grid/ag-charts?style=for-the-badge&color=%233d8c40" alt="GitHub Issues" height="26">
|
||
|
||
### 问题咨询
|
||
|
||
请在 [StackOverflow](https://stackoverflow.com/questions/tagged/ag-charts) 使用 `ag-charts` 标签搜索类似问题。如未找到相关内容，可在那里发布新问题。请勿通过 GitHub issues 提问。
|
||
|
||
<img src="https://img.shields.io/stackexchange/stackoverflow.com/t/ag-charts?style=for-the-badge&color=%233d8c40" alt="Stack Exchange 问题数" height="26">
|
||
|
||
### 贡献
|
||
|
||
AG Charts 由一支位于伦敦的开发团队协同开发。如果您希望加入团队，请将申请发送至 info@ag-grid.com。
|
||
|
||
## ⚠️ 许可证
|
||
|
||
`ag-charts-community` 采用 **MIT** 许可证。
|
||
|
||
`ag-charts-enterprise` 采用**商业**许可证。
|
||
|
||
详情请参阅 [LICENSE 文件](./LICENSE.txt)。
|
||
|
||
## AG Grid
|
||
|
||
AG Grid 是我们的旗舰产品，一款**功能完备**、**高度可定制**的 JavaScript 数据表格。它具备**卓越的性能**，**无任何第三方依赖**，并支持 **React**、**Angular** 和 **Vue**。
|
||
|
||
AG Charts 在 AG Grid 中作为[集成图表](https://www.ag-grid.com/javascript-data-grid/integrated-charts/)功能的底层引擎。
|
||
|
||
了解更多请访问 [ag-grid.com](https://www.ag-grid.com/)
|
||
|
||
<div align="center">
|
||
|
||
<hr/>
|
||
|
||
<strong>关注我们，第一时间获取 AG Grid 最新动态：</strong>
|
||
|
||
<a href="https://x.com/ag_grid"><img src="https://img.shields.io/badge/-X%20(Twitter)-black?style=for-the-badge&logo=x" alt="Twitter" height="36"></a>
|
||
<a href="https://www.linkedin.com/company/ag-grid/"><img src="https://img.shields.io/badge/-LinkedIn-blue?style=for-the-badge&logo=linkedin" alt="LinkedIn" height="36"></a>
|
||
<a href="https://www.youtube.com/c/ag-grid"><img src="https://img.shields.io/badge/-YouTube-red?style=for-the-badge&logo=youtube" alt="YouTube" height="36"></a>
|
||
<a href="https://blog.ag-grid.com"><img src="https://img.shields.io/badge/-博客-grey?style=for-the-badge&logo=rss" alt="博客" height="36"></a>
|
||
|
||
</div> |