1 | <img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> [English](./README.en-US.md) | 简体中文
|
2 |
|
3 | <h1 align="center">
|
4 | <b>G2</b>
|
5 | </h1>
|
6 |
|
7 | <div align="center">
|
8 |
|
9 | 一套面向常规统计图表,以数据驱动的高交互可视化图形语法。
|
10 |
|
11 | [![](https://img.shields.io/travis/antvis/g2.svg)](https://travis-ci.org/antvis/g2) ![CI](https://github.com/antvis/G2/workflows/CI/badge.svg) [![Coverage Status](https://coveralls.io/repos/github/antvis/G2/badge.svg?branch=master)](https://coveralls.io/github/antvis/G2?branch=master) [![NPM Package](https://img.shields.io/npm/v/@antv/g2.svg)](https://www.npmjs.com/package/@antv/g2) [![NPM Downloads](http://img.shields.io/npm/dm/@antv/g2.svg)](https://npmjs.org/package/@antv/g2) ![Dependencies](https://img.shields.io/badge/dependencies-up%20to%20date-brightgreen.svg) [![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g2.svg)](http://isitmaintained.com/project/antvis/g2 'Percentage of issues still open') [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=shields)](https://github.com/antvis/g2/pulls)
|
12 |
|
13 | ![](https://img.shields.io/badge/language-TypeScript-red.svg) ![](https://img.shields.io/badge/license-MIT-000000.svg)
|
14 |
|
15 | [![](https://img.shields.io/twitter/follow/AntV_Alipay.svg?label=AntV&style=social)](https://twitter.com/AntV_Alipay)
|
16 |
|
17 | </div>
|
18 |
|
19 | <p align="center">
|
20 | <a href="https://g2.antv.vision/zh">网站</a> •
|
21 | <a href="https://g2.antv.vision/zh/docs/manual/about-g2">教程文档</a> •
|
22 | <a href="https://www.yuque.com/antv">博客</a> •
|
23 | <a href="https://github.com/antvis/G2Plot">G2Plot</a>
|
24 | </p>
|
25 |
|
26 | G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性。使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。
|
27 |
|
28 | ## 📺 线上示例
|
29 |
|
30 | <a href="https://g2.antv.vision/zh/examples/gallery"><img src="https://user-images.githubusercontent.com/6628666/75466330-fe1d0c00-59c4-11ea-91ba-506f60ef8af4.png" style='width: 100%'/></a>
|
31 |
|
32 | ## ✨ 特性
|
33 |
|
34 | - 💯 完善的图形语法:数据到图形的映射,能够绘制出所有的图表。
|
35 | - 🤩 全新的交互语法:通过触发和反馈机制可以组合出各种交互行为,对数据进行探索。
|
36 | - 🦍 强大的 View 模块:可支持开发个性化的数据多维分析图形。
|
37 | - 👬 双引擎渲染:Canvas 或 SVG 任意切换。
|
38 | - 💄 可视化组件体系:面向交互、体验优雅。
|
39 | - 🛡 全面拥抱 TypeScript:提供完整的类型定义文件。
|
40 |
|
41 | ## 📦 安装
|
42 |
|
43 | ```bash
|
44 | $ npm install @antv/g2
|
45 | ```
|
46 |
|
47 | ## 🔨 快速上手
|
48 |
|
49 | <img src="https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*8qbLQb7A0loAAAAAAAAAAABkARQnAQ" style="width: 600px">
|
50 |
|
51 | 在绘图前我们需要为 G2 准备一个 DOM 容器:
|
52 |
|
53 | ```html
|
54 | <div id="c1"></div>
|
55 | ```
|
56 |
|
57 | ```ts
|
58 | import { Chart } from '@antv/g2';
|
59 |
|
60 | const data = [
|
61 | { genre: 'Sports', sold: 275 },
|
62 | { genre: 'Strategy', sold: 115 },
|
63 | { genre: 'Action', sold: 120 },
|
64 | { genre: 'Shooter', sold: 350 },
|
65 | { genre: 'Other', sold: 150 },
|
66 | ];
|
67 |
|
68 | // Step 1: 创建 Chart 对象
|
69 | const chart = new Chart({
|
70 | container: 'c1', // 指定图表容器 ID
|
71 | width: 600, // 指定图表宽度
|
72 | height: 300, // 指定图表高度
|
73 | });
|
74 |
|
75 | // Step 2: 载入数据源
|
76 | chart.data(data);
|
77 |
|
78 | // Step 3: 创建图形语法,绘制柱状图
|
79 | chart.interval().position('genre*sold');
|
80 |
|
81 | // Step 4: 渲染图表
|
82 | chart.render();
|
83 | ```
|
84 |
|
85 | ## ⌨️ 本地开发
|
86 |
|
87 | ```bash
|
88 | # 安装依赖
|
89 | $ npm install
|
90 |
|
91 | # 运行测试用例
|
92 | $ npm run test
|
93 |
|
94 | # 打开 electron 运行测试用例,监听文件变化构建
|
95 | $ npm run test-live
|
96 |
|
97 | # 运行 CI
|
98 | $ npm run ci
|
99 |
|
100 | # 运行网站
|
101 | $ npm start
|
102 | ```
|
103 |
|
104 | ## 🏷️ 版本
|
105 |
|
106 | - v3.5.x: https://github.com/antvis/G2/tree/v3.5.x
|
107 | - v4.0.x: https://github.com/antvis/G2/tree/v4.0.x
|
108 |
|
109 | > 你也可以在业务中使用基于 G2 封装的常规统计图表 **[G2Plot](https://github.com/antvis/G2Plot)**,可以使用配置的方式快速生成一个通用图表,降低开发者的使用成本。
|
110 |
|
111 | ## 🤝 如何贡献
|
112 |
|
113 | 如果您在使用的过程中碰到问题,可以先通过 [issues](https://github.com/antvis/g2/issues) 看看有没有类似的 bug 或者建议。
|
114 |
|
115 | 如需提交代码,请遵从我们的[贡献指南](https://github.com/antvis/g2/blob/master/CONTRIBUTING.md)。
|
116 |
|
117 | <a href="https://issuehunt.io/r/antvis/G2" rel="nofollow" target="_blank"><img src="https://camo.githubusercontent.com/fcf6ed4dcbd95ccadfe62647fc93194b7262c862de38406e5dae68aa682c85c3/68747470733a2f2f697373756568756e742e696f2f7374617469632f656d6265642f697373756568756e742d627574746f6e2d76312e737667" alt="Let's fund issues in this repository" data-canonical-src="https://issuehunt.io/static/embed/issuehunt-button-v1.svg" style="max-width:100%;"></a>
|
118 |
|
119 | ## 联系我们
|
120 |
|
121 | 钉钉群组号码: 30233731 / 35686967 (2 群)
|
122 |
|
123 | <img src="https://gw.alipayobjects.com/zos/antfincdn/8qEHi7GiaN/G2Plot-dingding.JPG" width="200" height="266" />
|