数据可视化实践

时间 2019-11-16

标签数据可视化实践繁體版

原文原文链接

数据可视化的目的其实就是直观地展示数据，例如让花费数小时甚至更久才能概括的数据量，转化成一眼就能读懂的指标；经过加减乘除、各种公式权衡计算获得的两组数据差别，在图中颜色敏感、长短大小即能造成对比；数据可视化是一个沟通复杂信息的强大武器。经过可视化信息，咱们的大脑可以更好地抓取和保存有效信息，增长信息的印象。但若是数据可视化作的较弱，反而会带来负面效果；错误的表达每每会损害数据的传播，彻底曲解和误导用户，因此更须要咱们多维的展示数据，就不只仅是单一层面，目前有多种第三方库来实现数据的可视化：Highcharts, Echarts, Chart.js, D3.js等。
总的来讲，如今的第三方库都是基于这两种浏览器图形渲染技术实现的：Canvas和SVG。canvas和webGL都是基于openGL来进行封装。可是webGL因为更贴近openGL因此学习曲线较陡，这里就讲解Canvas和SVG两种。下面是两种图形渲染技术的对比javascript

SVG	Canvas
不依赖分辨率	依赖分辨率
支持事件处理器	不支持事件处理器
最适合带有大型渲染区域的应用程序	弱的文本渲染能力
复杂度高会减慢渲染速度(任何过分使用 DOM 的应用都不快)	可以以 .png 或 .jpg 格式保存结果图像
不适合游戏应用	最适合图图像密集型的游戏
能够为某个元素附加 JavaScript 事件处理器。在 SVG 中，每一个被绘制的图形均被视为对象。	一旦图形被绘制完成，它就不会继续获得浏览器的关注。若是其位置发生变化，那么整个场景都须要从新绘制。

Echarts

是百度的一个开源的数据可视化工具，一个纯 Javascript 的图表库，可以在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的 Canvas 库 ZRender，ECharts 提供直观，生动，可交互，可高度个性化定制的数据可视化图表。下面是简单的使用方法：css

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};
复制代码

如何支持多种渲染方式

echarts支持svg、canvas、vml等底层技术 echarts会根据具体的渲染平台去作不一样的渲染实现，底层是一个叫路径代理PathProxy的类，它会负责这个底层的绘制指令。根据不一样的渲染器，底层进行不一样的实现。html

const rect = new zrender.Rect({
  shape: {
    x: 10,
    y: 10,
    width: 80,
    height: 80
  }
});
复制代码

如何支持事件处理

在canvas不可以为某个元素绑定事件，因此采用给整个图表容器绑定事件。当进行事件处理的时候，先判断鼠标是否在图形之内。由于图形通过旋转和缩放，因此须要将鼠标坐标切换到图形坐标系。获取到图形坐标系之后，就能够知道鼠标和图形之间的关系，就能够进行相应的事件处理。java

SVG渲染如何部分更新

在渲染的时候canvas一旦改变就彻底重绘，可是效率很高。对于SVG而言，假如说散点图有一千个，那么DOM就有一千个节点。若是每一帧都须要把DOM元素进行删除而后添加，效率是很是低的。因此这里但是使用virtual-Dom的方法，经过维护一个渲染对象列表，每帧将新的渲染对象列表与上一帧的进行diff，得到新增、修改、删除的渲染对象列表，在根据列表对DOM相关节点进行调整。web

数据可视化的具体实现

这里基于两种实现方式，一种canvas一种svg。chrome

Canvas

在这里实现了一个简单的库，能够绘制柱状图、饼状图、折线图、雷达图。下面是使用方法：canvas

const canvas = document.getElementById('canvas');
const data = [{
	name: '篮球',
	value: 2260,
},
{
	name: '羽毛球',
	value: 1170,
},
{
	name: '乒乓球',
	value: 1230,
},
{
	name: '足球',
	value: 1450,
},
];
const settings = {
	type: 'bar'
};
new Chart(canvas, data, {
	title: 'Sport'
}, settings);
复制代码

下面是效果图浏览器

构造函数能够传入的参数有四个，canvas画布对象，data是咱们传入的数据对象，settings是传入的配置，就能够定义图形的类型，能够是柱状图，或者折线图。在这里根据传入的type进行相应的绘图更改。内部的实现原理以下：

if (settings) {
  Object.keys(settings).map((key) => {
    this[key] = settings[key];
  });
}
复制代码

上面这个部分就可以让传入的参数覆盖已有的默认设置，颜色，坐标。有些设置须要经过计算才能得到，例如每一个单位长度的标记，获取每一个值的比例。例如：app

this.totalValue = this.getTotalValue();
this.maxValue = this.getMaxValue();
function getTotalValue() {
  let total = 0;
  this.data.map((item) => {
    total += item.value;
  });
  return total;
}
复制代码

这里先计算出总数，而后绘制饼状图的时候就计算出每一条数据所占的比例，进行绘图。下面这部分会根据传入的type来绘制不一样的图形，下面是具体实现：echarts

if (this.type === 'bar' || this.type === 'line') {
  this.drawBarUpdate();
} else if (this.type === 'pie' || this.type === 'ring') {
  this.drawPieUpdate();
} else if (this.type === 'radar') {
  this.drawRadarUpdate();
}
复制代码

看draBarUpdate的具体实现:

drawBarUpdate() {
    this.drawAxis();
    this.drawPoint();
    this.drawTitle();
    this.drawBarChart();
  }
复制代码

前三个函数用于基本的结构，轴、点、标题。第四个函数用来绘制图形。主要借助的是canvas的几种方法fillStyle：设置填充绘画的颜色、渐变或模式；strokeStyle: 设置笔触的颜色、渐变或模型；beginPath：开始一条路径，或者重置当前的路径；arc: 用来建立弧/曲线arc(x, y, r, startAngle, endAngle, direction)x，y分别表明圆中心的x，y坐标。startAngle为起始角，endAngle为结束角，direction表明顺时针，仍是逆时针绘图。首先根据数据的长度，肯定每条数据的长度和坐标而后使用下面操做进行绘图。

this.ctx.beginPath();
this.ctx.arc(x, y, radius, startAngle, endAngle, direction);
this.ctx.fill();
复制代码

这样就能够绘制图形了

SVG

SVG是一种使用XML描述2D图形的语言。SVG基于XML，这意味着SVG DOM的每一个元素都是可用的。你能够为每一个元素附加javaScript事件处理器。 svg不一样于canvas，提供了不少基本形状。例如rect: 圆；circle: 椭圆；ellipse：直线；line: 折线；polyline：多边形；polygon：路径。这里借助common模块下的pie.js进行了解。下面是使用方法：

var myPie = new Pie({
  pieR: 40, // 外径
  donutR: 35, // 内径
  rotation: -90, // 旋转到从y轴正方向起始
  strokeColor: '#FFF', // 使用白色描边
  animation: true, // 启用默认展示动画
  slices: [{
    color: '#E3E3E3', // 第一切片颜色
    percent: 0.1 // 第一切片面积占比
  }, {
    color: '#5FC2F5', // 第二切片颜色
    percent: 0.2 // 第二切片面积占比
  }, {
    percent: 0.3 // 第三切片面积占比
  }, {
    percent: 0.4 // 第四切片面积占比
  }]
});

$('body').append(myPie.getNode()); // 插入饼图。
复制代码

下面是效果图

首先也是进行重置默认的参数设置，还有计算一些属性，例

this.args = $.extend({
  pieR: 100,
  slices: [{
    percent: 1,
  }],
}, args);
$.each(this.args.slices, function(i, item) {
  item.angle = (item.percent || 0) * 360;
})
复制代码

而后设置每一个元素应该设置的路径，是经过下面函数进行实现：

/** * @param {Number} startAngle 开始的角度 * @param {Number} angle 旋转角度 * @param {Number} pieR 半径 * @param {Number} donutR 环形图所须要的参数 * @return {Object} 坐标对象 */
getSectorPath(startAngle, angle, pieR, donutR) {
  startAngle = startAngle * Math.PI / 180;
  angle = angle * Math.PI / 180;

  var startAngleTri = {
    cos: Math.cos(startAngle),
    sin: Math.sin(startAngle)
  };

  var angleTri = {
    cos: Math.cos(startAngle + angle),
    sin: Math.sin(startAngle + angle)
  };

  return [
    'M', donutR * startAngleTri.cos, donutR * startAngleTri.sin, // 开始点
    'L', pieR * startAngleTri.cos, pieR * startAngleTri.sin, // 开始的边界
    'A', pieR, pieR, // 外部的半径
    0, // x轴上的旋转
    Math.abs(angle) > Math.PI ? 1 : 0, // large-arc-flag
    1, // sweep-flag
    pieR * angleTri.cos, pieR * angleTri.sin, // end point
    'L', donutR * angleTri.cos, donutR * angleTri.sin, // end edge
    'A', donutR, donutR, // inner arc
    0, // x轴上的旋转
    Math.abs(angle) > Math.PI ? 1 : 0, // large-arc-flag
    0, // sweep-flag
    donutR * startAngleTri.cos, donutR * startAngleTri.sin // 结束点
  ].join(' ');
}
复制代码

绘制图形是靠的path这个元素，下面的命令能够用于路径数据:

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
复制代码

简便写就能够以下：

<path d="M250 150 L150 350 L350 350 Z" />
复制代码

那么绘制饼状图的就能够以下这么写：

$(path).attr({
  'd': getSectorPath(startAngle, angle, pieR, donutR)
}).css({
  // 属性
})
复制代码

这就是svg的绘画方式，相对canvas绘画，svg由于提供了一些基本的图形组件因此更好画，可是各有优势。若是须要制做更好的图形库，咱们就须要借助绘图引擎，就可以针对多种平台使用不一样的渲染方式。