G2Plot 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
G2Plot 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: MIT
开发语言: TypeScript
操作系统: 跨平台
收录时间: 2019-11-27
提 交 者: AntV

一套简单、易用、并具备一定扩展能力和组合能力的统计图表库,基于图形语法理论搭建而成,『G2Plot』中的 G2 即意指图形语法 (the Grammar of Graphics),同时也致敬了 ggplot2。我们想做的事有三件:(1)使用户不用成为可视化专家也能够轻松制作出优雅美观的图表 (2)保证图表能够经受得起业务的检验,在真实的场景中易用、好用 (3)探索统计图表的更多可能性,使统计图表变得更好玩、更酷。

特性

  • 📦 开箱即用、体验优雅的高质量统计图表

    G2Plot 呈现给用户的是一套提炼自企业级产品的视觉语言和设计规范。不仅对图表的整体视觉样式进行了优化,并且针对每一个图表自身的特点,沉淀出一套最佳配置,保证用户能够通过最少的配置制作出优雅、标准的图表。

  • 📊 响应式:让图表更聪明

    在现实的图表应用场景中,一个棘手的难题是图表的展示空间往往并不足够显示图表的数据量,造成极值情况下文本的重叠遮挡、内容无法自适应、内容裁剪等问题。G2Plot 借鉴宽容性设计的思想,在图表的信息密度过高时,对图表辅助信息进行抽稀,保证图表主要信息的展示和基本可读性。

  • 🔳 向前一步:会讲故事的图表

    在 G2Plot 体系下,图表不仅仅只是各不相关的实例,图层概念的引入提供了多图表组合、叠加、联动,共同讲述一个数据故事的可能性。未来,我们还将探索统计图表转化信息图的可能性,丰富统计图表的表现能力。

安装

$ npm install @antv/g2plot

使用

<div id="container"></div>
import { Bar } from '@antv/g2plot';

const data = [
  { year: '1951 年', sales: 38 },
  { year: '1952 年', sales: 52 },
  { year: '1956 年', sales: 61 },
  { year: '1957 年', sales: 145 },
  { year: '1958 年', sales: 48 },
];

const bar = new Bar(document.getElementById('container'), {
  data,
  xField: 'sales',
  yField: 'year',
  colorField: 'year',
});

bar.render();

开发

$ npm install

# run test case
$ npm run test-live

# build watching file changes and run demos
$ npm run dev

# run demos
$ npm run demos
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

G2Plot 的相关博客

[FE] G2Plot 更新图表的两种方式

第一种是使用 G2Plot 对象上的 changeData 方法,如果不涉及到全局 title 等这些的更改,可以采用这种方式。 也就是说,只有纯...

用Blazor技术封装G2Plot实现Charts组件

Blazor是一个使用 .NET 生成交互式客户端 Web UI 的框架。目前社区刚起步,相关的组件并不多,有幸有一群爱好者正在努力建设社...

G2Plot: 你绝对想不到柱形图背后有这么多故事

G2Plot 是 AntV 团队打造的开箱即用、易于配置、具有良好视觉和交互体验的通用统计图表库,本文介绍 G2Plot 在打造柱形图背后...

进无止境,蚂蚁金服 AntV 统计图表 G2Plot 1.0 发布

G2Plot 是一个开箱即用、易于配置、体验优雅的统计图表库,致力于帮助用户以最小成本生成高质量统计图表。 G2Plot 最初诞生于...

angular引入Antv G2Plot实现数据可视化

G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库,本文将介绍如何在angular项目中引入g2plot实现数据可视...

[FE] G2Plot 在 Vue 中使用 CDN 方式避免构建时增大 js 体积

使用 npm、yarn 方式安装的包,虽方便使用,但是会极大增加 vendor.xx.js 体积,拖慢网站运行速度。 以 G2Plot 为例,实际在 ...

9102 年,蚂蚁金服前端是怎么写图表的?

相信很多开发者都有过被图表搞得很抓狂瞬间:业务压力大,想快速上个图表,折腾半天配出来却丑的不能看;Demo 里明明看着很美...

这个月,我就和折线图杠上了...

TL;DR G2Plot 是一个注重于细节体验的通用统计图表库。 背景 折线图用于表示连续时间跨度内的数据,它通常用于显示某变量随时...

这一次,用 AntV 给你的老板画个饼

https://juejin.im/post/5e57b9b1e51d4526f55f06a7 作者 新茗 蚂蚁金服·数据体验技术团队 TL;DR G2Plot 是一个注重于细节体验...

这一次,用 AntV 给你的老板画个饼

https://juejin.im/post/5e57b9b1e51d4526f55f06a7 作者 新茗 蚂蚁金服·数据体验技术团队 TL;DR G2Plot 是一个注重于细节体验...

G2Plot 的相关问答

还没有任何问答,马上提问

评论 (3)

加载中
echart笑而不语
2019/12/11 11:40
回复
举报
好像是一个团队 后来去阿里了而已
2019/12/17 08:08
回复
举报
阿里很香啊
03/16 17:01
回复
举报
更多评论
3 评论
122 收藏
分享
返回顶部
顶部