导读

数据时代一个显著特征是数据可视化的崛起，被誉为大数据分析应用领域里的最后一公里，数据可视化将数据分析、工程技术与设计艺术结合，借助图形化的手段，用比文字快十倍甚至万倍的速度清晰有效地传达信息，让人们可以利用人类经历漫长进化得来的强大视觉化思考本能去对所呈现数据进行挖掘、整合，得以辅助分析和决策。

早在 300 年前折线图、柱形图、饼图被发明，时至今日有了纷繁多样的数据可视化表现形态，而生产方式也从原始手绘到今天可以通过代码、工具自动生成，数据可视化领域跟过去相比已经有了翻天覆地的变化，特别是最近10年，随着 D3（D3: Data-Driven Documents IEEE InfoVis 2011） 以及大量统计图表类库和工具出现，让数据可视化设计和生产门槛大幅降低。

伴随数据可视化的价值越来越被人们认可以及生产工具的普惠，越来越多设计师、工程师、产品经理开始接触这个领域，甚至可以说在现代化的 Web 系统中已经很少有不含任何数据可视化成分。作为这个专业领域的研发人员，我们一直在思考如何让这个研发成本更低，在如今可视化类库已经工程成熟、理论完备的当下，也许可以往智能化方向去寻求突破。

于是有了接下来想跟大家分享的一个智能可视化体系，AVA。可以读作「 阿瓦 」，字母 VA 是 Visual Analytics 的缩写，表示可视分析，而第一个 A 是一个向量，有很多涵义，可以是 Alibaba 表示阿里巴巴集团多个专业可视化团队联合共建，可以是 AI、Automated 又或者 Augmented，表示人工智能、自动化和增强分析。

我们希望提供一个智能、自动化的可视化分析黑盒子，只需要提供数据本身和分析意图，合适的图表或可视表达就能够自动被推荐和生成出来了，所有中间的环节，AVA 都能帮大家处理掉。

要做到这个理想模式还需要大量的工作，而聚焦当下面对可视化研发阶段的痛点，我们有了一些阶段性成果可以跟大家做个分享，希望能听到大家的建议和意见。

我们在思考，今天的数据可视化设计、研发方式就足够的好了吗？这过程我们还会遇到什么麻烦？

昨天那些似曾相识的情景今后不再有了

万事俱备，就差我看完文档了

作为一个前端，最幸福的项目研发状态莫过于「人员齐备、接口到位、需求定好、设计定稿」，万事俱备我们撸起袖子就可以开干了。但别急，如果涉及到数据可视化，特别是很幸（bu）运（xing）的发现设计稿里的图表蕴含设计师不甘平庸的个性化定制，不好意思，你得看完并搞懂那数十个 API 以及数百个可以无穷组合的配置项，试出你想要的效果。

更别说万一涉及到那些初次见面或者当年毕业就已经还给老师的东东~

可视化辅助可视化研发

在 Low Code / No Code 可视化 UI 辅助前端研发盛行的今天，可视化研发居然还没有一个可视化 UI 去辅助研发？抱歉，我们来晚了。

通过 AVA 的可视化智能研发能力，我们希望工程师只需要写一个 API 调用，剩下的一切调整都能通过可视化 UI 去完成，就像你不需要去看苹果产品的产品使用说明一样，在你启用的那刻就学会了如何使用。

你可以通过下面这行代码，传入数据，指定图表类型，即可在页面上唤起 AVA 研发态的可视化 UI 配置面板：
AVA.autoChart(container, data, { config: { type: 'line' }});
不用再去看图表类库的文档，AVA 语义化的 UI 面板现已支持 100+ 图表选项修改并且还将持续增强，*调整，即时生效。调整完成，拷贝配置到代码，开发就完成了。

点击查看视频

如果你的设计没问题，那一定是我用的图表库有问题

遭遇高端细节需求的时候，设计师同学经常会遇到各种灵魂拷问，「 这样的设计符合可视化设计规范吗？」、「 画得出来就一定能开发出来吗？」，于是就是反复的设计合理性、技术可行性沟通、反复的改稿、上线后还要去做设计还原对比？

设计到研发链路打通，设计还原零失真

通过代码在研发时唤起 AVA 的可视化 UI 配置面板去还原设计稿，这是给前端工程师的专属武器，但如果设计师、产品经理也是用 AVA 的能力去做设计搞，工程师又何必动武呢？

没错，聪慧的你已经逐渐看清 AntV 产品矩阵上的棋盘了，不久前我们已经发布上线的 ChartCube 正是为此准备，这是给设计师、产品经理准备的专属武器，从 ChartCube 到 AVA，设计到研发链路打通，设计合理性、技术可行性无需反复沟通，中间产物可以被无缝连接，设计还原零失真。

哪有万事俱备，通常我只知道画个什么图

做过业务研发的前端同学都深谙其道，虽然我知道要画一个什么图表也懂得怎么去开发这个图表，但不到联调哪一天数据接口都不会 Ready 的，我需要脑补一份这个图表背后的数据应该长成什么样，然后跟后端同学沟通数据接口，接着自己去构建一份 Mock 数据。

这有多难？对有数据经验的你说难，不难，但没数据经验的同学可能平表（Tabular）和交叉表（Crosstab）不分，自定义的 Mock 数据并不规范，真正联调时才发现需要增加大量数据处理工作。

交叉表（Crosstab）与平表（Tabular）的区别（图片来自 excel-university.com）

从图表类型选择到研发态数据准备，一切就绪

AVA 智能研发可以开启智能向导模式，从一行万能代码开始

AVA.autoChart(container, []);

你无需任何额外的参数输入，会看到 AVA 的研发向导，选择「从图表类型开始」，选择需要的图表类型，接下来的事情你在上面已经看过了，拷贝数据和配置回到代码里，你图表部分的开发工作在写完这一行代码和两次复制粘贴的动作后就已经结束了，把数据格式告诉后端，等着他接口 Ready 联调就好。

还万事具备？我接的还有一句话需求

数据没有准备好是常态，有设计就不错了，我知道很多时候我们甚至连设计都没有，我们的同学就接过一整页数据监控报表的需求说明里只有一句话，“管控平台三期需要新增一个 Tab，给用户提供系统运行情况的数据分析，目前系统能采集到的元数据见列表”，然后就留下在风中凌乱的你~

从数据特征到智能图表推荐，万事俱备

先说说数据，根据 data schema 去构造 Mock 数据有多疼？

说不疼也不疼，7、8个数据不就是 ctr+c、ctr+v 吗？说疼也很疼，你是没遇到过要构建近5年全年分日销售数据？或者要分类交叉枚举全国34个省级行政区域数据？更别说如果还要求这组数据带有某些如均值、方差、偏态分布的统计特征？

图片来自网络

不管是 Mock 还是真实数据，有数据又怎么样？图表选择困难症，什么样数据该用什么样的图表展现？君不见 WTF Visualizations 上无数脑残的表现方式出现在我们的产品设计中。

WTF Visualizations 上的可视化错误示例

不同的数据，不同的分析意图选择用什么样的图表来表达本身就是一门学问，这领域的专家、学者已经总结出很多经验工具，比如这张很有经典的决策树。

没有一种图表类型是万能的，每一种图表类型都有他适用的场景，甚至有些时候明明是正确的图表选型，在数据发生变化后突然变成不对了也是常有发生，简单举个例子，比如大家熟悉的饼图，下面这是两组数据，用了两个饼图去显示，不管是两组数据自身的构成比例还是两组间的对比都特征显明：

而突然有一天你发现数据变化后，变成这样了：

饼图在这个时候就完全没 point 了，而如果变成柱形图，你就会有不一样的发现：

这就是图表选择的门槛与艺术，希望 AVA 能解决这个问题，还是从那一行万能代码开启 AVA 智能研发向导：

**AVA.autoChart(container, []);
**
你会看到 AVA 的研发向导，选择「从数据特征开始」，仅需数据特征即可自动生成 Mock 数据，为可视化研发提供研发态数据准备。应用到当前图表中，智能图表推荐将出现，选择需要的图表类型，接着就又回到那熟悉的流程。

点击查看视频

智能图表推荐

「对的数据」要配「对的图表」，智能图表推荐能力建立在可视化领域学者的诸多学术研究成果之上，结合了大量专家经验以及 AntV 多年来的图表使用规则的最佳实践，关于 AVA 智能图表推荐原理涉及到的知识库、推荐规则与推荐器实现，我们会在后续文章中详细介绍，期待你的关注。

明天会是什么样？

当前的可视化智能研发是 AVA 版图中很重要的组成部分，但还处于很初级的阶段，只能满足基本的研发诉求和业务场景。明天会是怎么样？在我们的规划里还有长长的功能列表等待我们去实现，很多让人兴奋的能力让我们充满期待，希望他能指引我们进入到下一个数据可视化时代。

研发态：全智能图表推荐，代码极简

当前智能图表推荐会产出配置项代码，需要我们拷贝至代码中以稳定图表展示方式，虽然相比以前已经大幅提高了研发效率，但依旧繁琐。而之所以需要拷贝回代码中，源于我们当前推荐算法还不完善，而我们相信，随着算法代码的不断优化，在不久的将来，我们很多场景都可以仅需一行极简的代码，完全依赖智能图表推荐输出就能满足我们的业务研发需求。

阅读态：交互分析组件智能增强

前面描述的都还是研发态的智能辅助，而 AVA 的目标还会延伸到阅读态，最典型的就是交互分析组件的智能增强。简单点的比如说 Slidebar 的动态出现，我们可以根据当前图表类型以及显示空间的大小，计算可视化的有效显示负荷，并随着图表需要渲染的数据量的变化动态决定是否出现 Slidebar 去做交互分析的增强。更复杂的我们可以自动做关联图表的联动，在适合的场景下自动开启联动刷选、下钻、动态图表类型等能力。

分析态：运行时的可视分析智能辅助

更进一步，不管是静态展现还是动态交互，目的都是为了分析，AVA 延伸到阅读态的最终目标是帮助人们更好的获得数据洞察，所以 AVA 未来会做运行时的可视分析智能辅助，比如自动识别出趋势、回归、奇异点等统计特征，实现自动演示模式的 Storytelling 能力透出去更高效的帮助人们解读数据。

结语

AVA 由蚂蚁金服 AntV & DeepInsight、新零售技术事业群 FBI、盒马 Kanaries 等阿里巴巴集团内多个核心数据可视化技术和产品团队联合共建，包含前后端工程、算法与模型，随着能力完善将逐步对外公开并以开源方式运作，期待大家的关注与参与，欢迎任何的建议或意见。

https://github.com/antvis/AVA

今天分享的可视化智能研发能力是 AVA 大版图上重要的组成部分，同时也承载着 AntV 产品矩阵通往未来智能可视化方向的重要使命，怀揣「让人们在数据世界里获得视觉化思考能力」的梦想前行，更多了解 AntV，欢迎关注我们的 GitHub 项目，点亮 star 了解我们的实时动态，期待 pr：

• AntV 官网：https://antv.vision
• G2：https://github.com/antvis/g2
  G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。
• g2plot： https://github.com/antvis/g2plot
  g2plot的定位是开箱即用、易于配置、具有良好视觉和交互体验的通用图表库。
• F2：https://github.com/antvis/f2
  F2 是一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（node, 小程序，weex）。完备的图形语法理论，满足各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。
• G6：https://github.com/antvis/g6
  G6 是 AntV 旗下的图可视化与图分析引擎，G 来自于 Graphic、Graph ，意味着我们要基于图分析技术做图可视化；6 来自于《六度分隔理论》，表达了我们对关系数据、关系网络的敬畏和着迷。
• Graphin：https://github.com/antvis/graphin
  Graphin 是一个基于 G6 封装的关系可视分析工具，简单，高效，开箱即用，取自 Graph Insight，图的分析洞察。
• L7：https://github.com/antvis/l7
  L7 是一个基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。
• G：https://github.com/antvis/g
  G 是 AntV 几个产品共同的底层 2D 渲染引擎，高效易用，专注于图形的渲染、拾取、事件以及动画机制，给上层 G2、F2、G6 提供统一的渲染机制。
• ChartCube：https://chartcube.alipay.com
  ChartCube 是一个可以快速完成图表制作的在线工具，只需要三步就可以创建出高品质的图表。
• AVA：https://github.com/antvis/AVA
  AVA 是一个智能可视分析框架，包含研发时的智能研发向导，阅读时的智能交互增强，可视分析时的智能辅助。

---

关注「Alibaba F2E」
把握阿里巴巴前端新动向