前端数据可视化

[junhey]

最近我们前端组需要做场景化的探索，所以这里就搜索了一些资料先了解前端可视化。

---

数据可视化的过程分为七个步骤：获取、分析、过滤、挖掘、表现、改善、交互。

前面4步分别属于数据采集、数据分析、数据处理和数据挖掘领域，数据可视化的处理范围主要是后面三步。

目前市面上可视化的插件主要有以下：

echarts http://echarts.baidu.com/ 底层基于canvas

highcharts https://www.hcharts.cn/ 底层基于svg，老牌图表库，商业用途需购买版权

D3.js https://d3js.org/ v3 svg v4 svg+canvas 可自由设计图表，适合展示丰富多样的图表样式

---

下面从兼容性、是否开源、难易程度三方面简单介绍下。

1、兼容性

使用每个插件之前必须考虑它的兼容性问题，否则项目完成后发现部分浏览器不能用就需要重新选型或解决兼容性问题，事倍功半，得不偿失！

• Highcharts 兼容 IE6 及以上的所有主流浏览器，完美支持移动端缩放、手势操作。
• Echarts 兼容 IE6 及以上的所有主流浏览器，同样支持移动端的缩放和手势操作。
• D3 兼容IE9 及以上的所有主流浏览器，对于移动端的兼容性也同上。

目前这几种插件基本满足兼容性要求。

2、是否开源

• Highcharts 非商业免费，商业需授权，代码开源。
• Echarts 完全免费，代码开源。
• D3 完全免费，代码开源。

由于本项目是后台管理系统做数据可视化，不涉及商业用途，所有就是否开源方面选择哪个框架意义不大。

3. 难易程度

• Highcharts 基于SVG，方便自己定制，但图表类型有限。
• Echarts 基于Canvas，适用于数据量比较大的情况。
• D3 v3 基于SVG，方便自己定制；D3 v4支持Canvas+SVG，如果计算比较密集，也可以选择用Canvas。

除此之外，D3图表类型非常丰富，几乎可以满足所有开发需求，但代码相对于以上两个插件来说，会稍微难一点。

简单的介绍下D3的使用，d3中操作图表的常见流程：

1. 选择元素标签
2. 绑定数据
3. 执行enter()过程
4. 增加元素标签
5. 执行后续操作

比如我们要画以上的饼图，其代码如下：

/* 目标元素 */
<div id="chart">
</div>
/* 引入d3库 */
<script src="d3/d3.js"></script>
<script>
        /* 定义四个类别，每个类别中有不同数目的样本 */
	var dataset = [{
			label: "A",
			count: 10
		},
		{
			label: "B",
			count: 20
		},
		{
			label: "C",
			count: 30
		},
		{
			label: "D",
			count: 40
		}
	];
	/* 定义几个常量，主要是绘制时使用 */
	var width = 360;
	var height = 360;
	var radius = Math.min(width, height) / 2;
	var color = d3.scaleOrdinal(d3.schemeCategory20);
	/* 选择元素标签 d3提供了两种select方法，select()和selectAll()，前面一种方法返回匹配这个选择器的第一个元素，后面一种方法返回匹配这个选择器的所有元素，前面加#代表了选择ID，加.代表了选择类。*/
	var svg = d3.select("#chart")
				.append('svg')
				.attr('width',width)
				.attr('height',height)
				.append('g')
				.attr('transform', 'translate(' + (width / 2) +  ',' + (height / 2) + ')');
	/* 定义了d3中的两个图形，圆形arc()，饼图pie() 其中innerRadius()和outerRadius()设置了圆环的内径和外径*/	
        var arc = d3.arc()
  				.innerRadius(0)
  				.outerRadius(radius);
  	var pie = d3.pie()
  				.value(function(d) { return d.count; })
  				.sort(null);
	/***
	下面这段是D3的核心，主要做了下面几件事，按行来讲解：
	1. 选择了SVG中的所有<path>标签，但是我们之前并没有在<svg>区域中设置<path>标签，所以将返回一个空值，但是随后将通过enter()创建这些<path>
	2. 我们将数据通过data()函数绑定到<path>上，这里涉及到D3的数据绑定机制，有datum()和data()两种方法，前者将被选中的所有对象都绑定同一个值，后者则按照被选中对象与data()中参数数据的数量对比进行不同处理：如果两者相等，直接执行后面的语句，也称作update()；如果元素不够，比如现在的情况，将一直增加元素到与数据匹配为止，也称作enter()，每次enter增加一个标签然后执行update()的操作，所以在我们的例子中，将执行四次enter()，如果元素多余，则删除元素，也叫exit().
	3. 每次enter()会执行append('path')也就是增加一个<path>标签
	4. 然后增加一个path的属性d，这是SVG作图中一个相当复杂的属性，包含了许多svg的移动划线等操作，其属性值为d3的arc()函数所返回的path data.
	5. 然后每次enter()的过程fill一个不同的颜色，这个function(d,i)可能有些费解，这是由d3.js提供的变量，分别代表了数值和数值的索引。
	*/			
  	var path = svg.selectAll('path')
  				.data(pie(dataset))
  				.enter()
  				.append('path')
  				.attr('d',arc)
  				.attr('fill',function(d,i){
  					return color(d.data.label);
  				})
  				
</script>

总结

Echarts是国内做的最好的图表库，有多样的图表类型，色彩丰富，交互友好，易上手；
Highcharts作为老牌图表库，国外开源项目，技术相对成熟，代码有社区人员维护，如果项目中对图表样式和展现效果没有严格要求，可以考虑用以上两种。
D3官网有很多酷炫的案例，多样的图表设计和丰富的展示效果深深吸引着我，所以项目做对后台数据可视化处理建议选择D3.js作为开发工具。