浏览器绘制图表的 N 种方法 | 可视化

前言

DORAVIS 可视化大屏编辑器，是植根于浏览器的可视化平台。我们不难发现，DORAVIS 的众多图表中，有多种实现方案。如，基于 ECharts 二次开发的 BI 图表，有基于 Mapbox/leaflet 等实现的地理图表，以及根据业务需要制作的基于 Dom 的内容、视频、图片等组件。以 ECharts 为例，我们知道它的底层是基于 zrender 的。因此，ECharts 也可以自由的切换渲染引擎。默认地，ECharts 使用的是 Canvas 作为渲染器。如果你希望看到节点结构，你还可以使用下面的语句，用SVG作为渲染器。

我们把上面的方式总结一下，得到绘制浏览器图表的方式，大概有如下四种：Dom 方式、SVG 方式、Canvas2d 方式以及 WebGL 方式。

本次分享我们抛开具体的图表库，分别用这些方式的原始方案来讲解简单的绘图原理。并分析它们的优势和难点。经过本次分享，你可能在使用封装库时候，会更加了解底层的细节。

DOM 方式

我们认为这就是普通的 HTML+CSS 方式。很多同学可能认为一般 dom 不能做可视化图表。这是一种偏见。可能我们平时用各种 charts 库有关，我们认为 charts 必然和传统的 HTML 有区别。这实际是一种偏见。借用一下可视化大名鼎鼎的 D3.js 的理念。可视化图表，一方面需要解决数据的组织方法，一方面需要解决底层的渲染方式。D3.js 重点关注的是数据的组织形式，而具体的渲染交由具体的渲染底层。那这里面说的dom方式，实际也就是一种渲染底层。

我们来看第一个例子：https://jsbin.com/kexamup/edit?html,css,output

柱形图使用 dom 还是非常容易达成的。而且，使用这种方式，可以比较方便的利用成熟的事件系统进行对交互的控制。比如鼠标事件、tips等等。

不过，用这种方式的缺点也是比较明显的。

1、性能。对于一般的可视化图表，比复杂的网页元素要简单的多。而基于 html 渲染引擎的绘制，还会考虑 html、css 的解析、元素位置的安排，元素变化引起的重排重绘等等。这对于可视化图表来讲，我们对于布局的需求并不复杂，调用这个渲染引擎有些过于铺张，而且大部分的工作对于我们要完成的事情是空耗的性能。

2、dom 对于非矩形元素支持复杂。举例，如果我们需要在图表上表现圆形、椭圆形、直线、不规则多边形等等，传统 dom 实现将变得比较复杂。像饼图、折线图这种，单用 dom 元素模拟就显得比较啰嗦。即便实现起来，也非常不直观。

SVG 方式

SVG是一种以XML语法为基础的图像格式。SVG有如下特点。

1、图片是矢量图（内连位图除外），可缩放不失真。

2