图表引擎调研-特点与发展发向
背景
本文将描述对一些著名的图表引擎的调研结果。以期对图表引擎的开发做出一些方向性的指导。
本文主要调研一些开源的底层图表库,评估其易用性、灵活性、可定制性、以及接入charts-studio的难易程度。目的是评估图表工具的底层引擎是是否需要更换,能否为图表工具选择一个灵活且高效的底层引擎。
项目详情见:chart-lib-learn
本文将简述ECharts
如何实现标签自动旋转特定角度以解决柱状图或折线图轴线标签重叠的问题。
解决问题的流程如下:
[0,25,45,70,90]
。label
并根据最长的label
的 size
计算每一个候选的旋转角度下的size
(详情见:https://codepen.io/agurtovoy/pen/WNPyqWx)width
下图中的横向绿线部分即和轴交叉的部分。height
为下图中红框高度。size
和图表中的间隔做比对,横向图width
做比对纵向图height
做比对。看最大label
的交叉长度需要几个单位间隔的宽度来装。这个值即为label
的间隔个数。vega的schema
设计以json
格式描述数据视觉外观和交互式行为而闻名。 作为业界标杆本文简析Vega-Schema的设计。
以下是 Vega 规范的基本概述。完整的规范包括数据、刻度、轴、标记等属性的相应子集的定义。
1 | { |
HighCharts
是一个默认使用SVG
渲染器的图表引擎,其对内部的DOM
元素都设置了Class
属性以描述其类别和样式。起到了类似ECharts theme的效果。
G2
设计了一套规范(Spec) 去描述可以绘制的可视化,使得用户可以通过调用 chart.options(options)
根据指定的满足规范的选项(options) 去渲染图表。
1 | (() => { |
基于底层的 Spec
,为了提供更多样化和灵活地声明图表的能力,G2
也提供了一系列函数式 API 来声明图表,比如声明上面简单的条形图:
1 | (() => { |
本文将探究G2
是如何实现两套语法用于绘制图表的。
首先介绍两个定义:
图表画布:整个用于绘制图表内容的区域,包括图例、轴、以及图表名称。
图表数据映射区域:X
轴与Y
轴框定的,用于将柱子或者折线映射到像素的画布区域。
与ECharts
的Padding
仅解决图元向图表画布映射范围问题不同,G2
的Padding解决的不是图元布局问题而是真正意义上的图表数据映射区域到图表的边界的距离。
我们先来看G2
的解决方案:
G2
当图例、Y轴名称、Y轴标签或其余图元位置或大小发生变化时会挤占图表空间。
优点是:更加智能,且不会产生重叠,用户只需关心一个边距(Padding)的概念即可配置出相对好看的图表,更加易用。
缺点是:当出现极端数据例如10个数量级或者跟大的数值,或者极长的数据项名称时,图表的空间会被过度挤压以至于无法查看。
我们再来看ECharts
的解决方案:
ECharts
当图例、Y轴名称、Y轴标签或其余图元位置或大小发生变化时会不会挤占图表空间,不会更改数据到图表像素映射,如果图例过长一般会发生遮挡,如果轴标签过长则会产生覆盖。
优点:不会破坏图表的布局方式,在图表包含异常值时优先保证图表的正常显示。
缺点:不够智能,具有异常值时会产生遮挡或截断。
本文不讨论这两种实现方案哪种更优,仅尝试从源码的角度分析G2
是如何实现自适应映射范围的。