g22.0更灵活更强大更完备的可视化引擎!

最骚的就是你 最骚的就是你     2022-08-03     386

关键词:

概述

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的功能!

技术分享

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

技术分享

二、自定义图形(Shape)

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

具体场景

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

技术分享

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

技术分享

1.0菌:无法反驳!
某前端:我想要这样[email protected]@oox&&(持续描述五分钟。。。)
1.0菌:把这些代码都加到我身上,我会膨胀死。。。
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

开发成员想说的话

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

❤️bqplot让交互可视化更简单更灵活❤️(代码片段)

...解),但是丰富了交互图层,可满足丰富的交互式可视化需求,比如, 神经网络交互可视化时间序列交互可视化 此外,在基础图形可视化上 查看详情

魔众企业vi系统v2.1.0多种组件支持可视化更强大

...1.0版本,新功能和Bug修复累计29项,多种组件支持可视化更强大。2021年08月09日魔众企业VI系统发布v2.1.0版本,增加了以下29个特性:·[新功能] 查看详情

类似torrentkitty的网站都有哪些

...色之处在于提供了多种搜索种子途径,可以根据实际需要灵活选择。三、Extratorrent:一种更广泛的BT种子搜索网站,虽然是英文界面,但是仍然支持中文搜索,尤其提供的海量Bt种子资源,一定不会让你失望的。四、Kickasstorrents... 查看详情

企业报表工具有哪些?

SmartbiInsight以中国式报表、多维度分析、可视化仪表盘为核心,满足报表需求的功能以“真Excel”为特色,将OfficeExcel和WPS表格变为企业级WEB报表设计器,表格样式与计算逻辑的灵活性不言而喻。中国式报表能力全面借助Excel的强... 查看详情

数据可视化之dax篇(二十三)allexcept应用示例:更灵活的累计求和(代码片段)

https://zhuanlan.zhihu.com/p/67441847累计求和问题,之前已经介绍过(有了这几个公式,你也可以快速搞定累计求和),主要是基于比较简单的情形,针对所有的数据进行累计求和。现实中的需求并不总是这么简单,稍微复杂一点的是... 查看详情

3d轻量化引擎推出新技术,模型渲染更逼真!

...过GPU上运行的着色器代码进行有效地实现。一、工程领域可视化问题停滞严重在过去的30年里,PC端的3D轻量化功能取得了令人难以置信的进步!如果没有它们,我们就不会有一个价值数百亿美元,蓬勃发展的游戏行业。 尽管... 查看详情

使用 python for 循环将硬代码更改为更灵活

】使用pythonfor循环将硬代码更改为更灵活【英文标题】:Changehardcodetomoreflexibleusingpythonforloop【发布时间】:2020-07-1622:44:51【问题描述】:我正在编写有关绘图的代码。我用hardcode方式编写,所以我的代码不够灵活。我知道可以使... 查看详情

还在用clickhouse?事实证明es更强大!(代码片段)

点击关注公众号,实用技术文章及时了解来源:zhuanlan.zhihu.com/p/353296392Elasticsearch是一个实时的分布式搜索分析引擎,它的底层是构建在Lucene之上的。简单来说是通过扩展Lucene的搜索能力,使其具有分布式的功能。... 查看详情

如何捕获状态 - 比 BOOL 更灵活,但比 NSString 更独特

】如何捕获状态-比BOOL更灵活,但比NSString更独特【英文标题】:Howtocapturestate-MoreflexiblethanBOOLbutmoredistinctthanNSString【发布时间】:2013-03-2913:57:19【问题描述】:我正在调用一个方法来设置状态,在本例中为animateState。状态参数可... 查看详情

为啥 CompareAndSwap 比 TestAndSet 更强大的指令?

】为啥CompareAndSwap比TestAndSet更强大的指令?【英文标题】:WhyCompareAndSwapismoreofapowerfulinstructionthanTestAndSet?为什么CompareAndSwap比TestAndSet更强大的指令?【发布时间】:2013-10-2805:57:24【问题描述】:请考虑下面的CompareAndSwap代码,让... 查看详情

云容器引擎:让企业it创新更简单更可靠

云容器引擎:让企业IT创新更简单更可靠互联网+时代,如何帮助企业实现应用快速交付,迅速响应业务变化抓住商机?华为CCE云容器引擎定义企业级容器云,助你成功!云容器引擎是一种高性能可扩展的容器服务,为企业提供应... 查看详情

魔众发卡系统v2.0.0支持商品自定义字段,发卡更灵活

...和Bug修复累计3项,支持商品自定义字段,发卡更灵活。2021年06月30日魔众发卡系统发布v2.0.0版本,更新了以下3项改进:·[新功能]支持自定义字段·[新功能]增加首页公告功能·[新功能]增加邮件查询功能★运行环境... 查看详情

在财务工作中怎么使用powerbi呢?

...BI来批量爬取网页数据,用以财务数据的准备5、财务数据可视化:通过可视化,让枯燥的财务报表数字变得更直观、更易于理解、更快速的传递关键信息。除了三大报表可视化,还有利润表的瀑布图展示、财务指标的杜邦分析等... 查看详情

“单子变压器比效果更强大” - 例子?

】“单子变压器比效果更强大”-例子?【英文标题】:"Monadtransformersmorepowerfulthaneffects"-Examples?【发布时间】:2015-09-2821:50:13【问题描述】:关于Idris影响的论文"Programmingandreasoningwithalgebraiceffectsanddependenttypes"byEdwinC.Brady包... 查看详情

第四章

....内容与表现分离 ②.网页的表现形式更加统一,更用于灵活修改 ③.丰富的样式,使得页面布局更灵活 ④减少代码量,增加浏览速度,节省宽带流量 ⑤运用独立的CSS,有利于网页被搜索引擎收录 3.CSS3基本语法: ①HTML中的注... 查看详情

当我们已经拥有更强大的向量时,为啥还需要堆栈?

】当我们已经拥有更强大的向量时,为啥还需要堆栈?【英文标题】:Whydoweneedstackswhenwealreadyhavevectorswhichareevenmorepowerful?当我们已经拥有更强大的向量时,为什么还需要堆栈?【发布时间】:2021-11-0311:09:18【问题描述】:在C++STL... 查看详情

华为工单宝——为企业客户提供更强大的数字化现场作业解决方案

...④ 智慧城市服务解决方案,0代码作业流灵活编排,可视化城市服务管理,单兵智能装备开箱即用作为数字化现场作业领域的后起之秀,华为工单宝入局较晚,但在短时间内很快就吸引了众多行业客户的认可与好评。华为工... 查看详情

javascript脚本和lua脚本哪个更强大?

javascript脚本和Lua脚本哪个更强大?javascript都是web前端开发lua多是游戏相关的,服务器lua脚本,游戏界面脚本这些参考技术A用处不同,没有可比性。但从功能上看,lua功能多一点。lua可以结合游戏,比如魔兽世界的界面就是结合... 查看详情