数据可视化知识点

数据可视化解决方案

Image text

Skia

Skia 是 Chrome 和 Android 的底层 2D 绘图引擎。Skia 采用 C++ 编程，由于它位于浏览器的更底层，所以我们平常接触较少

OpenGL

OpenGL（Open Graphics Library）是2D、3D图形渲染库，它可以绘制从简单的2D图形到复杂的3D景象。OpenGL 常用于 CAD、VR、数据可视化和游戏等众多领域。

Chrome

Chrome 使用 Skia 作为绘图引擎，向上层开放了 canvas、svg、WebGL、HTML 等绘图能力

canvas

canvas 是 HTML5 的新特性，它允许我们使用 canvas 元素在网页上通过 JavaScript 绘制图像。

示例：

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas</title>
</head>
<body>
  <canvas id="canvas" width="500" height="500"></canvas>
  <script>
    const canvas = document.getElementById('canvas') // 获取dom对象
    const ctx = canvas.getContext('2d') // 获取canvas对象
    ctx.fillStyle = 'red'
    ctx.fillRect(0, 0, 50, 50) // 绘制矩形

    ctx.beginPath() // 开始绘制路径
    ctx.lineWidth = 1 // 线条宽度
    ctx.strokeStyle = 'blue' // 线条填充色
    ctx.moveTo(100, 100) // 起点坐标
    ctx.lineTo(250, 75) // 中间点坐标
    ctx.lineTo(300, 100) // 终点坐标
    ctx.stroke() // 绘制线条

    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'green'; // 圆形边框色
    ctx.fillStyle = 'red'; // 圆形填充色
    ctx.arc(200, 200, 50, 0, 2 * Math.PI); // 绘制圆形
    ctx.stroke(); // 绘制圆形的边框
    ctx.fill(); // 绘制圆形的填充色

    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.strokeStyle = 'red';
    ctx.moveTo(300, 300);
    ctx.lineTo(301, 301); // 绘制一个点
    ctx.stroke();
  </script>
</body>
</html>

总结canvas绘图的流程：

1、编写 canvas 标签（注意指定宽高）

2、获取 canvas DOM 对象

3、获取 Canvas 对象

4、设置绘图属性

5、调用绘图 API

svg

SVG是一种基于 XML 的图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形

示例：

html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<svg width="800" height="800">
  <rect
    width="50"
    height="50"
    style="fill:red;stroke-width:0;stroke:rgb(0,0,0);"
  />
  <line
    x1="100"
    y1="100"
    x2="250"
    y2="75"
    style="stroke:blue;stroke-width:1"
  />
  <line
    x1="250"
    y1="75"
    x2="300"
    y2="100"
    style="stroke:blue;stroke-width:1"
  />
  <circle
    cx="200"
    cy="200"
    r="50"
    stroke="green"
    stroke-width="2"
    fill="red"
  />
  <line
    x1="300"
    y1="300"
    x2="301"
    y2="301"
    style="stroke:red;stroke-width:1"
  />
</svg>
</body>
</html>

总结svg绘图的流程

编写 svg 标签，指定宽高
编写 svg 绘图标签
编写绘图属性和样式

应用场景

绘制icon
绘制动画

viewport、viewBox、preserveAspectRatio

viewport

指svg的可见区域，它的大小可以通过 CSS 或者 HTML 标签属性指定。当SVG渲染时，viewport 就是 SVG 文件外面的那个矩形

viewBox

指SVG内部以坐标系的方式描述的区域，它可以应用在SVG元素中，并会影响当前SVG的坐标系，我们在绘制元素时需要将元素放入一个你定义好的视区中，这就是利用 viewbox 实现的。

示例：

Image text

html

    <svg width="500" height="200" viewBox="0 0 50 20" style="border: 1px solid #000000">
      <rect x="20" y="10" width="10" height="5" style="stroke: #000000; fill:none;"/>
    </svg>

    <svg width="500" height="200" style="border: 1px solid #000000">
      <rect x="200" y="100" width="100" height="50" stroke-width="10" style="stroke: #000000; fill:none;"/>
    </svg>

上面这俩种写法的效果是一样的

分析：

svg显示的时候：

1、先计算可视区域宽高与坐标系viewBox宽高的比例：上面第一个例子里：500与50的比例是10，200与20的比例也是10

2、将展示的图形的坐标和宽高按照第一步计算的比例放大

备注

上面的例子，宽高的比例都是10，在实际项目中，宽高各自的比例是不一样的，这就需要用到preserveAspectRatio

preserveAspectRatio

用于当 viewport 和 viewBox 宽高比不相同时，指定这个坐标系在viewport 中是否完全可见，同时也可以指定它在viewport 坐标系统中的位置

meet: 以宽高小的为比例，保持宽高比显示，并将viewBox缩放为适合viewport的大小(默认参数)

备注

meet 模式下，svg 将优先采纳压缩比较小的作为最终压缩比

示例1

Image text

html

<svg
  width="500"
  height="200"
  viewBox="0 0 200 200"
  style="border: 1px solid #000000"
  preserveAspectRatio="xMidYMid meet"
>
  <rect x="100" y="100" width="100" height="50" stroke-width="10" style="stroke: #000000; fill:none;"/>
</svg>

Image text

分析：

preserveAspectRatio 第一个参数有九个可选值，用来表示视口的对齐方式，以左上角为原点，Min表示靠近原点，Mid表示居中，Max 表示远离原点。

xMinYMin
xMinYMid
xMinYMax
xMidYMin
xMidYMid
xMidYMax
xMaxYMin
xMaxYMid
xMaxYMax

上面的例子里为xMidYMid，表示X和Y轴都是居中

意思是viewBox定义的宽高为200的区域，在宽高为500*200的可视区域的正中，

第二个参数为meet，表示以较小比例作为压缩比，当前例子的宽高压缩比分别为2.5和1，这里选择1，

svg内部定义的图形比例不变，按照定义的在viewBox内显示

示例2

Image text

html

<svg width="500" height="200" viewBox="0 0 200 200" style="border: 1px solid #000000" preserveAspectRatio="xMaxYMin meet">
  <rect x="100" y="100" width="100" height="50" stroke-width="10" style="stroke: #000000; fill:none;"/>
</svg>

Image text

这个例子里，preserveAspectRatio第一个参数为xMaxYMin，表示x轴离原点最远，y轴离原点最近，其他的都和示例1一样

slice: 以宽高大的比例为压缩比，保持宽高比显示，并将所有不在viewport中的viewBox剪裁掉

示例：

Image text

html

<svg width="500" height="200" viewBox="0 0 200 200" style="border: 1px solid #000000" preserveAspectRatio="xMidYMid slice">
  <rect x="100" y="100" width="100" height="50" stroke-width="10" style="stroke: #000000; fill:none;"/>
</svg>

分析：

Image text

1、preserveAspectRatio第二个参数为slice，以宽高大的为比例，即500/200等于2.5对viewBox进行放大2.5倍，宽高变成500；对rect进行放大2.5倍，宽变成250，高变成125展示图形

2、xMidYMid表示viewBox在viewPort的中间，因为x会变成250，Y也变成250，图形会在viewPort里向右向下偏移250

3、slice会将移到viewPort外面的图形裁剪掉，最终展示上面的结果

none: 不保存宽高比。缩放图像适合整个viewbox，可能会发生图像变形

备注

none 模式下，svg 将分别计算 x 和 y 轴的压缩比

示例：

Image text

html

<svg width="500" height="200" viewBox="0 0 200 200" style="border: 1px solid #000000" preserveAspectRatio="none">
  <rect x="100" y="100" width="100" height="50" stroke-width="10" style="stroke: #000000; fill:none;"/>
</svg>

WebGL

WebGL（Web Graphics Library）是一种 3D 绘图协议，WebGL可以为 HTML5 Canvas 提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。

zrender

zrender是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。

示例：

html

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="./zrender.js"></script>
  <title>zrender</title>
</head>
<body>
<div id="container" style="width: 800px;height: 800px;"></div>
<script>
  var zr = zrender.init(document.getElementById('container'));
  var rect = new zrender.Rect({
    shape: {
      x: 0,
      y: 0,
      width: 50,
      height: 50
    },
    style: {
      fill: 'red',
      lineWidth: 0
    }
  });
  var line = new zrender.Polyline({
    shape: {
      points:[
        [100, 100],
        [250, 75],
        [300, 100]
      ]
    },
    style: {
      stroke: 'blue',
      lineWidth: 1
    }
  });
  var circle = new zrender.Circle({
    shape: {
      cx: 200,
      cy: 200,
      r: 50
    },
    style: {
      fill: 'red',
      stroke: 'green',
      lineWidth: 2
    }
  });
  var point = new zrender.Polyline({
    shape: {
      points:[
        [300, 300],
        [301, 301]
      ]
    },
    style: {
      stroke: 'red',
      lineWidth: 1
    }
  });
  zr.add(rect);
  zr.add(line);
  zr.add(circle);
  zr.add(point);
</script>
</body>
</html>

总结zrender绘图的流程:

1、引入 zrender 库

2、编写 div 容器

3、初始化 zrender 对象

4、初始化 zrender 绘图对象

5、调用 zrender add 方法绘图

D3

D3（Data-Driven Documents）是一个 Javascript 图形库，基于 Canvas、Svg 和 HTML。

D3的案例

Three.js

Three.js是一个基于 WebGL 的 Javascript 3D 图形库

Highcharts

[Highcharts}(https://www.highcharts.com.cn/)是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表

Highcharts 系列包含 Highcharts JS，Highstock JS，Highmaps JS 共三款软件，均为纯 JavaScript 编写的 HTML5 图表库

AntV

AntV是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。

AntV 包括以下解决方案：

G2：可视化引擎
G2Plot：图表库
G6：图可视化引擎
Graphin：基于 G6 的图分析组件
F2：移动可视化方案
ChartCube：AntV 图表在线制作
L7：地理空间数据可视化

数据可视化实现方案

上面的数据可视化解决方案罗列了很多，有的是规范，比如WebGl；有的是规范上的实现，比如Three.js就是WevGl的实现。

总结起来就四种：HTML+CSS、SVG、Canvas2D、WebGL

HTML+CSS

HTML+CSS 的优点是方便，不需要第三方依赖，甚至不需要 JavaScript 代码。如果我们要绘制少量常见的图表，可以直接采用 HTML 和 CSS。它的缺点是 CSS 属性不能直观体现数据，绘制起来也相对麻烦，图形复杂会导致 HTML 元素多，而消耗性能。

浏览器的渲染引擎在工作时，要先解析 HTML、SVG、CSS，构建 DOM 树、RenderObject 树和 RenderLayer 树，然后用 HTML（或 SVG）绘图。当图形发生变化时，我们很可能要重新执行全部的工作，这样的性能开销是非常大的。

饼图：

Image text

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .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);}
  </style>
</head>
<body>
<div class="piegraph"></div>
</body>
</html>

SVG

SVG 是对 HTML/CSS 的增强，弥补了 HTML 绘制不规则图形的能力。它通过属性设置图形，可以直观地体现数据，使用起来非常方便。但是 SVG 也有和 HTML/CSS 同样的问题，图形复杂时需要的 SVG 元素太多，也非常消耗性能。

Canvas2D

Canvas2D 是浏览器提供的简便快捷的指令式图形系统，它通过一些简单的指令就能快速绘制出复杂的图形。由于它直接操作绘图上下文，因此没有 HTML/CSS 和 SVG 绘图因为元素多导致消耗性能的问题，性能要比前两者快得多。但是如果要绘制的图形太多，或者处理大量的像素计算时，Canvas2D 依然会遇到性能瓶颈。

备注

现在浏览器的canvas一般有webgl2、webgl和2d三种上下文。它们并不是一个完整的canvas api规范，而是分成了2d规范和webgl规范。webgl规范是opengl es规范在web端的实现，其中webgl2对应opengl es 3.0，而webgl对应的是opengl es 2.0

平时我们开发图表用的canvas主要是指Canvas2D

无论是使用 HTML/CSS 还是 SVG，它们都属于声明式绘图系统，也就是我们根据数据创建各种不同的图形元素（或者 CSS 规则），然后利用浏览器渲染引擎解析它们并渲染出来。

但是 Canvas2D 不同，它是浏览器提供的一种可以直接用代码在一块平面的“画布”上绘制图形的 API，使用它来绘图更像是传统的“编写代码”，简单来说就是调用绘图指令，然后引擎直接在页面上绘制图形。这是一种指令式的绘图系统。

Canvas 和 SVG 的使用也不是非此即彼的，它们可以结合使用。因为 SVG 作为一种图形格式，也可以作为 image 元素绘制到 Canvas 中。

举个例子，我们可以先使用 SVG 生成某些图形，然后用 Canvas 来渲染。这样，我们就既可以享受 SVG 的便利性，又可以享受 Canvas 的高性能了。

WebGL

WebGL 是浏览器提供的功能强大的绘图系统，它使用比较复杂，但是功能强大，能够充分利用 GPU 并行计算的能力，来快速、精准地操作图像的像素，在同一时间完成数十万或数百万次计算。

另外，它还内置了对 3D 物体的投影、深度检测等处理，这让它更适合绘制 3D 场景。

技术选型

ECharts VS Highcharts

Highcharts 和 ECharts 的争论非常多，整体来说：

Highcharts 能够兼容 IE6+，ECharts 通过 VML 兼容低端浏览器
Highcharts 文档体验略胜一筹
Highcharts 收费，这是很多开发者转向 ECharts 的主要原因
Highcharts 基于 svg 实现，ECharts 默认采用 canvas 渲染，4.0 支持 svg 渲染
ECharts 国内知名度更高，国内企业认可度更高

ECharts VS AntV

AntV 文档阅读体验更符合互联网产品使用习惯
AntV 产品体系拆分更加清晰，但一定程度上提升了学习成本
ECharts 社区更强大
ECharts 使用更加广泛

参考文章

跟月影学可视化

数据可视化知识点 ​

相关实现方案 ​

数据可视化解决方案 ​

Skia ​

OpenGL ​

Chrome ​

canvas ​

svg ​

总结svg绘图的流程 ​

应用场景 ​

viewport、viewBox、preserveAspectRatio ​

WebGL ​

zrender ​

D3 ​

Three.js ​

Highcharts ​

AntV ​

数据可视化实现方案 ​

HTML+CSS ​

SVG ​

Canvas2D ​

WebGL ​

技术选型 ​

ECharts VS Highcharts ​

ECharts VS AntV ​

参考文章 ​

数据可视化知识点

相关实现方案

数据可视化解决方案

Skia

OpenGL

Chrome

canvas

svg

总结svg绘图的流程

应用场景

viewport、viewBox、preserveAspectRatio

WebGL

zrender

D3

Three.js

Highcharts

AntV

数据可视化实现方案

HTML+CSS

SVG

Canvas2D

WebGL

技术选型

ECharts VS Highcharts

ECharts VS AntV

参考文章