Popularity
8.2
Declining
Activity
8.9
Declining
12,137
250
1,594

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

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 5.0

G2 是一个可视化语法,用于报表搭建、数据探索和可视化叙事。

Build Status Coverage Status npm Version npm Download npm License

examples

G2 5.0 仍在开发中,4.x 稳定版在 master 分支上.

G2 的名字来自于 Wilkinson 的《Grammar of Graphics》,并在功能和 API 设计上深受它的启发。这里有一些资源可以帮助你开始使用它:

  • 介绍:概述和开发动机
  • 案例:大量可供学习和复制粘贴的案例
  • 教程:交互式案例驱动的教程,帮助你了解核心概念
  • API:所有可视化组件的完整文档

✨ 特色

  • 渐进式使用:可以通过简明的声明,快速获得有意义的可视化图表,G2 会在内部会做出合理的推断。但是针对复杂和高级的场景,仍然可以添加更多的配置去满足你的需求。
  • 声明式 API:我们采用了函数式的声明式 API,可以通过更具编程风格的方式指定图表配置,这有助于更好地重用逻辑和更灵活地组织代码。
  • 高可扩展性:为了满足各种特定需求,G2 提供了一个方便和一致的机制来扩展你能想象到的一切,无论是一个比例尺,一个变换还是一个视觉元素,等等。你甚至可以基于这个机制定制一个全新的可视化工具。
  • 全面的语法:和传统可视化工具不同,G2 中没有图表的概念,而是通过组合视觉元素、变换、比例尺、坐标系变换和视图复合来获得图表。除了静态可视化之外,还支持制作由数据驱动的可视化动画,并且提供了一套精心设计的基于 Action 的交互语法。
  • 强大的渲染引擎:在 G2 底层有一个强大的渲染器 G,可用使用 Canvas、SVG 以及 WebGL 生成基于网页的可视化。同时 G 提供了大量的插件,使得 G2 能够绘制拥有新颖风格的图表(比如手绘风格)并且可以并完全拥抱 D3 的生态。

🔨 开始使用

可以通过 npm 或 Yarn 等包管理器来安装。

$ npm install @antv/g2
$ yarn add @antv/g2

成功安装之后,可以通过 import 导入 Chart 对象。

<div id="chart"></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 },
];

// 实例化图表并且指定容器的 id
const chart = new Chart({
  container: 'chart',
});

// 声明可视化
chart
  .interval() // 创建一个 Interval 的视觉元素,并且添加到图表中
  .data(data) // 给这个视觉元素绑定数据
  .encode('x', 'genre') // 将 genre 对应的列数据和 x 位置通道绑定
  .encode('y', 'sold'); // 将 sold 对应的列数据和 y 位置通道绑定

// 将可视化渲染进指定的容器
chart.render();

如果一切顺利,你可以得到下面的柱状图!

📮 参与贡献

  • 问题: 报告 bug 或者提出需求
  • 贡献指南:参与建设 G2
  • 讨论:在 Github 上或者钉钉群里面讨论(30233731, 35686967, 44788198)

📄 许可证

MIT@AntV.


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