g2

📊 A highly interactive data-driven visualization grammar for statistical charts.

Showing:

Popularity

Downloads/wk

540

GitHub Stars

11K

Maintenance

Last Commit

1mo ago

Contributors

135

Package

Dependencies

0

License

Type Definitions

Tree-Shakeable

No?

Readme

English | 简体中文

G2

一套面向常规统计图表,以数据驱动的高交互可视化图形语法。

CI Coverage Status NPM Package NPM Downloads Dependencies Percentage of issues still open PRs Welcome

网站教程文档博客G2Plot

G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性。使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。

📺 线上示例

✨ 特性

  • 💯 完善的图形语法:数据到图形的映射,能够绘制出所有的图表。
  • 🤩 全新的交互语法:通过触发和反馈机制可以组合出各种交互行为,对数据进行探索。
  • 🦍 强大的 View 模块:可支持开发个性化的数据多维分析图形。
  • 👬 双引擎渲染:Canvas 或 SVG 任意切换。
  • 💄 可视化组件体系:面向交互、体验优雅。
  • 🛡 全面拥抱 TypeScript:提供完整的类型定义文件。

📦 安装

$ npm install @antv/g2

🔨 快速上手

在绘图前我们需要为 G2 准备一个 DOM 容器:

<div id="c1"></div>
import { Chart } from '@antv/g2';

const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

// Step 1: 创建 Chart 对象
const chart = new Chart({
  container: 'c1', // 指定图表容器 ID
  width: 600, // 指定图表宽度
  height: 300, // 指定图表高度
});

// Step 2: 载入数据源
chart.data(data);

// Step 3: 创建图形语法,绘制柱状图
chart.interval().position('genre*sold');

// Step 4: 渲染图表
chart.render();

⌨️ 本地开发

# 安装依赖
$ npm install

# 运行测试用例
$ npm run test

# 打开 electron 运行测试用例,监听文件变化构建
$ npm run test-live

# 运行 CI
$ npm run ci

# 运行网站
$ npm start

🏷️ 版本

你也可以在业务中使用基于 G2 封装的常规统计图表 G2Plot,可以使用配置的方式快速生成一个通用图表,降低开发者的使用成本。

🤝 如何贡献

如果您在使用的过程中碰到问题,可以先通过 issues 看看有没有类似的 bug 或者建议。

如需提交代码,请遵从我们的贡献指南

Let's fund issues in this repository

联系我们

钉钉群组号码: 30233731 / 35686967 (2 群)

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

chart.jsSimple HTML5 Charts using the <canvas> tag
User Rating
4.6/ 5
573
Top Feedback
47Easy to Use
36Performant
29Great Documentation
GitHub Stars
56K
Weekly Downloads
1M
echartsApache ECharts is a powerful, interactive charting and data visualization library for browser
User Rating
4.5/ 5
165
Top Feedback
11Great Documentation
11Performant
9Easy to Use
GitHub Stars
49K
Weekly Downloads
304K
mermaidGeneration of diagram and flowchart from text in a similar manner as markdown
User Rating
4.6/ 5
57
Top Feedback
5Great Documentation
4Easy to Use
3Performant
GitHub Stars
39K
Weekly Downloads
118K
apexcharts📊 Interactive JavaScript Charts built on SVG
User Rating
4.7/ 5
16
Top Feedback
4Easy to Use
2Great Documentation
2Highly Customizable
GitHub Stars
11K
Weekly Downloads
274K
@carbon/charts:bar_chart: :chart_with_upwards_trend:⠀Robust dataviz framework implemented using D3 & typescript
User Rating
5.0/ 5
1
Top Feedback
1Great Documentation
1Easy to Use
1Highly Customizable
GitHub Stars
426
Weekly Downloads
20K
@senx/warpviewWarpView Elements for Warp 10
User Rating
5.0/ 5
1
Top Feedback
N/A
GitHub Stars
5
Weekly Downloads
322
See 35 Alternatives

Tutorials

No tutorials found
Add a tutorial