75 lines
2.4 KiB
Markdown
75 lines
2.4 KiB
Markdown
# G2: The Grammar of Graphics in JavaScript
|
|
|
|
[](https://travis-ci.org/antvis/g2)
|
|
|
|
|
|
[](https://www.npmjs.com/package/@antv/g2)
|
|
[](https://npmjs.org/package/@antv/g2)
|
|
[](http://isitmaintained.com/project/antvis/g2 "Percentage of issues still open")
|
|
|
|
G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。
|
|
|
|
**在此衷心感谢[《The Grammar of Graphics》](https://www.cs.uic.edu/~wilkinson/TheGrammarOfGraphics/GOG.html)的作者 [Leland Wilkinson](https://en.wikipedia.org/wiki/Leland_Wilkinson)，为 G2 的图形语法提供了理论基础！**
|
|
|
|
<p align="center"><a href="https://g2.antv.vision/zh/examples/gallery/line"><img src="https://user-images.githubusercontent.com/6628666/68994104-1061b700-08ba-11ea-8017-3534fc85bc2f.jpeg" /></a></p>
|
|
|
|
|
|
## 安装
|
|
|
|
```bash
|
|
npm install @antv/g2
|
|
```
|
|
|
|
## 快速开始
|
|
|
|
<img src="https://gw.alipayobjects.com/zos/rmsportal/aHvVgFiBnGzzKCEjdVtL.png" width="450">
|
|
|
|
```html
|
|
<div id="c1"></div>
|
|
```
|
|
|
|
```js
|
|
import G2 from '@antv/g2';
|
|
|
|
const data = [
|
|
{ genre: 'Sports', sold: 275 },
|
|
{ genre: 'Strategy', sold: 1150 },
|
|
{ genre: 'Action', sold: 120 },
|
|
{ genre: 'Shooter', sold: 350 },
|
|
{ genre: 'Other', sold: 150 },
|
|
];
|
|
|
|
const chart = new G2.Chart({
|
|
container: 'c1',
|
|
width: 500,
|
|
height: 500
|
|
});
|
|
|
|
chart.source(data);
|
|
chart.interval().position('genre*sold').color('genre');
|
|
chart.render();
|
|
```
|
|
|
|
[更多示例](https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html)
|
|
|
|
## 本地开发
|
|
|
|
```bash
|
|
$ npm install
|
|
|
|
# 跑测试用例
|
|
$ npm run test-live
|
|
|
|
# 监听文件变化构建，并打开 demo 页面
|
|
$ npm run dev
|
|
|
|
# 打开 demo
|
|
$ npm run demos
|
|
```
|
|
|
|
## 如何贡献
|
|
|
|
如果您在使用的过程中碰到问题，可以先通过 [issues](https://github.com/antvis/g2/issues) 看看有没有类似的 bug 或者建议。
|
|
|
|
如需提交代码，请遵从我们的[贡献指南](https://github.com/antvis/g2/blob/master/CONTRIBUTING.md)。
|