数据驱动的高交互可视化图形语法 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
});
加载中

评论(15)

强子1985
强子1985
ECharts在手,图表都有
d
delphidoc
EChart组件在手,图表功能全有
rachel_ranqian
rachel_ranqian
其实我更加关心这款软件跟百度的echarts对比起来有什么优势
MiniDolphin
MiniDolphin
百度当然继续卖药啊。
IT_小翼
IT_小翼
react g2 : https://github.com/alibaba/BizCharts
SimonAt
SimonAt
很贵啊。。。,
曹先生
曹先生
牛逼就一个字,好吧,二个字
开源中国首席程序猿
开源中国首席程序猿
都给阿里做了,百度怎么办
naughty
naughty
很不错!
pixcai
pixcai
第一,数据量太大时文字显示错乱,比如123000000这么大的数,坐标轴显示不了,第二,和react一起用时,没法和ref属性配合。暂时感觉还是echarts更成熟,但g2的配置更直观,目前不看好,期待以后的版本。

可视化图形语法 G2 3.2 迭变

3.2 三大特性 一、让图表会讲故事 二、信息获取效率更高 三、图表一键换肤 一、让图表会讲故事 数据标注 本次发布新增数据标注功能,Demo 链接,通过标注帮助用户理解图中含有特殊含义的数据...

07/17 14:48

蚂蚁金服 AntV G2 3.1 发布:在路上

2017年的11月22日,G2 正式开源,发布了3.0版本。3.0 是 G2 的一个重大版本升级,从这个版本开始,我们确认了打造“数据驱动的高交互图形语法”的愿景;从底层夯实了架构基础,完善开发、测试...

05/25 11:28

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

G2 v3.0.12 已发布,更新内容如下: fix(geom): changeVisible 中未定义的容器 fix(tooltip): 删除重复项目时的 bug G2 是阿里开源的一套基于可视化编码的图形语法,以数据驱动,具有高度的易...

05/21 07:49

蚂蚁金服数据可视化解决方案 AntV 3.0 全新发布

AntV 是蚂蚁金服全新一代数据可视化解决方案,主要包含「数据驱动的高交互可视化图形语法」G2、专注解决流程与关系分析的图表库 G6、适用于对性能、体积、扩展性要求严苛场景下使用的移动端图...

2017/11/22 17:58

没有更多内容

加载失败,请刷新页面

没有更多内容

暂无问答

AntV年度发布

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

11/22 09:49
2
0
开源|蚂蚁金服开源AntV F2:一个专注于移动,开箱即用的可视化解决方案

小蚂蚁说: AntV 是蚂蚁金服全新一代数据可视化解决方案,主要子产品包括 G2、G6、F2。此前我们已经相继发布过AntV的相关开源消息与版本迭代,包括《蚂蚁金服开源:数据驱动的高交互可视化图...

08/29 14:17
14
0
简单前后端技术选型(随时更新)

一、后端架构: actframework 或者 springboot http://graphql.cn/ 二、前端: antd 或者 layui 1.图表 antV(G2,G6) 2.图标 iconfont 3.前端第三方库: layui-formSelects xtree 做权限的比较...

08/13 17:24
37
0
写了个控台UI同事说像刚毕业写的,我说其实我还没人家刚毕业的写的好呢!!!

工作中台基础UI 项目介绍 SeedWorkbenchUi 简洁的中台UI,vuejs 开发,组件化,模块化 快速预览 先来波图 预览 预览地址 预览部署在 Github Page ,如果您访问时由于网络原因卡在载入界面或者...

09/19 18:05
11
0
关于自动化脚本黑盒话的进度

Excel函数,写的我只想吐

2015/09/06 17:25
133
0
CAP 定理的含义

分布式系统(distributed system)正变得越来越重要,大型网站几乎都是分布式的。 分布式系统的最大难点,就是各个节点的状态如何同步。CAP 定理是这方面的基本定理,也是理解分布式系统的起...

08/24 18:51
6
0
CAP 定理的含义

分布式系统(distributed system)正变得越来越重要,大型网站几乎都是分布式的。 分布式系统的最大难点,就是各个节点的状态如何同步。CAP 定理是这方面的基本定理,也是理解分布式系统的起...

11/16 10:55
2
0
分布式CAP原理

分布式系统的最大难点,就是各个节点的状态如何同步。CAP 定理是这方面的基本定理,也是理解分布式系统的起点。 在理论计算机科学中,CAP定理(CAP theorem),又被称作布鲁尔定理(Brewer'...

12/11 19:55
0
0
大白话讲解CAP定理

分布式系统(distributed system)正变得越来越重要,大型网站几乎都是分布式的。 分布式系统的最大难点,就是各个节点的状态如何同步。CAP 定理是这方面的基本定理,也是理解分布式系统的起...

07/29 11:42
29
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部