可视化简介

可视化

什么是可视化？

可视化用一句话来说，本质上就是将数据信息组织起来后，以图形的方式呈现出来。在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: 150 px;

height: 100 px;

padding: 10 px;

transform: scaleY( 3 );

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

}

.bargraph div {

margin: 0 2 px;

}

.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: 250 px;

height: 250 px;

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相对更底层，使用起来不如前三种那么直接。

可视化

HTML+CSS

HTML与CSS如何实现可视化？

SVG

Canvas2D

WebGL

相关推荐