Skip to content

antvis/G2

v5
Switch branches/tags
Code

Latest commit

* test: add text vis demo into integration

* feat: add area and stacked area

* feat: add area.step shape & add diffY transform

* docs: add area demo with population by state

* chore: add integration image

* chore: fix ci
2593de0

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time

English | 简体中文

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.