G2Plot

<img src="https://yellow-cdn.veclightyear.com/835a84d5/f3f301ea-6034-441a-8b2f-76d9631dad25.svg" width="18"> English | 简体中文

基于 G2 4.x 版本二次封装的图表库。

Latest commit

📢 新版本 G2 v5 已经发布，未来不会基于 G2 v5 封装 G2Plot v3 版本，但是可以使用 Ant Design Charts 代替。

<a href="https://g2plot.antv.vision/en">网站</a> • <a href="https://g2plot.antv.vision/en/docs/manual/getting-started">快速开始</a> • <a href="https://www.yuque.com/antv/g2plot">博客</a> • <a href="https://github.com/antvis/theme-set">AntV ThemeSet</a> </div>

G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成。"G2Plot"中的 G2 意指图形语法（the Grammar of Graphics），同时也致敬了 ggplot2。我们的目标是：

让用户无需成为可视化专家也能轻松制作出优雅美观的图表。
确保图表能够经受业务的检验，在实际场景中易用、好用。
探索统计图表的更多可能性，使统计图表变得更有趣、更酷。

✨ 特性

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

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('container', {
  data,
  xField: 'sales',
  yField: 'year',
  seriesField: 'year',
});

bar.render();

🤝 参与贡献

我们非常欢迎你的贡献！无论是提出问题还是提交代码。

反馈问题请先阅读 issues。

提交代码请遵循贡献指引。

感谢以下贡献者 (emoji key):

<table> <tr> <td align="center"><a href="https://github.com/visiky"><img src="https://avatars.githubusercontent.com/u/15646325?v=4?s=32" width="32px;" alt=""/> Visiky</a> <a href="https://github.com/antvis/G2Plot/commits?author=visiky" title="代码">💻</a></td> <td align="center"><a href="https://hust.cc/"><img src="https://avatars.githubusercontent.com/u/7856674?v=4?s=32" width="32px;" alt=""/> hustcc</a> <a href="https://github.com/antvis/G2Plot/commits?author=hustcc" title="代码">💻</a></td> <td align="center"><a href="https://github.com/lxfu1"><img src="https://avatars.githubusercontent.com/u/31396322?v=4?s=32" width="32px;" alt=""/> Joel Alan</a> <a href="https://github.com/antvis/G2Plot/commits?author=lxfu1" title="代码">💻</a></td> <td align="center"><a href="https://github.com/liuzhenying"><img src="https://avatars.githubusercontent.com/u/11748654?v=4?s=32" width="32px;" alt=""/> 刘珍莹</a> <a href="https://github.com/antvis/G2Plot/commits?author=liuzhenying" title="代码">💻</a></td> <td align="center"><a href="https://github.com/zqlu"><img src="https://avatars.githubusercontent.com/u/1142242?v=4?s=32" width="32px;" alt=""/> zqlu</a> <a href="https://github.com/antvis/G2Plot/commits?author=zqlu" title="代码">💻</a></td> <td align="center"><a href="https://github.com/arcsin1"><img src="https://avatars.githubusercontent.com/u/13724222?v=4?s=32" width="32px;" alt=""/> arcsin1</a> <a href="https://github.com/antvis/G2Plot/commits?author=arcsin1" title="代码">💻</a></td> </tr> <tr> <td align="center"><a href="https://github.com/zhangzhonghe"><img src="https://avatars.githubusercontent.com/u/38434641?v=4?s=32" width="32px;" alt=""/> 被雨水过滤的空气</a> <a href="https://github.com/antvis/G2Plot/commits?author=zhangzhonghe" title="代码">💻</a></td> <td align="center"><a href="https://github.com/yp0413150120"><img src="https://avatars.githubusercontent.com/u/24318174?v=4?s=32" width="32px;" alt=""/> banli</a> <a href="https://github.com/antvis/G2Plot/commits?author=yp0413150120" title="代码">💻</a></td> <td align="center"><a href="https://github.com/BBSQQ"><img src="https://avatars.githubusercontent.com/u/35586469?v=4?s=32" width="32px;" alt=""/> xi li</a> <a href="https://github.com/antvis/G2Plot/commits?author=BBSQQ" title="代码">💻</a></td> <td align="center"><a href="https://blog.csdn.net/weixin_42628594"><img src="https://avatars.githubusercontent.com/u/42288791?v=4?s=32" width="32px;" alt=""/> DarrenPei</a> <a href="https://github.com/antvis/G2Plot/commits?author=DarrenPei" title="代码">💻</a></td> <td align="center"><a href="https://github.com/pearmini"><img src="https://avatars.githubusercontent.com/u/49330279?v=4?s=32" width="32px;" alt=""/> MiniPear</a> <a href="https://github.com/antvis/G2Plot/commits?author=pearmini" title="代码">💻</a></td> <td align="center"><a href="https://github.com/connono"><img src="https://avatars.githubusercontent.com/u/36756846?v=4?s=32" width="32px;" alt=""/> connono</a> <a href="https://github.com/antvis/G2Plot/commits?author=connono" title="代码">💻</a></td> </tr> <tr> <td align="center"><a href="https://github.com/yujs"><img src="https://avatars.githubusercontent.com/u/16610138?v=4?s=32" width="32px;" alt=""/> 于向前</a> <a href="https://github.com/antvis/G2Plot/commits?author=yujs" title="代码">💻</a></td> <td align="center"><a href="https://twitter.com/afc163"><img src="https://avatars.githubusercontent.com/u/507615?v=4?s=32" width="32px;" alt=""/> afc163</a> <a href="https://github.com/antvis/G2Plot/commits?author=afc163" title="代码">💻</a></td> <td align="center"><a href="http://www.mjul.com/"><img src="https://avatars.githubusercontent.com/u/142868?v=4?s=32" width="32px;" alt=""/> Martin Jul</a> <a href="https://github.com/antvis/G2Plot/commits?author=mjul" title="代码">💻</a></td> <td align="center"><a href="https://github.com/jinhuiWong"><img src="https://avatars.githubusercontent.com/u/23117130?v=4?s=32" width="32px;" alt=""/> jhwong</a> <a href="https://github.com/antvis/G2Plot/commits?author=jinhuiWong" title="代码">💻</a></td> <td align="center"><a href="https://kingsongao.com/"><img src="https://avatars.githubusercontent.com/u/6930280?v=4?s=32" width="32px;" alt=""/> Jingsong Gao</a> <a href="https://github.com/antvis/G2Plot/commits?author=kagawagao" title="代码">💻</a></td> <td align="center"><a href="https://github.com/MrSmallLiu"><img src="https://avatars.githubusercontent.com/u/26038018?v=4?s=32" width="32px;" alt=""/> Mr小刘</a> <a href="https://github.com/antvis/G2Plot/commits?author=MrSmallLiu" title="代码">💻</a></td> </tr> <tr> <td align="center"><a href="https://github.com/ntscshen"><img src="https://avatars.githubusercontent.com/u/21041458?v=4?s=32" width="32px;" alt=""/> ntscshen</a> <a href="https://github.com/antvis/G2Plot/commits?author=ntscshen" title="代码">💻</a></td> <td align="center"><a href="https://juejin.cn/user/3491704660305111"><img src="https://avatars.githubusercontent.com/u/12762626?v=4?s=32" width="32px;" alt=""/> yiminanci</a> <a href="https://github.com/antvis/G2Plot/commits?author=guonanci" title="代码">💻</a></td> <td align="center"><a href="https://github.com/ai-qing-hai"><img src="https://avatars.githubusercontent.com/u/65594180?v=4?s=32" width="32px;" alt=""/> ai-qing-hai</a> <a href="https://github.com/antvis/G2Plot/commits?author=ai-qing-hai" title="代码">💻</a></td> <td align="center"><a href="https://github.com/xrkffgg"><img src="https://avatars.githubusercontent.com/u/29775873?v=4?s=32" width="32px;" alt=""/> xrkffgg</a> <a href="https://github.com/antvis/G2Plot/commits?author=xrkffgg" title="代码">💻</a></td> <td align="center"><a href="https://github.com/DawnLck"><img src="https://avatars.githubusercontent.com/u/12195307?v=4?s=32" width="32px;" alt=""/> Dawnlck</a> <a href="https://github.com/antvis/G2Plot/commits?author=DawnLck" title="代码">💻</a></td> <td align="center"><a href="https://github.com/CarisL"><img src="https://avatars.githubusercontent.com/u/13416424?v=4?s=32" width="32px;" alt=""/> Karis</a> <a href="https://github.com/antvis/G2Plot/commits?author=CarisL" title="代码">💻</a></td> </tr> <tr> <td align="center"><a href="https://gine.me/"><img src="https://avatars.githubusercontent.com/u/6588202?v=4?s=32" width="32px;" alt=""/> Mayne</a> <a href="https://github.com/antvis/G2Plot/commits?author=mayneyao" title="代码">💻</a></td> <td align="center"><a href="https://github.com/Plortinus"><img src="https://avatars.githubusercontent.com/u/20693993?v=4?s=32" width="32px;" alt=""/> Plortinus</a> <a href="https://github.com/antvis/G2Plot/commits?author=Plortinus" title="代码">💻</a></td> <td align="center"><a href="https://github.com/csjkevin"><img src="https://avatars.githubusercontent.com/u/17211870?v=4?s=32" width="32px;" alt=""/> 陈善杰</a> <a href="https://github.com/antvis/G2Plot/commits?author=csjkevin" title="代码">💻</a></td> <td align="center"><a href="https://doocs.github.io/"><img src="https://avatars.githubusercontent.com/u/21008209?v=4?s=32" width="32px;" alt=""/> 杨立滨</a> <a href="https://github.com/antvis/G2Plot/commits?author=yanglbme" title="代码">💻</a></td> <td align="center"><a href="https://github.com/beewolf233"><img src="https://avatars.githubusercontent.com/u/24711525?v=4?s=32" width="32px;" alt=""/> beewolf233</a> <a href="https://github.com/antvis/G2Plot/commits?author=beewolf233" title="代码">💻</a></td> <td align="center"><a href="https://github.com/lqzhgood"><img src="https://avatars.githubusercontent.com/u/9134671?v=4?s=32" width="32px;" alt=""/> lqzhgood</a> <a href="https://github.com/antvis/G2Plot/commits?author=lqzhgood" title="代码">💻</a></td> </tr> <tr> <td align="center"><a href="https://jiazhe.wang/"><img src="https://avatars.githubusercontent.com/u/6898060?v=4?s=32" width="32px;" alt=""/> neoddish</a> <a href="https://github.com/antvis/G2Plot/commits?author=neoddish" title="代码">💻</a></td> <td align="center"><a href="https://github.com/stack-stark"><img src="https://avatars.githubusercontent.com/u/46991054?v=4?s=32" width="32px;" alt=""/> stack-stark</a> <a href="https://github.com/antvis/G2Plot/commits?author=stack-stark" title="代码">💻</a></td> <td align="center"><a href="https://github.com/NewByVector"><img src="https://avatars.githubusercontent.com/u/20186737?v=4?s=32" width="32px;" alt=""/> vector</a> <a href="https://github.com/antvis/G2Plot/commits?author=NewByVector" title="代码">💻</a></td> <td align="center"><a href="http://www.wanyingxing.vip/"><img src="https://avatars.githubusercontent.com/u/10885578?v=4?s=32" width="32px;" alt=""/> 嘤嘤嘤</a> <a href="https://github.com/antvis/G2Plot/commits?author=xingwanying" title="代码">💻</a></td> <td align="center"><a href="https://wineso.me/"><img src="https://avatars.githubusercontent.com/u/2106987?v=4?s=32" width="32px;" alt=""/> 琚致远</a> <a href="https://github.com/antvis/G2Plot/commits?author=juzhiyuan" title="代码">💻</a></td> <td align="center"><a href="https://github.com/YiSiWang"><img src="https://avatars.githubusercontent.com/u/20316342?v=4?s=32" width="32px;" alt=""/> 14</a> <a href="https://github.com/antvis/G2Plot/commits?author=YiSiWang" title="代码">💻</a></td> </tr> </table>

🔗 相关链接

<img src="https://yellow-cdn.veclightyear.com/835a84d5/8f934329-3f89-4ff2-b838-55cc1ca56ab1.svg" width="18"> ChartCube - 基于 G2Plot 的在线图表制作工具，交互简单，一键导出图表代码！