浏览器中实现可视化的四种方式
1. HTML+CSS
用来呈现普通的 Web 网页。
// CSS柱状图
网格布局（Grid Layout）+ 线性渐变（Linear-gradient）
// CSS饼图
圆锥渐变
// CSS折线图
1. 用高度很小的div元素模拟线段
2. 用transform改变角度和位置
3. 用clip-path对不规则图形填色或描边
缺点
从 CSS代码里很难看出数据与图形的对应关系，需要开发自己换算。一旦图表或数据发生改动，需要重新计算，不便于维护。
2. SVG
Scalable Vector Graphics可缩放矢量图。是一种基于XML语法得图像格式，可以用图片（img元素）的src属性加载。
// 矩形
// 圆弧
// 椭圆
// 多边形
// 贝塞尔曲线
优点 元素的属性和数值可以直接对应起来。
缺点 只适合应用于元素较少的简单可视化场景。
一个
SVG元素只表示一种基本图形。如果是复杂数据的展示，生成图形的SVG元素会很多，会占用很多内存空间，引擎、布局计算和渲染树生成的开销会增加，影响性能。
3. Canvas2D
浏览器提供的
Canvas API中的一种上下文。
方便绘制基础的几何图形。
// 指令式绘图系统：调用绘图指令，然后引擎直接在页面上绘制图形。
1. 在浏览器上创造一个空白的画布，提供渲染上下文，赋予绘制内容的能力。
2. 调用渲染上下文，设置各种属性，然后调用绘图指令完成输出即可。
优点 不需要经过 HTML，CSS解析、构建渲染树、布局等一系列操作，单纯绘图要快很多。
缺点 需要通数学计算来定位获取局部图形，交互不便利。
4. WebGL
浏览器提供的
Canvas API中的另一种上下文，是OpenGL ES规范在Web端的实现。
利用 GPU 并行处理的特性渲染各种复杂的 2D 和 3D 图形。
- 绘制的图形数量非常多；
- 对较大图像的细节做像素处理；
- 绘制
3D物体。
5. 图形系统与浏览器渲染引擎工作对比
HTML 和 CSS 作为浏览器渲染引擎的一部分，要先解析HTML、SVG、CSS，构建 DOM树、RenderObject树、RenderLayer树，然后用 HTML 或 SVG 绘图。当图形发生变化时，很可能要重新执行全部工作，性能开销很大。
相比于 HTML 和 CSS，Canvas2D 和 WebGL 更适合去做可视化这一领域的绘图工作：它们的绘图 API 能够直接操作绘图上下文，一般不涉及引擎的其他部分，在重绘图像时也不会发生重新解析文档和构建结构的过程，性能开销小很多。
