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 指数为
超过 的项目

评论

点击加入讨论🔥(22) 发布并加入讨论🔥
发表了资讯
03/16 08:35

数据可视化引擎 G2 v5.1.16 发布

数据可视化引擎 G2 v5.1.16 版本现已发布,具体更新内容包括: fix(docs):添加轴缺失的属性labelOpacity#6059 feat(shape):添加 gauge shape round #6069 fix(ci):添加 update coverall action #6072 feat:添加 interactive column #6083 docs(line):添加带有区域注释的 demo line #6089 文档:更新 encode.zh.md #6096 feat(vite):更新 vite 配置 #6102 文档:添加面积图演示 (#5897) #6095 修复:quantile scale domain...

0
0
发表了资讯
2023/12/07 13:52

数据可视化引擎 G2 v5.1.11 发布

数据可视化引擎 G2 v5.1.11 版本现已发布,具体更新内容包括: 修复:tooltip 应说明字符串格式的容器 #5856 feat(sunburst):添加 sunburst 演示 #5854 feat(slider):支持 sparkline #5832 feat(interaction):定义内联交互 #5857 chore:将 @antv/component 更新为 1.0.0 #5858 docs:更新 time.zh.md #5864 修复:修复极坐标上的 scaleInY 动画(径向缩放) #5866 修复:如果 group 被破坏,则无法找到文档 #5870 修复:ci ...

1
2
发表了资讯
2023/11/29 11:27

数据可视化引擎 G2 v5.1.10 发布

数据可视化引擎 G2 v5.1.10 版本现已发布,具体更新内容包括: 修复:修复由 chord no… 中的nodePaddingRatio所导致的渲染问题 #5824 修复:修复 subLayoutFacetCircle cal center y 问题 #5833 修复:网站英文标题 #5840 fix(interaction):更新时重新应用一些交互 #5845 文档:添加 timeline demo #5846 fix(tooltip):处理 undefined #5852 chore:更新至 5.1.10 #5853 详情可查看更新说明:https://github.com/antvis/G2/...

0
0
发表了资讯
2023/11/22 14:07

数据可视化引擎 G2 v5.1.9 发布

数据可视化引擎 G2 v5.1.9 版本现已发布,具体更新内容包括: docs:翻译 getting-started、what-is-g2、why-g2 #5778 fix(docs):g2 的介绍 #5797 docs:添加 example stocks dark #5798 fix(tooltip):overflow #5802 docs:将 eco 添加到 README 中 #5804 docs:ecosystem 和 plugin #5805 docs:添加智能 autovis demo #5806 chore:添加 3D 曲面图的文档和示例 #5799 chore:更新 dumi-theme-antv #5812 修复:dumi-theme-...

2
1
发表了资讯
2023/11/15 13:51

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

数据可视化引擎 G2 v5.1.8 版本现已发布,具体更新内容包括: 更新 mark.zh.md #5767 chore:添加 premier league & 3d barchart 示例 #5766 更新:customization.zh.md #5769 feat:将默认格式添加到 tooltip title #5748 修复:指定 TZ=Asia/Shanghai #5776 chore:删除节点画布并使用 SVG 快照代替 #5733 docs:将 framework - customization 翻译为 en #5771 docs:更新 ssr 文档 #5780 docs(Transform):将 Transform 翻译...

0
1
发表了资讯
2023/11/08 14:22

数据可视化引擎 G2 v5.1.7 发布

数据可视化引擎 G2 v5.1.7 版本现已发布,具体更新内容包括: fix:在每个关键帧中设置 transform-origin #5679 chore:添加 oscp 模板 #5680 chore:更新 oscp 模板 #5683 refactor:移除 auto mark #5687 docs:更新 readme img #5689 doc(README):删除拼写错误 #5694 更新 oscp.yml 通过@lzxue在#5697 doc:滚动条监听滚动变化事件报错 #5700 docs:添加 scrollbar demo #5688 #5707 docs:添加 line-sample DEMO 案例 #570...

1
2
发表了资讯
2023/10/22 10:10

数据可视化引擎 G2 v5.1.6 发布

数据可视化引擎 G2 v5.1.6 版本现已发布,具体更新内容包括: chore:将 gui 升级为组件 #5615 feat:向主题设置添加更多标记 #5613 修复:深度默认为零 #5632 fix(slider):multiple times #5638 chore:翻译 api 文档 #5604 修复:自动适应 #5649 docs(site):修改"标记"和"视图"中引用跳转地址 #5662 fix(axis):必要时自动隐藏 #5660 fix(tooltip):与滚动条共享工具提示 #5665 chore:更新翻译脚本 #5666 更新说明:https...

1
0
发表了资讯
2023/09/29 10:07

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

数据可视化引擎 G2 v5.1.5 版本现已发布,具体更新内容包括: fix:修复site/docs/../intervalThreed.zh.md 中的黑色元素 #5573 feat:显示主题编辑器 #5579 refactor(theme):为浅色主题添加一些标记 #5580 feat(theme):添加深色主题并更新 academy 主题 #5584 fix(tooltip):标记 #5586 fix(connector):修复 connectLength1 默认值获取问题 #5587 fix(tooltip):cloned series invert #5588 fix(tooltip):for fisheye #55...

0
2
发表了资讯
2023/09/13 14:16

数据可视化引擎 G2 v5.1.2 发布

数据可视化引擎 G2 v5.1.2 版本现已发布,具体更新内容包括: fix(pie):composite mark 的交互 #5524 feat(chart):支持 CSSTransform #5526 fix(types):composition node #5527 fix(dual):将系列线设置为 band scale #5528 feat:添加 mark.liquid #5508 feat(examples):添加 Bullet 示例 #5530 修复:在运行时移除 console.log #5532 fix(tooltip):legendFilter 和共享工具提示 #5534 feat(examples):优化 bullet 示例 ...

0
1
发表了资讯
2023/09/08 10:43

数据可视化引擎 G2 v5.1.1 发布

数据可视化引擎 G2 v5.1.1 版本现已发布,具体更新内容包括: 更新 rollup 插件并修复依赖冲突 #5489 fix(axis):labelAutoHide #5502 docs:更新图例选项 #5505 docs:重构交互 #5509 docs:为 tooltip 添加更多演示 #5510 feat(interaction):发布更多 brush 和 tooltip 事件 #5512 fix(shape):更新没有动画的 group shape #5514 chore:将 umd 的 target 设置为 es5 #5515 更新说明:https://github.com/antvis/G2/releases...

0
1
发表了资讯
2023/08/31 13:57

数据可视化引擎 G2 v5.0.24 发布

数据可视化引擎 G2 v5.0.18 版本现已发布,具体更新内容包括: fix(test):调用定义的 render 函数 #5481 feat(lib): 改变 graphlib 和 plotlib #5484 feat:3d line plot #5471 fix(theme):更新 light theme 的默认颜色 #5487 feature(builtinlib):将一些组件从 core 移到 builtinlib #5485 docs:更新示例以适应新主题 #5344 fix(bundle):在 package.sideEffects 中添加 ./esm/index.js #5488 更新说明:https://github.co...

1
0
发表了资讯
2023/08/16 15:18

数据可视化引擎 G2 v5.0.19 发布

数据可视化引擎 G2 v5.0.18 版本现已发布,具体更新内容包括: 文档:更新 site/.dumirc.ts #5377 refactor(api):自动从 stdlib 生成标记 #5380 修复:投影为空 #5381 refactor(mark):内联形状并推断变换 #5386 chore:拆分 demand bundle 库 #5391 修复:图表重新渲染时 label dom 泄漏 #5392 修复:坐标轴箭头方向 #5359 文档:更新文档 #5402 更新说明:https://github.com/antvis/G2/releases/tag/5.0.19...

0
0
发表了资讯
2023/08/03 11:23

数据可视化引擎 G2 v5.0.18 发布

数据可视化引擎 G2 v5.0.18 版本现已发布,具体更新内容包括: chore:更新最新的依赖项,例如 g-webgl #5347 fix(line-xy):支持 bandOffset #5351 fix(api):api 跳转部分修复 #5352 fix:wordcloud 的链接已损坏 #5353 feat:支持 html 标签 #5354 feat(legend):连续过滤 #5356 更新说明:https://github.com/antvis/G2/releases/tag/5.0.18...

0
0
发表了资讯
2023/07/26 11:18

数据可视化引擎 G2 v5.0.17 发布

数据可视化引擎 G2 v5.0.17 版本现已发布,具体更新内容包括: refactor(theme):更改一些主题属性 #5307 fix(label):清除无效标签 #5310 chore:添加每周报告 #5311 fix(chart):chart.clear 保留一些全局选项 #5318 feat(size):支持 ordinal size channel #5320 chore:添加每周统计数据 #5315 fix(legend):设置实际项目大小 #5326 refactor(style):移除 component.style, label.style #5331 fix:由于文件名包含字符,w...

0
3
发表了资讯
2023/07/07 16:13

数据可视化引擎 G2 v5.0.15 发布

数据可视化引擎 G2 v5.0.15 版本现已发布,具体更新内容包括: 文档:错别字 #5251 fix(legend):更新 legend item #5258 feat(interval):micro interval #5260 fix(layout):有效的指定组件大小 #5264 feat(slider):自动布局 #5274 fix(axis):更新时的轴位置 #5275 fix:动画完成时清除变换 #5277 fix(legend):连续图例设置 labelOverlap 默认隐藏 #5278 fix(slider):带有注释 #5280 fix(tooltip):安装到主体时的多图表 ...

1
1
发表了资讯
2023/06/29 10:50

数据可视化引擎 G2 v5.0.14 发布

数据可视化引擎 G2 v5.0.14 版本现已发布,具体更新内容包括: fix(inset):极坐标中文本的相对位置 #5223 fix(line):系列梯度 #5225 docs(interval):log scale with zero value #5226 fix(line):支持 missing trail #5227 fix(area):一个缺失点 #5229 fix(layout):自动嵌入忽略空 bbox #5228 fix(api):用 deepAssign 替换 deepMix #5232 feat:当主体隐藏时,tooltip 交互会发出事件 #5157 feat(tooltip):禁用 Native #...

0
4
发表了资讯
2023/06/20 19:01

数据可视化引擎 G2 v5.0.13 发布

数据可视化引擎 G2 v5.0.13 版本现已发布,具体更新内容包括: fix(brush): 删除画笔 #5170 修复:缺少数据时标签显示错误 #5175 重构(形状):api #5177 重构(api):复合标记 #5178 重构(api):动画api #5179 重构(api):删除标签变换的坐标 #5180 特性(静态标记):添加 axisX 和 axisY #5188 将 d3-path 添加为依赖项 #5203 特性(布局):自动插入 #5204 特性(静态标记):添加 chart.legends #5209 更新公告:htt...

0
2
发表了资讯
2023/05/28 07:53

数据可视化引擎 G2 v5.0.11 发布

数据可视化引擎 G2 v5.0.11版本现已发布,具体更新内容包括: What's Changed feat:添加 heatmap mark 和 shape #5047 fix(geo):突出显示 choropleth #5095 fix(data):渲染空数据 #5098 fix(label):系列标记的空值 #5099 fix(event):pointerupoutside 事件没有目标 #5100 fix(api):更新 mark-level plot 并应用 viewStyle #5102 chore:通过 bundle analyzer 显示 treeshaking 效果 #5097 fix(chart):chart.options 应该...

0
0
发表了资讯
2023/05/26 07:22

数据可视化引擎 G2 v5.0.9 发布

数据可视化引擎 G2 v5.0.9 版本现已发布,具体更新内容包括: What's Changed fix(brush):在 emit 时 handle brush:highlight 一次 #5063 修复:tooltip.position 示例中的错误 #5064 feat:设置 tooltip dom classname 有g2-前缀 #5066 修复:标签格式化程序回调参数 #5062 fix(label):支持日期标签 #5077 feat(api):将 api 和 spec 一起使用 #5074 feat(chart):debounce chart.render #5083 fix(legend):pass legend.sty...

0
0
发表了资讯
2023/04/27 07:17

数据可视化引擎 G2 v5.0.4 发布

数据可视化引擎 G2 v5.0.4 版本现已发布,具体更新内容包括: What's Changed docs:添加图例布局文档 #4884 docs:修复简单的拼写错误,transfrom -> transform #4890 fix(OOM):重新渲染时清除交互并取消动画 #4899 feat(scale):tickCount of log scale support -1 #4901 feat::为 lineX、lineY 添加箭头 #4905 修复:更新图例组件推断策略 #4906 fix(tooltip):默认显示 falsy item #4907 fix(tooltip):数据丢失 #4910 ch...

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}}
没有更多内容
暂无内容
暂无内容
22 评论
308 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部