https://github.com/ant-design/ant-design-charts-0.x-site
https://github.com/ant-design/ant-design-charts-0.x-site
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ant-design/ant-design-charts-0.x-site
- Owner: ant-design
- Created: 2020-09-27T02:33:28.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-09-28T12:55:05.000Z (almost 5 years ago)
- Last Synced: 2025-01-01T09:26:07.987Z (6 months ago)
- Language: TypeScript
- Size: 6.33 MB
- Stars: 0
- Watchers: 9
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: history.md
Awesome Lists containing this project
README
# @ant-design/charts
A React chart library, based on [G2Plot](https://antv-g2plot-v1.gitee.io/zh)
  [](https://github.com/ant-design/ant-design-charts/stargazers)
## Features
- Easy to use
- TypeScript
- Pretty & Lightweight
- Responsive
- Storytelling
## Installation
### npm
```bash | pure
$ npm install @ant-design/charts
```
## Usage
### ClassComponent
```tsx | pure
import React, { Component, createRef } from 'react';
import { Line } from '@ant-design/charts';
class Page extends Component {
ref = createRef();
// DownloadImage
downloadImage = () => {
this.ref.current?.downloadImage();
};
// Get data base64
toDataURL = () => {
console.log(this.ref.current?.toDataURL());
};
render() {
const data = [
{ year: '1991', value: 3 },
{ year: '1992', value: 4 },
{ year: '1993', value: 3.5 },
{ year: '1994', value: 5 },
{ year: '1995', value: 4.9 },
{ year: '1996', value: 6 },
{ year: '1997', value: 7 },
{ year: '1998', value: 9 },
{ year: '1999', value: 13 },
];
const config = {
data,
title: {
visible: true,
text: '带数据点的折线图',
},
xField: 'year',
yField: 'value',
};
return (
下载图片
获取图片信息
);
}
}
export default Page;
```
### FunctionComponent
```tsx | pure
import React, { useRef } from 'react';
import { Line } from '@ant-design/charts';
const Page: React.FC = () => {
const data = [
{ year: '1991', value: 3 },
{ year: '1992', value: 4 },
{ year: '1993', value: 3.5 },
{ year: '1994', value: 5 },
{ year: '1995', value: 4.9 },
{ year: '1996', value: 6 },
{ year: '1997', value: 7 },
{ year: '1998', value: 9 },
{ year: '1999', value: 13 },
];
const config = {
data,
title: {
visible: true,
text: '带数据点的折线图',
},
xField: 'year',
yField: 'value',
};
const ref = useRef();
// 导出图片
const downloadImage = () => {
ref.current?.downloadImage();
};
// 获取图表 base64 数据
const toDataURL = () => {
console.log(ref.current?.toDataURL());
};
return (
导出图片
获取图表信息
);
};
export default Page;
```
result：
## Gallery
[gallery](https://charts-v0.ant.design/demos/global)
## Document
### API
Direct [G2Plot](https://antv-g2plot-v1.gitee.io/zh)
Extra props:
| Property | Description | Type | defaultValue |
| --------- | ----------------- | ------------------------------------------- | ------------ |
| chartRef | chart ref | (React.MutableRefObject<Line>)=> void | - |
| className | container class | string | - |
| style | container style | React.CSSProperties | - |
| memoData | controll rerender | string \| number \| any [] | - |
[More usage](https://charts-v0.ant.design/guide/case)
### [FAQ](https://github.com/ant-design/ant-design-charts/issues)
### How to Contribute
We welcome all contributions.
### License
Charts is available under the License MIT.
## develop
### depend
- install [nodejs](https://nodejs.org/en/)
### start
```bash | pure
# 安装依赖
$ npm install
# 开发 library
$ npm run dev
```