概述

G2作为一款技术产品,自诞生以来,服务于广大的Web工程师群体和一部分数据分析师。一直来,G2 因其易用的语法和扎实的可视化理论基础,广受使用者好评。G2 1.x 的可视化能力已经非常强大,使用者已经能够在掌握图形语法的基础上结合自己对数据的理解,从而绘制出各种各样的可视化图表。然而,随着DT时代的更加深化,随着G2的发展,我们还是遇到了各种各样的,以往G2无法满足的可视化需求。经总结发现,大体上有以下几点:

  1. 数据导向,同一张图表中,绘制异构数据图形的需求
  2. 设计导向,对图形高度订制的需求
  3. 移动端图表轻量化的需求

经过半个月设计和架构,我们重新梳理流程结构,我们提出了视图(View)映射核心(Core)的概念,再经历了一个月紧锣密鼓的开发,本周我们迎来的G2 2.0的发布!
话不多说,下面咱具体看看G2.0的新特性 ~

新特性

一、多视图(View)

G2 2.0 我们进行了多View的支持。每一个View可以拥有自己的数据源。意味着2.0后我们可以在同一幅图表中,支持异构数据的图表绘制。详见链接

具体场景

  1. 场景一
  2. 用户甲:请问我有一组数据,画了一张区域图,还有一组数据是用来标定每个关键时刻的特殊值,怎么办?
  3. 1.0菌:关键时刻数据用chart.guide()吧
  4. 用户甲:可是guide好繁琐。。
  5. 1.0菌:。。。
  6. 2.0菌:你可以使用我的多View的功能!

  1. 场景二
  2. 用户乙:我这有一组数据画了地图气泡图,还有另外一组数据表示气泡之间的关系,怎么办?
  3. 1.0菌:这个臣妾做不到。。
  4. 用户乙:。。。
  5. 1.0菌:。。。。
  6. 2.0菌:你可以使用我的多View的功能!

二、自定义图形(Shape)

在G2 2.0 中我们拓展了自定义的Shape的机制,赋予那部分有 高订制需求的 、 有图形知识储备 的工程师有直接订制最终图形的能力。这也是G2在向 可编程可视化引擎 迈出的重要一步。详见链接

具体场景

  1. 场景一
  2. PD:我这有一份不同人物的得分数据,怎么可视化比较好?
  3. 1.0菌:可以用柱状图对比
  4. 某设计师:柱子直角不好看,改成圆角吧
  5. 1.0菌:暂时还没有内置圆角矩形的shape。。
  6. PD:不够形象,要把人物头像发上去
  7. 1.0菌:。。。。
  8. 2.0菌:你可以使用我的自定义Shape的功能!

  1. 场景二
  2. 某前端:你们原来的仪表盘好丑啊!
  3. 某设计:钟表能不能再假点呐!

  1. 1.0菌:无法反驳!
  2. 某前端:我想要这样xxo!!xxx@@oox&&(持续描述五分钟。。。)
  3. 1.0菌:把这些代码都加到我身上,我会膨胀死。。。
  4. 2.0菌:使用我的自定义Shape的功能!在G2外自由拓展,私人定制,满足你无限强迫的定制需求!

三、连线图形标记(Edge)

基于以上两个重点功能的实现,再加上连线的几何标记(Edge),我们终于能画出,简单的关系图了!(喜大普奔)

四、移动端的支持

G2-mobile为了移动端的开发宝宝已经操碎了心。
为了你们想要的简单而美好,作为强大G2的一个子集,我们忍痛割掉了各种洋气的功能;
为了让你们在G2和G2-mobile之间切换得心应手,我们把G2-mobile的接口和G2全部统一;
为了满足你们多样性的需要,我们开放了更多自定义接口。详见G2-mobile说明

更丰富、更用心的图表DEMO

PC Demo

详细见G2 Demo中心

Mobile Demo

详细见G2-Mobile Demo中心

升级指南

PC 端

新增
  • 自定义 shape
  • 多视图 View 功能,支持图表组合和异构数据的绘制
  • 新增 edge 几何标记,用于支持关系图的绘制
移除
  • chart.legendVisible() 废除,不再支持
  • chart.legend('left|top|right|bottom') (即原先直接传入位置字符串来设定图例位置 ) 废除,不再支持
  • 移除了部分 G2 默认提供的 shape:
对应的 GEOM 废弃的 shape
point pointerArrow
point pointerLine
point pointerRect
interval stroke
polygon stroke

Mobile 端

新增
  • chart.guide() 方法:支持的辅助类型有:折线(line)、弧线(arc)、文字(text)和自定义(html)
  • 新增的图形绘制属性:
    • fill
    • stroke
    • fontFamily
    • fontSize
    • fontWeight
    • fontVariant

注意事项

  • 2.0 后我们推荐使用我们绘图库的原生属性(比如:fontSize),不建议使用旧的svg规范的熟悉(比图:'font-size')。详情见G2-Graphic

开发成员想说的话

这次变动很大,我们又把自己颠覆了一次。这次也没啥变化,我们还是坚持数据出发、数据驱动。

联系方式

 : https://github.com/antvis

G2 2.0 更灵活、更强大、更完备的可视化引擎!的更多相关文章

  1. graphicview和widgets没本质区别。它只是更轻量级,更灵活,性能更高的widgets

    graphicview和widgets没本质区别.它只是更轻量级,更灵活,性能更高的widgets.核心就是把widgets变成了更轻量级的graphicitem,把QWidget的各种事件转换成了g ...

  2. bootstrap3-dialog:更强大、更灵活的模态框(封装好的模态框)

    用过bootstrap框架的同学们都知道,bootstrap自带的模态框用起来很不灵活,可谓鸡肋的很.但nakupanda开源作者封装了一个更强大.更灵活的模态框——bootstrap3-dialog ...

  3. bootstrap3-dialog:更强大、更灵活的模态框

    用过bootstrap框架的同学们都知道,bootstrap自带的模态框用起来很不灵活,可谓鸡肋的很.但nakupanda开源作者封装了一个更强大.更灵活的模态框——bootstrap3-dialog ...

  4. 编写高质量代码改善C#程序的157个建议——建议56:使用继承ISerializable接口更灵活地控制序列化过程

    建议56:使用继承ISerializable接口更灵活地控制序列化过程 接口ISerializable的意义在于,如果特性Serializable,以及与其像配套的OnDeserializedAttr ...

  5. Android 比ListView更好用强大的RecyclerView库:RecyclerViewLibrary

    RecyclerViewLibrary A RecyclerView libirary ,has some support, like headerAdapter/TreeAdapter,and Pu ...

  6. 【转】编写高质量代码改善C#程序的157个建议——建议56:使用继承ISerializable接口更灵活地控制序列化过程

    建议56:使用继承ISerializable接口更灵活地控制序列化过程 接口ISerializable的意义在于,如果特性Serializable,以及与其像配套的OnDeserializedAttr ...

  7. xmake从入门到精通12:通过自定义脚本实现更灵活地配置

    xmake是一个基于Lua的轻量级现代化c/c++的项目构建工具,主要特点是:语法简单易上手,提供更加可读的项目维护,实现跨平台行为一致的构建体验. 本文主要详细讲解下,如何通过添加自定义的脚本,在脚 ...

  8. 源码分析:Phaser 之更灵活的同步屏障

    简介 Phaser 是 JDK 1.7 开始提供的一个可重复使用的同步屏障,功能类似于CyclicBarrier和CountDownLatch,但使用更灵活,支持对任务的动态调整,并支持分层结构来达到 ...

  9. vue3.0和2.0的区别,Vue-cli3.0于 8月11日正式发布,更快、更小、更易维护、更易于原生、让开发者更轻松

    vue3.0和2.0的区别Vue-cli3.0于 8月11日正式发布,看了下评论,兼容性不是很好,命令有不少变化,不是特别的乐观vue3.0 的发布与 vue2.0 相比,优势主要体现在:更快.更小. ...

随机推荐

  1. centos下编译安装lnmp

    centos下编译安装lnmp 本文以centos为背景在其中编译安装nginx搭建lnmp环境. 编译安装nginx时,需要事先安装 开发包组"Development Tools" ...

  2. REGEXP 正则的实现两个字符串组的匹配。(regexp)

    主要懂3个mysql的方法:replace[替换]   regexp[正则匹配]    concat[连接]   由于某些原因,有时候我们没有按照范式的设计准则而把一些属性放到同一个字符串字段中.比如 ...

  3. bzoj3673可持久化线段树实现可持久化数组实现可持久化并查集(好长)

    线段树只用叶子节点感觉莫名浪费,,, 感觉真好写(刚从未来程序逃回来的人) #include <cstdio> #define mid ((l+r)>>1) ,ca,x,y; ...

  4. Lession1 写在机器学习之前

    机器学习从学习方式上来讲,可以分为两类: 监督学习(Supervised Learning),简而言之就是“有标签”学习 无监督学习(Unsupervised Learning),简而言之就是“无标签 ...

  5. Linux系统编程之IO_缓冲和非缓冲

    下面是一段类似日志记录的代码,已获取通讯的报文内容和当时的环境参数内容,就是创建一个文件,使用标准IO的fopen.fprintf进行输出记录.但是在调试中,刚开始我就傻眼了,文件创建成功了,但是实时 ...

  6. Shell脚本基础

    特别变量: $# 传递到脚本的参数个数$* 以一个单字符串显示所有向脚本传递的参数$$ 脚本运行的当前进程ID号$! 后台运行的最后一个进程的ID号$@ 与$#相同,但是使用时加引号,并在引号中返回每 ...

  7. c++书

    http://www.enet.com.cn/eschool/video/c++/   视频 http://www.runoob.com/cplusplus/cpp-inheritance.html ...

  8. iOS推送原理

    1.首先app会和apns建立长连接,会发送 udid和 bundle id给apns 2.apns会返回给app一个device token 3.用会把device token 发给自己的服务器 4 ...

  9. c和oc小知识

    1.const const 修饰了*p1 / *p2 const int * p1=&age; int const * p2=&age;//和上面的意义一样 ,换句话说就是 在 “ * ...

  10. C语言与java 20155317 王新玮第二次

    20155317 王新玮第二次写作感想   你有什么技能比大多数人(超过90%以上)更好? 刚刚看到这个题目,我的首先想到的是会一些中医,懂得中医的理论框架知识,懂得大部分的中医脉象,能够解决日常生活 ...