AntV - G2 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
AntV - G2 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
AntV - G2 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
开源组织 阿里巴巴
地区 国产
投 递 者 王练
适用人群 未知
收录时间 2017-07-26

软件简介

G2 是一套基于可视化编码的图形语法,以数据驱动,具有高度的易用性和扩展性,用户无需关注各种繁琐的实现细节,一条语句即可构建出各种各样的可交互的统计图表。

同时,G2 也是 AntV 最重要的组成,始于《The Grammar of Graphics》一书描述的视觉编码语法系统(这也是 G2 项目命名的由来)。

特性

  • 简单、易用:从数据出发,仅需几行代码就可以轻松获得想要的图表展示效果

  • 完备的可视化编码:以数据驱动,提供了从数据到图形的完整映射

  • 强大的扩展能力:任何图表,都可以基于图形语法灵活绘制,满足你无限的创意

示例

   柱状图       

完整代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>柱状图</title>
    <!-- 引入 G2 文件 -->
    <script src="https://gw.alipayobjects.com/as/g/datavis/assets/1.0.5/g2/3.0.0/g2.min.js"></script>
  </head>
  <body>
    <!-- 创建图表容器 -->
    <div id="c1"></div>
    <script>
      const data = [
        { genre: 'Sports', sold: 275 },
        { genre: 'Strategy', sold: 115 },
        { genre: 'Action', sold: 120 },
        { genre: 'Shooter', sold: 350 },
        { genre: 'Other', sold: 150 }
      ]; // G2 对数据源格式的要求,仅仅是 JSON 数组,数组的每个元素是一个标准 JSON 对象。
      // Step 1: 创建 Chart 对象
      const chart = new G2.Chart({
        container: 'c1', // 指定图表容器 ID
        width : 600, // 指定图表宽度
        height : 300 // 指定图表高度
      });
      // Step 2: 载入数据源
      chart.source(data);
      // Step 3:创建图形语法,绘制柱状图,由 genre 和 sold 两个属性决定图形位置,genre 映射至 x 轴,sold 映射至 y 轴
      chart.interval().position('genre*sold').color('genre')
      // Step 4: 渲染图表
      chart.render();
    </script>
  </body>
</html>

安装

浏览器引入

既可以通过将脚本下载到本地也可以直接引入在线资源;

<!-- 引入在线资源 -->
<script src="https://gw.alipayobjects.com/as/g/datavis/assets/1.0.5/g2/3.0.0/g2.min.js"></script>
<!-- 引入本地脚本 -->
<script src="./g2.js"></script>

通过 npm 安装

官方提供了 G2 npm 包,通过下面的命令即可完成安装

npm install @antv/g2 --save

成功安装完成之后,即可使用 import 或 require 进行引用。

import G2 from '@antv/g2';

const chart = new G2.Chart({
  container: 'c1',
  width: 600,
  height: 300
});
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击加入讨论🔥(20)
发表了资讯
04/23 07:02

数据可视化引擎 G2 v4.1.20 发布

数据可视化引擎 G2 v4.1.48 版本现已发布,具体更新内容包括: Refactor refactor(geometry): 优化 label 和 element 的绑定逻辑 #3884 refactor(labels): 延迟 Geometry label 渲染,提升首屏渲染速度 #3886 feat: use worker to do label layout 🚀 #3888 注意:labels 延迟渲染,获取 labels 方式需要变更 (详见: #3891 ) 更新公告:https://github.com/antvis/G2/releases/tag/4.2.0...

0
0
发表了资讯
03/24 07:02

数据可视化引擎 G2 v4.1.48 发布

数据可视化引擎 G2 v4.1.48 版本现已发布,此版本新增了两个新的贡献者。具体更新内容包括: New Features feat(theme): 主题支持完整样式表的自定义 #3833 Bug Fixes fix(interval): 修复转置后的圆角条形图渲染多出一部分 #3826 Other Changes docs: 更新文档,将chart.source 改为 chart.data #3816 更新说明:https://github.com/antvis/G2/releases/tag/4.1.48...

0
3
发表了资讯
01/15 07:45

数据可视化引擎 G2 发布 4.1.38 和 4.1.39 版本

数据可视化引擎 G2 4.1.37、4.1.38 和 4.1.39 版本现已发布,更新内容包括: v4.1.37 (2022-01-04) Bug Fixes fix(slider,scrollbar): 滚动条和缩略轴 在xScale 为线性时筛选错误的问题 (#3767) (768eb3c3) v4.1.38 (2022-01-12) Bug Fixes fix(#3723): annotation 在筛选条件下,数据范围外的标注不需要展示 (#3775) (151f9152) fix(slider,scrollbar): 修复slider 、scrollbar values 排序错误的问题 (#3773) (6e84c446) 更新...

0
6
发表了资讯
01/01 07:36

数据可视化引擎 G2 v4.1.36 发布

数据可视化引擎 G2 4.1.36 版本现已发布,更新内容包括: New Features legend: 添加图例的正反选功能 (#3756) (2c92f5d8) Bug Fixes scrollbar: Scale option tickMethod doesn't work when enable scrollbar (#3747) (cb3ad042) Performance Improvements 优化性能,由于set-zindex每次都会调用 sort,导致耗时为指数级别的 (#3758) (f2877bcf) 更新说明:https://github.com/antvis/G2/releases/tag/4.1.36...

0
1
发表了资讯
2021/12/16 07:05

数据可视化引擎 G2 v4.1.35 发布

数据可视化引擎 G2 4.1.35 版本现已发布,更新内容包括: Bug Fixes bar: 修复条形图在 reflect y 时,绘制圆角错误 (#3745) (048a4920) Documentation Changes 更新官网公告 (2caa82a9) docs: label link 404 (#3728) (e92dbd74) demo: demo 中自定义shape会有误导 (#3744) (1249000f) 更新说明:https://github.com/antvis/G2/releases/tag/4.1.35...

0
2
发表了资讯
2021/10/23 07:40

数据可视化引擎 G2 v4.1.32 发布

数据可视化引擎 G2 4.1.32 版本现已发布,更新内容包括: Documentation Changes demo: 增加一个带动效的柱状图 (#3689) (5c0f6a4a) New Features element: element 图形元素按照 elementIndex 设置展示层级 (#3671) (4a536731) Bug Fixes 修复 element 设置层级 zIndex 的时候,需要考虑zIndexReversed (#3685) (c3654776) label: 修复 label 做坐标系镜像下,位置计算问题 (#3682) (71ee0d91) 更新说明:https://github.com/...

0
0
发表了资讯
2021/09/21 07:35

数据可视化引擎 G2 v4.1.27 发布

数据可视化引擎 G2 4.1.27 版本现已发布,更新内容包括: Chores update version (13b58ac0) Bug Fixes annotation: 修复了parsePosition的解析逻辑 (#3632) (47641ee2) label: 处理clear+render之后labelsContainer重复生成的问题 (#3630) (115fcdcb) 更新说明:https://github.com/antvis/G2/releases/tag/4.1.27...

0
1
发表了资讯
2021/08/15 07:33

数据可视化引擎 G2 v4.1.24 发布

数据可视化引擎 G2 4.1.24 版本现已发布,更新内容包括: Documentation Changes style:修复文档中的样式问题 (#3559) (41ecf763) 修复 404 交互链接 (#3560) (2db29fed) 错字:appendPading 变为 appendPadding (#3572) (bf59c62d) New Features 导出 utils,供 G2Plot 使用 (#3571) (2593f8aa) 更新说明:https://github.com/antvis/G2/releases/tag/4.1.24...

0
2
发表了资讯
2021/08/07 07:24

数据可视化引擎 G2 v4.1.23 发布

数据可视化引擎 G2 4.1.23 版本现已发布,更新内容包括: Documentation Changes 增加 scrollbar 的demo (#3550) (fd47ed39) fix typos in 'docs/manual/concepts' (#3552) (2c74fc52) tooltip: remove useless code (#3549) (f0e4e334) Bug Fixes line: 修复折线图 smooth 绘制错误 (#3546) (daf3b8a8) Code Style Changes geometry: 删除路径中的双斜线 (#3542) (d8bc1aae) 更新说明:https://github.com/antvis/G2/releases...

0
2
2021/07/23 06:14

数据可视化引擎 G2 v4.1.21 发布

数据可视化引擎 G2 4.1.21 版本现已发布,更新内容包括: Chores 更新官网版本,优化”图表示例页“选择 demo (#3523) (66dd7721) New Features legend: 图例若干更新 (#3529) (23323b7a) mask: mask 交互支持配置样式 & test cases (#3504) (752c127e) Bug Fixes heatmap: 修复热力图 style shadowBlur 不生效 & color 使用回调会导致白屏 (#3532) (664cf1a7) legend: 过滤连续图例的 value 参数,防止影响到 component legend...

0
0
发表了资讯
2021/06/29 07:56

数据可视化引擎 G2 v4.1.19 发布

数据可视化引擎 G2 4.1.19 版本现已发布,更新内容包括: Documentation Changes readme: change Typescript to TypeScript (#3488) (69eaea5a) New Features events: 暴露 brush 交互的生命周期,便于在 G2Plot 层可以监听 (#3485) (a8690cd9) interaction/link-by-color: element-link 交互反馈增加参数配置 (#3483) (3ddbbd31) Bug Fixes active-region 若干问题 (#3484) (2e62682a) fix trendCfg type definition of Slide...

0
2
发表了资讯
2021/06/15 07:50

数据可视化引擎 G2 v4.1.18 发布

数据可视化引擎 G2 4.1.18 版本现已发布,更新内容包括: New Features legend: 图例支持回调设置 marker (#3448) (ed3047e7) Bug Fixes 修复 view 上没有正确的 scale 时,绘制 annotation 出错 (#3450) (d0af4095) Other Changes 修复 view.changeData 在重新渲染的时候 报 toFront 为 underfind 的错误 (#3438) (76e08d06) 更新说明:https://github.com/antvis/G2/releases/tag/4.1.18...

0
1
发表了资讯
2021/05/28 07:13

数据可视化引擎 G2 v4.1.17 发布

数据可视化引擎 G2 4.1.17 版本现已发布,更新内容包括: Chores chore: gatsby 加上 ts 依赖,以使 codesandbox 可以打开 (#3420) (11a1e8a2) Documentation Changes docs: 更新文档内容 (#3405) (c77b5cba) New Features violin: 增加小提琴图 (#3416) (d5eb07a9) scrollbar: 增加滚动条主题 token,修复缩略轴在暗色主题下的 label 颜色 (#3396) (33819dad) 更新说明:https://github.com/antvis/G2/releases/tag/4.1.17...

0
7
发表了资讯
2021/04/27 07:08

数据可视化引擎 G2 v4.1.15 发布

数据可视化引擎 G2 4.1.15 版本现已发布,更新内容包括: New Features 主题中增加图例样式的配置,便于用户了解怎么修改 (#3376) (5d3fac4c) theme: 主题 Token (#3361) (182c68a6) Bug Fixes 修复数据为 0 时动画更新出错 (#3378) (e132a303) 修复 babel 配置 (#3371) (2d1ef8d4) 更新说明:https://github.com/antvis/G2/releases/tag/4.1.15...

0
4
发表了资讯
2021/04/15 07:19

数据可视化引擎 G2 v4.1.14 发布

数据可视化引擎 G2 4.1.14 版本现已发布,更新内容包括: Documentation Changes legend: 图例完善默认不选中以及点击选中交互的文档 & 增加 demo (#3351) (2841641a) New Features 补充兼容性文档&修改webpack配置 (#3346) (292a7b02) Bug Fixes issue-3160: 修复饼图使用连续型图例,标签无法展示 (#3366) (a392a8b4) 修复主题相关的错误拼写 (#3358) (804dbc69) 更新说明:https://github.com/antvis/G2/releases/tag/4.1.1...

0
3
发表了资讯
2021/03/19 07:00

数据可视化引擎 G2 v4.1.13 发布

数据可视化引擎 G2 4.1.13 版本现已发布,更新内容包括: Documentation Changes 更新文档中的旧代码 (#3320) (7a30d48b) typo:dblclick,而不是 dbclick (#3308) (8f557d6b) New Features 单 view 支持默认图例选中 (#3327) (6aa4000b) legend:图例支持配置分页器的主题样式 (#3324) (74afc606) Bug Fixes getArcStartPoint function 支持 path C (#3213) (#3300) (0d68ee0d) 更新说明:https://github.com/antvis/G2/releas...

0
2
2021/01/28 07:07

数据可视化引擎 G2 v4.1.8 发布

数据可视化引擎 G2 4.1.8 版本现已发布,更新内容包括: Feature 暴露获取扇形 path 的方法 (#3240) (ee974ad) 添加 tooltip.customItems 配置 (#3239) (7e389e4) tooltip.title 支持回调函数 (#3218) (1746f6a) tooltip:添加 tooltip.showNil (#3216) (edc1cee) Performance Improvements 优化鼠标事件在 path 上的拾取性能 (#3230) (71b0a2e) Docs 修复 scrollbar 文档错误 (#3236) (e38cf5d) 完善 interaction 英文文档 (#...

0
3
2021/01/08 07:04

数据可视化引擎 G2 v4.1.5 发布

数据可视化引擎 G2 4.1.5 版本发布了,更新内容包括: Documentation Changes 添加 mask documents(#3176)(e53f8d40) 添加 chart 和 view 对象的 api 文档 & 修复 shapeAttrs 链接文档 404(#3172)(5658ae73) 404(#3165)(baebc300) New Features interval shape 支持 background(#3175)(0a9ee039) 支持对 geometry 下的 elements zIndex 进行降序(#3173)(612cf971) Bug 修复 tooltip-tip: label tip ...

0
3
发表于开发技能专区
2020/12/24 08:10

数据可视化引擎 G2 v4.1.4 发布

数据可视化引擎 G2 4.1.4 版本发布了,更新内容包括: Documentation Changes 调整文档导航顺序(#3135)(d2f1118a) 修复了案例行 demo 中的图例过滤器错误(#3116)(b3165704) 增加 faq,升级指南等文档(#3119)(2033d030) 增加 element,view.en,数据集等多个文档(#3118)(8d112f15) New Features 增强饼图标签跟随切片颜色 (#3147) (4f0f5665) esm: 删除所有 lib 导入 (#3141) (72b0275a) Bug Fixes 修复路径...

0
7
发表于大前端专区
2020/12/14 12:53

AntV·G2Plot v2.3.2 版本发布

New Features 散点图一个数据点时自动调整 min max (#2075) (290fb5a0) 前 后 解读:当只有一条数据的时候,数据点居中是最佳实践。 Bug Fixes pie-statistic: 修复环图中心文本从 false 更新为 null,读取空对象属性出错 (#2092) (cf14b369) pie-statistic-action: 修复 changeSize 时,环图中心文本偶发报错 (#2093) (d3a0ece9) 修改官网样式覆盖问题 (#2090) (5a2ce6de) 修复 line/area/radar 等 tooltip 重复渲染:only en...

0
2
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
20 评论
287 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部
返回顶部
顶部