Popularity
8.2
Growing
Activity
9.1
Growing
10,924
263
1,270

Programming language: TypeScript
License: MIT License
Tags: Data Visualization     D3    
Latest version: v4.1.27

G2 alternatives and similar libraries

Based on the "d3" category.
Alternatively, view G2 alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of G2 or a related project?

Add another 'd3' Library

README

[English](./README.en-US.md) | 简体中文

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 或者建议。

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

联系我们

钉钉群组号码: 30233731


*Note that all licence references and agreements mentioned in the G2 README section above are relevant to that project's source code only.