AntV - G2

数据驱动的高交互可视化图形语法 AntV - G2

MIT
JavaScript 查看源码»
跨平台
阿里巴巴
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
});
的码云指数为
超过 的项目
加载中
此软件有 17 条评论,请先登录后再查看。

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

数据可视化引擎 G2 4.0.10 版本发布了,更新内容包括: New Features 增加 appendPadding 调节 padding (#2502) (fe352ce3) Bug Fixes 2505: 修复图表暗黑主题无背景色的问题 (#2512) (1a025...

06/12 07:36

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

数据可视化引擎 G2 4.0.8 版本发布了,更新内容包括: Documentation Changes upgrade: 完善升级文档 (#2403) (b4451df7) New Features slider: add formatMask property (aac56a86) interac...

05/19 07:28

数据可视化引擎 G2 v4.0.7 版本发布

数据可视化引擎 G2 v4.0.7 版本发布了,更新内容: Bug Fixes do not set tooltip position when follow is false (62f5e279) delegation: mouse leave failed (d3a30ed2) element: 修复获取...

04/19 07:57

G2 v4.0.4 版本发布

New Features event: 添加 plot:enter 和 plot:leave 事件 (1f9b96be) interaction: tooltip 支持移动端 (8e6cddf7) avoid event error (3ae581b9) view: 支持 plot 上的移动事件触发 (4a86b...

04/03 16:28

数据可视化引擎 G2 v4.0.3 版本发布

更新日志 新特性 axis: 支持转置极坐标坐标轴的渲染, Closed #1744 (67a8beb0) scale: 支持用户指定确定数据 id 的字段 (25caa91f) tooltip: position 属性新增 'auto' 值配置,并作为默认值...

03/23 17:12

可视化图形语法 G2 4.0.2 发布

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

03/17 07:27

蚂蚁金服数据可视化引擎 G2 4.0 正式版发布!

G2 是一套面向常规统计图表,以数据驱动的高交互可视化图形语法。 经历了为期半年的大规模底层重构和开发迭代,G2 4.0 终于和大家见面了。作为继 2017 年 11 月 22 日 G2 3.0 正式开源发布以...

03/03 14:54

可视化图形语法 G2 3.5.0 发布

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

2019/03/23 06:34

G2 3.4.7 发布,数据驱动的可视化编码图形语法

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

2019/01/01 08:11

G2 v3.4.6 发布,数据驱动的可视化编码图形语法

G2 v3.4.6 已发布,更新内容: 新特性 chore(test): removing .only() statement feat(legend): enable default legend-item handler Bug 修复 fix #1051 fix(legend): issue on filtering ...

2018/12/22 07:31

没有更多内容

加载失败,请刷新页面

1
回答
怎么用antV G2绘制用户画像?

怎么用antV G2绘制用户画像?跟这张差不多的。

2019/05/31 17:29

没有更多内容

加载失败,请刷新页面

没有更多内容

antV--G2 学习

2019-11-18: 学习内容: 一、基本概念: 坐标轴 AXES:   每个图表通常包含两个坐标轴,在直角坐标系(笛卡尔坐标系)下,分别为 x 轴和 y 轴,在极坐标轴下,则分别由角度和半径 2 个维度...

2019/11/18 18:30
26
0
AntV G2 tooltip 修改

<div id="mountNode"></div> <script> const data = [ { "date": "1", "value": 22.75, "type": "应收金额", "rate": '2016-02-01' }, ...

2018/07/05 11:38
46
0
AntV G2 图表tooltip重命名

在做数据可视化的过程中,遇到了一个问题,就是给图表tooltip重命名。 在研究后,发现了三种方法: 方法1:一般情况下,可以在给chart绑定数据源时,添加scale配置,并在scale配置中设置别名...

2019/04/10 10:10
72
0
蚂蚁金服数据可视化引擎 G2 4.0 正式版发布! - AntV的个人空间 - OSCHINA

https://my.oschina.net/antv/blog/3184926 G2 是一套面向常规统计图表,以数据驱动的高交互可视化图形语法。 经历了为期半年的大规模底层重构和开发迭代,G2 4.0 终于和大家见面了。作为继 ...

03/19 20:24
11
0
蚂蚁金服数据可视化引擎 G2 4.0 正式版发布! - AntV的个人空间 - OSCHINA

https://my.oschina.net/antv/blog/3184926 G2 是一套面向常规统计图表,以数据驱动的高交互可视化图形语法。 经历了为期半年的大规模底层重构和开发迭代,G2 4.0 终于和大家见面了。作为继 ...

03/19 20:03
44
0
g2图表

<script> var data = [{ type: '评估中', percent: 0.23 }, { type: '设计中', percent: 0.28 }, { type: '正在开发', percent: 0.30 }, { type: '已上...

2019/11/19 18:56
18
0
AntV年度发布

更好的阅读体验,请移步:语雀 回顾这一年 去年11月22日 AntV 品牌日,我们一起见证了__「G2」的开源__、「F2」的诞生。此后 AntV 团队从未停止过在数据可视化道路上的探索,得到了开发者们的...

2018/11/22 09:49
1.6K
0
AntV 架构演进-F2 篇

本文作者:AntV 架构师-萧庆 简介 F2,源于 Fast & Flexible 两个单词首字母,是 AntV 家族中专为移动端定制、开箱即用的可视化解决方案。已经广泛应用于支付宝钱包、淘票票、钉钉、微信小程...

03/05 22:52
5.5K
0
这一次,用 AntV 给你的老板画个饼

https://juejin.im/post/5e57b9b1e51d4526f55f06a7 作者 新茗 蚂蚁金服·数据体验技术团队 TL;DR G2Plot 是一个注重于细节体验的通用统计图表库。 背景 饼图,或称饼状图,是一个划分为几个扇...

03/19 20:25
248
0
G2 绘制混合图例 demo

G2 绘制混合图例 demo import G2 from '@antv/g2'; import DataSet from '@antv/data-set'; // G2 对数据源格式的要求,仅仅是 JSON 数组,数组的每个元素是一个标准 JSON 对象。 const...

2019/03/21 14:14
27
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部