ChartLinter 你的图表可以更好

517 阅读8分钟

ChartLinter头图.png

ChartLinter 是什么

想要使用可视化图表准确传达数据内涵,帮助用户更好地分析和洞察数据,往往需要图表制作者自身具有良好的可视化领域专业知识。然而,实际工作中产生的图表总会有或多或少的问题出现,导致数据背后的信息不能被正确表达,甚至给用户理解数据带来误导。

为了解决这样的问题,我们和同济大学智能大数据可视化实验室(iDVX Lab),基于先前合作研发的 VizLinter(纠错案例如下图所示),共同建设了图表优化 ChartLinter 方案。想想平时所使用的 ESLint、TSLint 这样的 Code Lint,你应该已经猜到了 ChartLinter 是做什么的。没错,它能够根据可视化设计规则,自动识别图表设计中存在的问题,给出恰当的修改方案。 image (1).png

业务中的图表问题

在企业内部,可视化图表广泛应用于 BI 工具、业务中台、监控系统和数字大屏等场景。以 BI 工具为例,它为用户提供了十分丰富的图表种类,满足了越来越多的需求类型。不过,由此也带来了图表配置变复杂和使用门槛变高等问题。

在面向用户所做的图表问题调研中,我们注意到用户提到的多个问题其实存在交叉性。「图表配置自定义功能不够强大」、「图表不够美观」和「图表配置过于复杂,功能找不到」这三个问题其实都指向了用户不会用图表组件,以及用户找不到需要的图表配置的问题。总结起来就是: 图表功能越来越多,新手用户找不到合适的配置; 专家用户有更高要求,需要更多精细配置 ; 用户抱怨图表不好看,其实可能是排版、数据或配置的问题。

为了降低使用门槛和答疑成本,提升用户使用产品的效率,我们需要让可视化图表生态完成从用户找功能,走向功能找用户的转变。ChartLinter 在学术方案 Python 代码库的基础上,构建了一套基于 TypeScript 的增强方案,能让广大 AntV 开发者和 Web 端用户使用到 ChartLinter 的基础特性和我们的更多特性。

来看看实际效果

我们以 ChartCube 的图标配置项为例,选择了条形图后,可以看到右侧有非常多的配置项可供用户选择。哪些配置项是需要的,哪些是不需要的,想必不少用户都会感到困扰。 image (2).png 而在蚂蚁内部的 BI 工具中,我们为用户提供了比上图还要丰富和复杂的图表种类和配置项。假如我们从一个数据集中,选择城市作为维度,选择指标作为单价(求和),来绘制一个条形图。可能得到的结果会是下图这样的“令人头秃”。 image (3).png 不过,还好我们有 ChartLinter。它已经通过右上角的小黄点,像呼吸灯一样闪烁着告诉我们,你的图表可能存在一些问题。点开看看,可以发现,原来它已经贴心地为我们准备好了 3 条建议。我们可以选择部分采纳,也可以全盘接受。如果修复后觉得不满意,还可以取消优化,立刻反悔。我们还可以展开规则细节,查看这条规则背后的图表设计知识。另外,如果实在觉得某条规则让你无法接受,只需鼠标悬浮,点击「忽略」,从此,它再也不会出现在你的这张报表中。 image (4).png 让我们一起来看看下面这张优化前后的动图,在选择了「应用全部」后,我们的条形图瞬间变美。此刻,有没有觉得神清气爽。 Linter条形图.gif 在折线图、饼图以及更多图表类型中,ChartLinter 都能够发挥作用。 Linter饼图折线图.gif

自由的使用方法

ChartLinter 有两个重要模块,一个是 Linter,另一个是 Fixer。从图表上识别问题所在,是 Linter 的职责,而修复这些问题,则是 Fixer 的工作。无论你用的是何种前端图表库,只要将图表类型和配置项交给 ChartLinter 就好,接下来它会通过 Adaptor(目前已支持 G2Plot) 将图表配置转义为我们特殊定制的图表通用编码 Specification。Specification 在整个流程中的作用,就像是普通话,是一种通用的“语言”。Linter 能够识别 Specification 结构,并通过既定 Rules 验证当前结构是否符合规则。如果存在不符合规则的部分,则会将规则 ID 暴露出来。每个规则 ID 都对应一条优化建议。接下来,你可以根据自己上层应用的需求,定制 Fixer,以决定如何处理这条规则。

在整个流程中的每个模块,你都可以拆解下来自由替换。在 Fixer 模块,我们没有选择直接帮用户修复图表问题,而是抛出问题 ID 并在社区规则文档中给出思路,解法将由你自己定义。这样的做法,是考虑到上层应用方式和图表库类型各有不同,每种图表库都可以有自己的修复方案。

值得注意的是,Rules 包含硬约束(Hard Rules)和软约束(Soft Rules)两种类型的规则。硬约束是同济学术方案默认提供的规则,也是学术界当下公认的基本规范(基于 Draco),而我们提供了软约束支持用户自定义,支持用户自由扩展。此外,市面上不少图表库已经规避了一些硬约束问题,额外提供软约束,能够更好地满足不同图表库的需要。

目前,我们已经支持了笛卡尔坐标系下的常见图表类型。如果你现在就想在极坐标系或者其他特殊坐标系的图表中使用 ChartLinter 方案,可以通过 rule-base 的方式根据图表库特性额外编写规则。例如,在我们的业务图表库中有这样一条规则,饼图的切片数不建议超过 8 片,但是你也可以根据需要将切片数量的限制改为 10。之后,你也可以增加更多你喜欢的规则。 图表优化流程.png

和图表推荐的区别是什么

在 AntV 的智能可视化解决方案 AVA 里,我们已经为你提供了图表推荐能力。那么,图表推荐和图表优化的区别是什么呢?图表推荐指的是,针对原始数据和分析意图来推荐图表。而图表优化是在已经有了图表的情况下,通过改善配置项,来进行图表功能提升。可以说,图表优化是可视化领域的美图功能,能帮我们对图表完成一键美化的工作。 1621674351917-622df53d-35d7-45d2-ad1c-23558081118d (1).gif

关于未来

在未来,我们期待看到的是,ChartLinter 能够成为图表不可或缺的一项能力。除了图表优化本身,我们已经发现 ChartLinter 还可以成为非侵入式的新手引导,告知我们的用户一些对 ta 有用的新功能。

ChartLinter 是紧贴业务需求而诞生的技术,它生于 BI 而不止于 BI。接下来,我们会为它添加丰富的规则文档库,就像你日常编程所用到的 Code Lint 那样。我们会为它增加更多图表类型支持和更多切实可用的规则,这些规则可能来自设计师,也可能来自工程师,更可能来自于你。诞生于智能可视化解决方案 AVA 的 ChartLinter 正在考虑和 Chart Advisor 共生,将把整个智能图表的链路打通,形成一条完善的 pipeline。我们还希望将来,你在 VSCode 中编写 AntV 图表库代码时,除了有 ESLint 帮你发现代码中存在的问题,还可以有 ChartLinter 即时帮你找到图表设计上的问题。

官网:ava.antv.vision/zh

GitHub:github.com/antvis/AVA

附:智能可视化论坛纪要

image (5).png 2021 年 5 月 28 日下午,AntV 和同济大学智能大数据可视化实验室(iDVX)联合举办了智能可视化论坛。在论坛期间,双方的多位核心成员分享了他们在智能可视化领域的最新成果与思考。当天,AntV 和 iDVX 还共同发布了智能图表优化方案,与线上线下的观众一起讨论了智能可视化的机遇和挑战。本次论坛线上人气火爆,B 站直播人气近 4000。点击可查看回放视频,更多相关信息可查看《活动回顾 | iDVX × AntV 智能可视化创新论坛精彩瞬间》