数据可视化实践

数据可视化的目的是直观地可视化数据. 例如，需要花费数小时或更长时间才能汇总的数据量可以转换为可以一目了然的索引；它是通过加，减，乘，除以及各种公式来计算的. 两组数据之间的差异可以通过图中的颜色敏感度，长度和大小来对比. 数据可视化是传达复杂信息的强大武器. 通过可视化信息，我们的大脑可以更好地捕获和保存有效信息，并增加信息的印象. 但是，如果数据可视化能力较弱，则会带来负面影响；错误的表达方式经常会破坏数据传输，完全误解和误导用户，因此我们需要在多个维度上显示数据，而不仅仅是单个级别，

当前有多种第三方库可以实现数据可视化: Highcharts，Echarts，Chart.js，D3.js等.

通常，当前的第三方库基于以下两种浏览器图形渲染技术: Canvas和SVG. canvas和webGL都是基于openGL打包的. 但是，由于webGL更接近openGL数据可视化效果图，因此它的学习曲线更陡峭. 在这里，我们将解释Canvas和SVG.

以下是两种图形渲染技术的比较

SVGCanvas

不取决于分辨率

取决于分辨率

支持事件处理程序

不支持事件处理程序

最适合具有较大渲染区域的应用程序

文本呈现能力弱

高复杂度会降低渲染速度（任何过度使用DOM的应用程序都不会很快）

能够将生成的图像保存为.png或.jpg格式

不适用于游戏应用

最适合图形密集型游戏

JavaScript事件处理程序可以附加到元素上. 在SVG中，每个绘制的图形都被视为一个对象.

一旦绘制了图形，它将不会继续引起浏览器的注意. 如果其位置发生变化，则需要重新绘制整个场景.

是百度的开源数据可视化工具，这是一个纯Javascript图表库，可以在PC和移动设备上流畅运行，与大多数当前的浏览器（IE6 / 7/8/9/10/11，Chrome，firefox， Safari等），底层依赖于轻量级的Canvas库ZRender，ECharts提供直观，生动，交互式和高度个性化的数据可视化图表. 这是一种简单的使用方法:

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的类，它将负责该底层的绘制指令. 根据不同的渲染器，底层执行不同的实现.

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

无法将事件绑定到画布中的某个元素，因此必须将事件绑定到整个图表容器. 执行事件处理时，首先确定鼠标是否在图形内. 由于图形是旋转和缩放的，因此需要将鼠标坐标切换到图形坐标系. 获取图形坐标系后，可以了解鼠标与图形之间的关系，并可以进行相应的事件处理.

在渲染过程中更改画布后，画布会完全重绘，但是它非常有效. 对于SVG，如果有一千个散点图，则DOM具有一千个节点. 如果需要每帧删除和添加DOM元素，效率会很低. 这是虚拟Dom方法. 通过维护渲染对象列表，每个帧都将前一帧的新渲染对象列表与之进行比较，以获得新的，修改的和删除的渲染对象的列表. 相关节点已调整.

基于两种实现，一种画布和一种svg.

这里实现了一个简单的库数据可视化效果图，可以绘制直方图，饼图，折线图，雷达图.

这里是使用方法:

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 canvas对象，data是我们传递的数据对象，settings是传递的配置，您可以定义图形的类型，可以是直方图，也可以是线图表. 在此，根据输入类型进行相应的图形更改. 内部实现原理如下:

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

以上部分允许输入的参数覆盖现有的默认设置，颜色和坐标. 需要通过计算获得一些设置，例如，每个单位长度的标签，以获取每个值的比例. 例如:

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

首先计算总数，然后在绘制饼图时计算每条数据的比例.

以下部分将根据传入的类型绘制不同的图形. 具体实现如下:

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();
  }

前三个功能用于基本结构，轴，点和标题. 第四个功能用于绘制图形. 主要方法是画布. FillStyle: 设置填充绘画的颜色，渐变或模式； strokeStyle: 设置笔触的颜色，渐变或模型； beginPath: 启动路径或重置当前路径； arc: 用于创建圆弧/曲线的圆弧（x，y，r，startAngle，endAngle，方向）x，y分别代表圆心的x，y坐标. startAngle是起始角度，endAngle是终止角度，方向表示顺时针或逆时针绘制. 首先，根据数据的长度，确定每条数据的长度和坐标，然后使用以下操作进行绘制.

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

通过这种方式可以绘制图形

SVG是一种使用XML描述2D图形的语言. SVG基于XML，这意味着SVG DOM的每个元素都可用. 您可以将javaScript事件处理程序附加到每个元素.

Svg与画布不同，并且提供许多基本形状. 例如，rect: circle;圆圈: 椭圆；椭圆: 直线；线: 折线；折线: 多边形；多边形: 路径.

在这里，我们使用通用模块下的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的绘制方法. 与画布绘画相比，svg提供了更好的基本绘画组件，因为它提供了更好的绘画，但是每种都有自己的优势

.

如果我们需要制作更好的图形库，则需要使用绘图引擎，以便能够在多个平台上使用不同的渲染方法.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-185754-1.html