image.png

简介

G2 自 2014 年以来已经发展到 4.0,回顾过去,我们发现每一个版本都是一笔记忆,当我们对每个版本的架构进行梳理,分析每个版本背后的思考时,这些记忆就转换成了财富,我从下面这些阶段谈起:

image.png

G2 之前的图表

在 2014 年上半年,由于业务上的要求,我参考了苹果在 keynote 和 numbers 的设计风格,实现了一套常见图表的图表库 Acharts,在配置项上参考了 highcharts ,实现了 10几种图表,能够满足常见的数据展示需求:


image.png


这个图表库在架构上非常简单,底层基于 Rapheal.js,兼容当时所有的浏览器,在公司内部的一些系统上得到了使用,整体思路还是按照做前端组件库的思路,一个个图表的进行开发,在动画、交互、渲染方面进行独立的优化。

image.png


这个版本开发了大概半年多,遇到了一些问题:


当时也是 R 语言的 ggplot2 大火的年代,数据分析同图表结合真的让人打开眼界,我去读了 ggplot2 背后的 《The Grammar Of Graphics》,结合当时内部的一些数据分析业务,想能否做一套同 ggplot2 相同定位的 web 端的可视化分析工具,这就有了 G2 这个项目。


v0.1-v1.0 成型

G2 是在 2014 年 9 月份正式开始设计和开发,一个月后开发出第一个版本 v0.1,完全仿照 GPL (IBM SPASS 的绘图引擎)进行了 javascript 的改写, 语法完全基于函数:


var A = G2.Attr;
chart.line(A.position('x*y'), A.color.hue('z'))
chart.render();


通过这些工作图形语法在前端的可行性得到验证,接下来三个月我在 G2 中支持了统计函数、数据列处理(参考 R语言的 DataFrame),秉持着 “一句话一个图表的理念”,疯狂的进入编码阶段,实现了折柱饼、直方图、色块热力图、k 线图 等常见的图表,于 2015 年 3 月份正式发布了 v1.0 版本。

G2 的 v1.x 版本包含三个版本:v1.0、v1.1 和 v1.2,这三个版本的架构并没有发生变化,核心部分是完成 数据到图形的映射 ,一直到现在正在开发的 G2 4.0 版本这些模块都很稳定。

image.png

模块的说明:

如果你有过使用 G2 的经验,发现 G2 1.0 已经具备了 G2的 核心功能,创建一个图表的过程主要有三步:

chart.source(data);
chart.point()
  .position('carat*price')
  .color('clarity');
chart.render();


在此基础上配合统计语法,可以绘制出所有常见的图表:


//直方图
chart.interval().position(Stat.summary.count(Stat.bin.rect('depth')));
//六边形热力图
chart.polygon().position(Stat.bin.hex('carat*price')).color(Stat.summary.count());

image.pngimage.png


1.x 版本并没有开源,迭代了 3 个小版本,这个版本同样开发了 1 年的时间,仅在蚂蚁和阿里内部 10 几个系统上使用,这些系统都有以下特点:


一个工具一旦诞生,就会应用到你意想不到的领域,工具开发者的也会人为创造需求以图活下来的动力,所以接下来 G2 做了更多,不知何时就偏离了初始的方向


v2.0 完善图形语法

v2.0 版本是在 2016 年 3 月正式发布的,这个版本依然秉持着 一句话一张图表 的理念,野心更大的想绘制出所有见过的图表。所以在 2.x 版本,我们做了下面的工作:


image.png


从架构图上来看 G2 v2.0 和 G2 v1.0 是一个兼容的版本,仅增加了 View 和 分面的支持,但是基本所有模块都进行了重构,这些模块一直到稳定到现在。

G2 v2.x 从 2016 年 3 月 到 2017 年 11 月发展了 4 个版本,在阿里集团内部的系统数增长到 400+,这时候使用的场景已经多样化,用户对图表的设计、易用性、组件细节都有了大量的要求,同一时期 Echarts 已经非常完备,我们开始在组件、交互、图表的细节展示等多方面进行改造,同 G2 定位于 ”数据分析的图形语法“ 的方向越来越不一致。

这期间我们也做了在后来看来使用不多的一些功能,这些需求并非来自真实的需求,而是受 ggplot2 的影响,以为我们的业务可以用得到,例如:


// 绘制等高线
chart.contour().position(Stat.smooth.loess.triangular('l*g*Altitude',0.01)).color('Altitude','hue').size(3);
// 密度函数生成热力图
chart.heatmap().position(Stat.smooth.loess.gaussian('g*l*tmp', 0.03)).color('tmp', '#233284-#FCE89A-#8A1D25');


image.pngimage.png


可以看到在 G2 2.x 中一些图标的绘制需要使用各种统计函数,从理论上说你可以通过 坐标系*度量*几何标记*统计函数 生成无数的图表,但是具体在业务上的价值那就在这里讨论,看看这些图表有什么应用场景:

image.pngimage.png

仔细想来这些功能并非没有应用场景,而是我们自己做的并不够专业,细节实现的并不好,也没有进行布道,真所谓努力了好久,没有得到什么掌声 


v3.0 通用场景的支持

时间到了 2017 年中,随着 v2.x 的用户越来越多,非数据分析的场景越来越多,来自用户的诉求并不是支持多少图表,而是对一些图表特性的要求:

同时 2.x 的一些问题也暴露出来,统计语法对于非数据背景的开发人员来说过于晦涩,图形语法与一些具体图表的特殊化代码(柱状图的起始点从 0 开始,饼图只有一个传入 position 的字段等)的无法正交。当时 vega 初步在社区上出现,我们参考 vega 的 transform 将统计和布局模块从 G2 中移出,放入了 DataSet 模块中。个性化的交互也要求越来越多,所以 G2 3.0 从开始就调整了方向:

从 G2 3.0 的架构图,我们可以清晰的看到架构上的调整,这个版本最大的变化就是 面向一般图表展示场景的易用性 。


image.png


G2 3.0 于 2017 年 11 月 22 正式发布,整个项目周期迭代了 2 年,这个版本有 6 个迭代,前两个迭代依然在图表覆盖范围的增强,支持了一些新的图表类型:

image.pngimage.png

image.pngimage.png

image.pngimage.png

中间的两个版本设计师对基础图表进行了大量优化,推出了一些经典案例:

image.png


G2 3.x 版本贯穿了 2 年 6 个版本,内外部系统的使用量超过 20000 个,从一个面向数据分析的图形语法,转变为支持通用场景的图表库,我们投入了大量的开发和设计资源。在发展壮大的同时,我们遇到了一些问题:


V4.0 交互语法和多维分析

2018 年 10月份我们开始了 v4.0 的设计,这个版本的背景是当前的版本不满足重的 BI 场景的需求,在异常数据展示,交互细节等方面被业务方诟病已久。技术层面整个技术栈迁移到 typescript,所有的模块全面重构,团队方面有了更多新人的加入,但是这个版本并没有发布,降级成为 v3.6 版本,新的 v4.0 版本于 2019-8 月份重启,2019-11-22 发布 alpha 版,12 月 30 日 发布 beta 版,2020 年 2月底发布正式版。

G2 v4.0 的定位发生变化:

所以 G2 v4.0 版主要做了下面的几件事情:

image.png


G2 的最终形态一定是多种语法的组合:

所以在 G2 4.0 正式版发布后,我们会继续对改进 G2,可能在未来 2-3 年都是 v4.x 的时代,最终的架构如下:

image.png

总结

过去 5 年 G2 重构了数十次,有一些模块如数据映射模块始终稳定,有些模块如组件模块一直差强人意,有些模块如动画模块、交互模块总不能让人满意,但是我们一直坚持改进着,向着我们做出一套世界级的可视化工具的梦想前进着,可能会是 5 年 10年,梦想总是有的,一定可以实现!