G2 2.0 更灵活、更强大、更完备的可视化引擎!

概述

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.0菌:关键时刻数据用chart.guide()吧
用户甲:可是guide好繁琐。。
1.0菌:。。。
2.0菌:你可以使用我的多View的功能!

image

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

image

二、自定义图形(Shape)

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

具体场景

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

image

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

image

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

image

三、连线图形标记(Edge)

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

image

四、移动端的支持

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

更丰富、更用心的图表DEMO

PC Demo

详细见G2 Demo中心

image

image

image

Mobile Demo

详细见G2-Mobile Demo中心

image

image

升级指南

PC 端

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

Mobile 端

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

注意事项

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

开发成员想说的话

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

联系方式

:octocat: : https://github.com/antvis
? : https://github.com/antvis/feedback/issues/new
✉️ :yubo@alipay.com

转载于:https://www.cnblogs.com/zaohe/p/5853629.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286336.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言试题十六之写删除字符串中指定下标的字符。其中,a指向原字符串,删除后的字符串存放在b所指的数组中,n中存放指定的下标。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写一个…

《iVX 高仿美团APP制作移动端完整项目》07 会员页制作

会员页如下: 一、会员页标题制作 会员页的标题是顶部的提示字样,该字样咱们可以分析,可以使用两个文本组件,每个占据一行: 首先咱们创建一个页面命名为会员中心: 接着在会员中心下创建一个行&#xff…

【ArcGIS风暴】ArcGIS添加超链接的两种方法详解

文章目录 1. 在识别对话框中添加超链接2. 利用属性字段添加超链接在ArcGIS中,可以很方便的设置文档超链接和URL超链接,设置完成后,只需要点击某个图斑就可以跳到指定的地址。本文详细讲解ArcGIS中超链接的设置方法。 1. 在识别对话框中添加超链接 启动软件,加载甘肃省行政…

Android Studio目录结构分析

Android studio 目录结构1. .gradleGradle编译系统,版本由wrapper指定2. .ideaAndroid Studio IDE所需要的文件3. app3.1 app/buildapp模块编译输出的文件3.2 app/libs放置引用的类库文件3.3 app/src放置应用的主要文件目录3.4 app/.gitgnoregit使用的ignore文件3.5…

《iVX 高仿美团APP制作移动端完整项目》08 会员页 标题、会员卡 制作

一、分类制作 我们接着往下制作该页的下半部分内容: 由于对应最下部分的商家推荐重复,直接复制即可,在此不做过多的讲解: 接下来我们创建一行命名为内容,用以作为下半部分的容器: 接着我们制作第一个种…

C语言试题十七之用来求数组的最大元素在数组中的下标并存放在k所指的储存单元中

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写一个…

微软AI插件Github Copilot初体验

前言上个月看到了一款插件 微软 GitHub AI 编程工具 Copilot于是就想尝尝鲜,但是GitHub Copilot是需要申请的,只有申请通过的才能使用这款插件。就在今天我收到审核通过的邮件。于是想看看这插件是不是像其它网友说的那样强!使用于是打开了我…

Firefox about

在firefox的地址栏输入about:about,然后看一下各个链接.有的链接有具体的用途,有的链接疯言疯语,并无软用. about:about集中了火狐浏览器的全部用户界面,平时常见的preferences,startpage,add-ons等都可以在此处见到. about:mozilla是mozilla之书,它仿照圣经的语言风格,讲述了m…

关于互斥锁,条件变量的内核源码解析

一、解决问题和适用范围 主要是用来等待一个条件,这个条件可能需要另一个线程来满足这个条件。这个和我们平常适用的pthread_mutex_lock的最大不同在于后者保护的一般是一个代码段(也就是关键区),或者一个变量,但是由于一般来说这个变量的访问…

【CASS精品教程】CASS 9.2绘制地籍图详细实验案例教程

文章目录 4.1 绘制地籍图4.1.1 生成平面图4.1.2 生成权属信息数据文件4.1.3 绘权属地籍图4.1.4 图形编辑4.3 绘制宗地图4.3.1 单块宗地4.3.2 批量处理4.4 绘制地籍表格4.4.1 界址点成果表4.4.2 界址点坐标表4.4.3 以街坊为单位界址点坐标表4.4.4 以街道为单位宗地面积汇总表4.4…

jquery.cookie.js 使用小结

先引入jquery,再引入:jquery.cookie.js添加一个"会话cookie"$.cookie(the_cookie, the_value);这里没有指明 cookie有效时间,所创建的cookie有效期默认到用户关闭浏览器为止,所以被称为 “会话cookie(sessio…

Android开发 人民币符号(¥)显示不一致的问题

不小心踩了个坑,发现这个人民币符号在不同机器上显示不一致,有的显示一横,有的显示两横。 百度查了一下,找到好很多解决办法,改字体,用图片等等。 最后发现原来用的是全角的“¥”的原因&#xf…

《iVX 高仿美团APP制作移动端完整项目》09 订单页制作

订单页制作比较简单,界面如下: 一、标题 首先创建一个页面,命名为订单页,并且给予背景色为黄色: 随后创建一个行,命名为主要并给予对应的基础属性: 接着给予这个主要行对应的上下内边距使其…

AutoDesk CAD 2014安装VBA Enabler图文教程(附AutoCAD_2014_VBA_Win_64bit下载)

在利用CASS将dwg地形图转为ArcGIS支持的Shapefile格式数据时,为了提高转换效率,通常我们会写一些VBA代码来实现,但是VBA不提供与AutoCAD OEM 安装介质,需要单独下载VBA环境。 Visual Basic for Applications (VBA) 引擎不再提供与 AutoCAD OEM 安装介质。 请联系您的 Auto…

C语言试题十八之根据以下攻势计算s,计算结果作为函数值返回;n通过形参传入。S=1+1/(1+2)+1/(1+2+3)+…….+1/(1+2+3+4+……+n)

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 编写函数f…

开源项目 英雄联盟 之WPF

WPF 英雄联盟作者:Devncore 组织 来自 韩国,首尔原文链接:https://github.com/devncore/leagueoflegends感谢分享者晨晞gg[1];框架使用.NET6;C# 10.0;Visual Studio 2022;您可以了解如何正确实施 WPF 项目。描述了如何…

1055 最长等差数列

1055 最长等差数列基准时间限制:2 秒 空间限制:262144 KB N个不同的正整数,找出由这些数组成的最长的等差数列。 例如:1 3 5 6 8 9 10 12 13 14等差子数列包括(仅包括两项的不列举)1 3 51 5 9 133 6 9 123 8 135 9 136…

Android studio 的快捷键 MAC 和Win版本

功能描述keymap对应名字MacWin/Linux提示错误解决方案Show Intention Actionsoption enteralt enterAS配置界面Preferencescommand ,controlaltS工程项目配置界面Project Structurecommand ;Control+AltShiftS快速构成代码Code Generatecommand Nalt insert代…

java中try 与catch的使用

(2011-10-08 17:08:43) 转载▼标签: 杂谈 分类: Javatry{//代码区}catch(Exception e){//异常处理}代码区如果有错误,就会返回所写异常的处理。 首先要清楚,如果没有try的话,出现异常会导致程序崩溃。而try则可以保证…

iVX 倒计时制作

需求:点击开始计时计时,并且开始计时按钮文本编程停止计时文本,点击记录事件可以记录当前时间并显示到下面的记录时间列中。 一、页面制作 首先创建一个相对应用项目,命名为计时器: 接着创建一个页面,设…