可视化简介

可视化

• 什么是可视化？

  可视化用一句话来说，本质上就是将数据信息组织起来后，以图形的方式呈现出来。在web上，图形通常是通过浏览器绘制的。现代浏览器是一个复杂的系统，其中负责绘制图形的部分是渲染引擎。渲染引擎绘制图形的方式，大体上有4种。

  • 第一种是传统的HTML+CSS，呈现普通网页。
  • 第二种是使用SVG。SVG和传统的HTML+CSS的绘图方式差别不大。只不过，HTML元素在绘制矢量图形方面的能力有些不足，而SVG恰好弥补了这方面的缺陷。
  • 第三种是使用Canvas2D。这是浏览器提供的Canvas API中的其中一种上下文，使用它可以非常方便地绘制出基础的几何图形。
  • 第四种是使用WebGL。这是浏览器提供的Canvas API的另一种上下文，它是OpenGL ES规范在Web端的实现。我们可以通过它，利用GPU渲染各种复杂的2D和3D图形。由于WebGL利用了GPU并行 处理的特性，这让它在处理大量数据展示时，性能远远大于前3种绘图方式。因此一些数据量大，视觉效果要求高的特殊场景，使用WebGL渲染是一种比较合适的选择。

HTML+CSS

相较于SVG和Canvas，HTML和CSS用于可视化的较少，但是并不是HTML和CSS不能使用，实际上现代浏览器的HTML和CSS表现能力非常强大，完全可以实现常规的图表展现，比如常见的柱状图/饼图/折线图。

• 使用CSS来实现的好处，既能简化开发，又不需要引入额外的库，可以节省资源，提高网页打开速度。
• 理解CSS的绘图思想对于可视化也是很有帮助的，比如CSS的很多理论就和视觉相关，可视化中都可以拿来借鉴。

HTML与CSS如何实现可视化？

用CSS实现柱状图其实很简单，原理就是使用网格布局加上线性渐变，CSS代码如下。

/**

dataset = {

current: [15, 11, 17, 25, 37],

total: [25, 26, 40, 45, 68],

}

*/

.bargraph {

display: grid;

width: 150px;

height: 100px;

padding: 10px;

transform: scaleY(3);

grid-template-columns: repeat(5, 20%);

}

.bargraph div {

margin: 0 2px;

}

.bargraph div:nth-child(1) {

background: linear-gradient(to bottom, transparent 75%, #37c 0, #37c 85%, #3c7 0);

}

.bargraph div:nth-child(2) {

background: linear-gradient(to bottom, transparent 74%, #37c 0, #37c 89%, #3c7 0);

}

.bargraph div:nth-child(3) {

background: linear-gradient(to bottom, transparent 60%, #37c 0, #37c 83%, #3c7 0);

}

.bargraph div:nth-child(4) {

background: linear-gradient(to bottom, transparent 55%, #37c 0, #37c 75%, #3c7 0);

}

.bargraph div:nth-child(5) {

background: linear-gradient(to bottom, transparent 32%, #37c 0, #37c 63%, #3c7 0);

}

.piegraph {

display: inline-block;

width: 250px;

height: 250px;

border-radius: 50%;

background-image: conic-gradient(#37c 30deg, #3c7 30deg, #3c7 65deg, orange 65deg, orange 110deg, #f73 110deg, #f73 200deg, #ccc 200deg);

}

实际上很多常见的可视化图表都可以用HTML和CSS实现，不需要其他的绘图方式。但是，为什么很少有人这么干呢？因为HTML和CSS绘图有两个缺点。

• 首先，HTML和CSS主要还是为了网页布局而创造的，使用它们虽然能绘制可视化图表，但是绘制的方式并不简洁。这是因为，从CSS代码里，很难看出数据和图形的对应关系，有很多换算也需要开发人员自己来做。这样一来，一旦图表或数据发生改动，就需要我们重新计算，维护很麻烦。
• 其次就是HTML和CSS作为浏览器引擎渲染的一部分，为了完成页面的渲染工作，除了绘制图形外，还要做很多额外的工作。这样会加大浏览器引擎的性能开销。

SVG

SVG是一种基于XML语法的图像格式，可以用图片的src属性加载。而且，浏览器更强大的是，它还可以内嵌SVG标签，并且像操作不同的HTML元素一样，利用DOM API操作SVG元素，甚至，CSS也可以作用于内嵌的SVG元素。

在svg中，g表示分组，rect表示绘制一个矩形元素。除了rect外，SVG提供了丰富的图形元素，可以绘制矩形/圆弧/椭圆/多边形/贝塞尔曲线等等。

SVG绘制图表和HTML和CSS绘制图表的方式差别不大，只不过将HTML标签替换成SVG标签，运用了一些SVG支持的特殊属性。

但是，SVG图表也有缺点，在渲染引擎中，SVG元素和HTML元素一样，在输出图形前都需要经过引擎的解析，布局计算和渲染树生成。而且，一个SVG元素只表示一种基本图形，如果展示的数据很复杂，生成图形的SVG元素就会很多。这样一来，大量的SVG元素会占用很多内存，增加性能开销。所以注定SVG只适合应用于元素较少的简单可视化场景。

Canvas2D

无论是使用HTML/CSS还是SVG，都是属于声明式绘图系统，也就是我们根据数据创建各种不同的图形元素，然后利用浏览器渲染引擎解析它们并且渲染出来，但是Canvas2D 不同，它是浏览器提供的一种可以直接用代码在一块平面的“画布”上绘制图形的API，使用它来绘图更像传统的“编写代码”，简单的来说就是调用绘图指令，然后引擎直接在页面上绘制图形，这是一种指令式的绘图系统。

首先Canvas元素在浏览器上创建一个空白的画布，通过提供渲染上下文，赋予我们绘制内容的能力。然后我们只需要调用渲染上下文，设置各种属性，然后调用绘图完成输出，就能在画布上呈现各种各样的图形了。

总体来说，Canvas能够直接操作绘图上下文，不需要经过HTML和CSS解析，构建渲染树，布局等一系列操作。因此单纯绘图的话，Canvas比HTML/CSS和SVG要快得多。

WebGL

WebGL绘制比前三种方式要更复杂一些，因为WebGL是基于OpenGL ES 规范的浏览器实现的，API相对更底层，使用起来不如前三种那么直接。