超图数据可视化技术

一、数据可视化

1数据可视化概述

数据可视化Data Visualization:就是指将结构或非结构数据转换成适当的可视化图表，然后将隐藏在数据中的信息直接展现于人们面前。

2应用场景

数据报表 特效制作 游戏开发 大屏展示

大屏展示目前在web前端开发中占比比较多，使用场景如下：

(1)媒体大屏 适合展会、媒体访问等公众场合，是企业形象、品牌展示的窗口； (2)接待大屏 适用企业内部宣传专区，用于接待来访领导、客户或投资。 (3)监控大屏 针对企业运营或运维监控需求，比较适用内部指挥监控等； (4)科技大屏 滴滴出行大数据、天猫双十一交易数据、茅台数博会大屏等;

3数据可视化工具

3.1绘图容器(画布)

canvas svg

3.2绘图工具（插件）

echarts highcharts charts d3 ucharts

4工具的区别

1.Canvas和SVG的区别   Canvas：       (1)依赖分辨率,都是标量图形       (2)不支持事件处理器(不能绑定事件)       (3)弱的文本渲染能力，适合游戏开发（微信小游戏）       (4)能够以 .png 或 .jpg 格式保存结果图像   SVG：       (1)不依赖分辨率，矢量图形       (2)支持事件处理器       (3)最适合带有大型渲染区域的应用程序（比如谷歌地图）       (4)不适合游戏应用 2.Echarts.js、D3.js、Highcharts.js的区别   Echarts.js：   百度商业前端数据可视化团队研发的图表库,免费开源，国内用户偏多。可以使用canvas和svg绘制图形   Highcharts.js：   highcharts是国外的一家公司开发的图表库，主要采用svg画图。   D3.js：   D3通过svg来绘制图形，偏底层，太底层，学习成本大。   总结：     Echarts类似于中国的WPS,而HightCharts类似于微软的office，D3更适合交互类图表。

二、认识Canvas

1Canvas概述

Canvas标签用于绘制图形的 HTML 元素,canvas元素本身并没有绘制能力,它仅仅是图形的容器,通常通过JavaScript脚本进行绘制。canvas最早由Apple引入WebKit，用于MacOSX的Dashboard，随后被各个浏览器实现。如今，所有主流的浏览器都支持它。

2应用场景

适合游戏应用

微信小游戏

数据可视化图形

各种图表

h5端特效

3canvas标签

1.画布大小

canvas默认大小是300(宽)*150（高），单位是px;不要使用style样式的方式设置其大小否则会导致变化内部图形变形，使用起内部的width和height属性来设置其大小；canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。

2.画布坐标

栅格的起点为左上角[坐标为(0,0)]所有元素的位置都相对于原点定位。

4canvas上下文对象

因为canvas本身不具备绘图能力，所以需要其内部的2d画笔对象来完成图形绘制，也就是canvas上下文对象，后面我们可以称其为画笔；

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

5浏览器支持性

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。 注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。

6canvas兼容性处理

1.检查文本替换

<canvas id="canvas" width="500" height="500">暂不支持请更换浏览器!</canvas>

2.检查编程支持性

if(canvas.getContext){
        // 获取canvas上下文对象（画笔）
        let ctx = canvas.getContext('2d');
        // console.log(ctx);
 }else{
        alert('暂不支持请更换浏览器')
}

三、绘制线段

1.线条相关属性及方法

moveTo(x,y)   把路径移动到画布中的指定点，不创建线条。 lineTo(x,y)     添加一个新点,绘制一条从当前位置到指定新点(x,y)位置的直线。 strokeStyle   设置或返回描边颜色 fillStyle       设置或返回填充颜色 stroke()       描边已定义绘图（路径） fill()         填充当前绘图（路径） lineWidth     设置或返回当前的线条宽度 lineJoin设置或返回两条线相交时，所创建的拐角类型 //bevel:创建斜角   round:创建圆角。 lineCap设置或返回线条的结束端点样式 //round：添加圆角   square:添加矩形 butt:默认

// 1.绘制一条直线
            // ctx.moveTo(20,20);//设置起点
            // ctx.lineTo(490,20);//设置下一个点并且连接上一个点
            // ctx.lineWidth=20;//设置线段的宽度
            // ctx.strokeStyle='red';//设置描边颜色
            // ctx.lineCap='square';//设置线段两侧风格
            // ctx.stroke();//设置描边
            // ctx.fill();//填充线段（没有填充）
            
            
            // 2.绘制两条垂直相交线段
            // ctx.moveTo(20,20);
            // ctx.lineTo(200,20);
            // ctx.lineTo(200,200);
            // ctx.lineWidth=20;
            // ctx.lineJoin='round';//设置拐进类型
            // ctx.stroke();
            
            
            // 3.绘制描边矩形
            // ctx.moveTo(20,20);
            // ctx.lineTo(200,20);
            // ctx.lineTo(200,200);
            // ctx.lineTo(20,200);
            // ctx.lineTo(20,20);
            // ctx.stroke();
            
            // 4.绘制填充矩形
            // ctx.moveTo(20,20);
            // ctx.lineTo(200,20);
            // ctx.lineTo(200,200);
            // ctx.lineTo(20,200);
            // ctx.fillStyle='red';//设置填充颜色
            // ctx.fill();//设置填充
            // ctx.strokeStyle='green';
            // ctx.lineWidth=10;
            // ctx.stroke();

2.绘制路径

beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成新路径。可以防止后面绘制的图形样式作用域前面已经绘制的图形。如果不使用此方法，那么绘制的所有图形都将在一条路径上。 closePath() 作用是闭合路径，将当前路径上的起点和结束位置进行闭合连接，一般用于闭合多边形，不是结束路径，不是必需的，和beginpath()没有任何关系；

// ctx.moveTo(20,20);
            // ctx.lineTo(200,20);
            // ctx.lineWidth=10;
            // ctx.stroke();
            
            // ctx.beginPath();//开启新的路径
            // ctx.moveTo(20,50);
            // ctx.lineTo(200,50);
            // ctx.lineWidth=1;
            // ctx.strokeStyle='red';
            // ctx.stroke();    
            
            
            // ctx.moveTo(20,20);
            // ctx.lineTo(200,20);
            // ctx.lineTo(200,200);
            // ctx.lineTo(20,200);
            // ctx.lineTo(20,20);
            // ctx.closePath();//闭合路径（将起点和重点连接闭合）
            // ctx.stroke();

四、绘制图形

1绘制矩形

1.线段绘制 2.rect()方法 3.fillRect()直接填充绘制方法 4.strokeRect()直接描边绘制方法 5.clearRect()清除矩形大小

// 1.线段绘制法
            // 2.rect()方法
            // ctx.rect(100,100,100,100);//设置矩形的坐标和大小
            // ctx.fill();
            // ctx.strokeStyle='red';
            // ctx.stroke();
            
            // 3.fillRect()直接填充绘制方法
            // ctx.fillStyle='red';
            // ctx.fillRect(100,100,200,200);
            
            
            // 4.strokeRect()直接描边绘制方法
            // ctx.lineWidth=10;
            // ctx.strokeStyle='red';
            // ctx.strokeRect(100,100,200,200)
            
            
            // 5.clearRect()清除矩形大小
            // ctx.fillRect(100,100,200,200);
            // ctx.clearRect(120,120,50,50);//擦除矩形大小空间
            // ctx.clearRect(0,0,500,500);//擦除整个画布空间大小

2绘制圆形

 

ctx.arc(x,y,r,startAng,endAng,bool(默认是false:顺时针))

代码实例

// ctx.arc(x,y,r,startAng（开始弧度）,endAng（重点弧度）,bool(默认是false:顺时针))
            
            // Math.PI == π == 180度对应的弧度 == 3.14
            // console.log(Math.PI);
            // 0  0
            // 90 Math.PI/2
            // 180 Math.PI
            // 270 Math.PI*1.5
            // 360 Math.PI * 2
            // 每一度对应的弧度：Math.PI/180 
            
            // 1.绘制一个整圆
            // ctx.arc(250,250,200,0,Math.PI*2);
            // ctx.stroke();
            
            // 2.绘制右半圆（顺时针）
            // ctx.arc(250,250,200,Math.PI*1.5,Math.PI*0.5);
            // ctx.closePath();//闭合路径（起点和终点弧度）
            // ctx.stroke();
            
            // 3.绘制左半圆（逆时针）
            // ctx.arc(250,250,200,Math.PI*1.5,Math.PI*0.5,true);
            // ctx.closePath();//闭合路径（起点和终点弧度）
            // ctx.stroke();
            
            // 4.绘制右侧1/4扇形（顺时针）
            // ctx.moveTo(250,250);//设置起点（圆的圆形坐标点）
            // ctx.arc(250,250,200,0,Math.PI*0.5);
            // ctx.closePath();//闭合路径（起点和终点弧度）
            // ctx.stroke();

五、绘制太极图

六、绘制文本

1.fillText() 填充文本 2.strokeText() 描边文本 3.ctx.textAlign 水平对齐 left center right 4.ctx.textBaseline 垂直基线对齐 middle top bottom

实例代码

// 绘制一条水平参考线
            // ctx.moveTo(100,100)
            // ctx.lineTo(400,100)
            // ctx.stroke();
            
            // 1.填充文本
            // ctx.font='50px 黑体';//设置字体大小和类型
            // ctx.textAlign='left';//水平对齐
            // ctx.textBaseline='middle';//设置垂直对齐
            // ctx.fillStyle='red';
            // ctx.fillText('hello',100,100)//设置填充内容和坐标
            
            // 2.填充文本
            // ctx.font='50px 黑体';//设置字体大小和类型
            // ctx.textAlign='left';//水平对齐
            // ctx.textBaseline='middle';//设置垂直对齐
            // ctx.strokeStyle='green';
            // ctx.strokeText('world',300,100)//设置填充内容和坐标

七、绘制图像

drawImage() 方法在画布上绘制图像； 三个参数： context.drawImage(img,x,y); 五个参数： context.drawImage(img,x,y,width,height); 九个参数： context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

实例代码

// ctx.drawImage() 方法在画布上绘制图像；
            // 获取图片对象
            // let img = new Image();
            // // 赋值图片资源路径
            // img.src='./分帧/fz.jpg';
            // // 将图片绘制到画布上(当图片资源加载成功后)
            // img.οnlοad=()=>{
            //  ctx.drawImage(img,50,100,400,200);
            // };
            
            // 模拟分帧动画
            // let img = new Image();
            // let index = 1;
            // setInterval(()=>{
            //  img.src='./分帧/fz'+index+'.png';
            //  index++;
            //  if(index >6)index=1;
            //  img.οnlοad=()=>{
            //      ctx.drawImage(img,50,100,400,200);
            //  }
            // },50)

八、渐变

1渐变概述

渐变是一种有规律性的变化,渐变色是指某个物体的颜色从明到暗,或由深转浅,或是从一个色彩缓慢过渡到另一个色彩。 渐变需要两种以上颜色

2渐变的使用场景

处理图表、处理文字、处理图片、用做背景；

3线性渐变

createLinearGradient线性渐变。 1.获取线性渐变对象 let linear = cxt.createLinearGradient(x1,y1,x2,y2)   线性渐变开始位置： x1,y1 结束位置：x2,y2，渐变位置坐标点相对于画布而言的         2.创建渐变颜色 addColorStop(0-1,'css') 第一个参数：渐变的开始位置 ，表示渐变的开始点和结束点之间的一部分。offset 为 0 对应开始点，offset 为 1 对应结束点 第二个参数是渐变的颜色

代码案例

//1. 角形渐变 x1!=x2 y1!=y2
            // let linear = ctx.createLinearGradient(0,0,200,200);
            // 水平渐变 x1!=x2 y1==y2
            // let linear = ctx.createLinearGradient(0,0,200,0);
            // 垂直渐变 x1==x2 y1!=y2
            // let linear = ctx.createLinearGradient(0,0,0,200);
            
            // linear.addColorStop(0.2,'red')
            // linear.addColorStop(0.5,'green')
            // linear.addColorStop(0.8,'orange')
            // linear.addColorStop(1,'blue')
            
            //2. 使用渐变
            // ctx.fillStyle = linear;
            // ctx.fillRect(0,0,200,200)

4放射性渐变

createRadialGradient放射性渐变。 1.获取线性渐变对象 let radial = cxt.createRadialGradient(外x,外y,外r,内x,y,内r) 2.创建渐变颜色 radial.addColorStop()

代码案例

// let radial = ctx.createRadialGradient(250,250,200,200,200,10);
            // radial.addColorStop(0.2,'red')
            // radial.addColorStop(0.5,'green')
            // radial.addColorStop(0.8,'orange')
            // radial.addColorStop(1,'blue')
            
            // 使用径向渐变
            // ctx.arc(250,250,200,0,Math.PI*2);
            // ctx.fillStyle=radial;
            // ctx.fill();

九、变形

1旋转rotate

ctx.rotate(旋转的弧度) 是相对于画布的起点进行旋转

// ctx.fillRect(100,100,100,100);
			
			// 执行旋转30度 转换成弧度
			// ctx.rotate(Math.PI/180*30);
			
			// 再次绘制红色矩形
			// ctx.beginPath();
			// ctx.fillStyle='red';
			// ctx.fillRect(100,100,100,100);

2移动translate

ctx.translate(x,y) 是将画布的起点进行位移

// ctx.fillRect(100,100,100,100);
            
            // 执行位移
            // ctx.translate(100,100)
            
            // 再次绘制红色矩形
            // ctx.beginPath();
            // ctx.fillStyle='red';
            // ctx.fillRect(100,100,100,100);

3.缩放scale

ctx.scale(x,y) 增减图形在 canvas 中的像素数目，scale方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子；

默认情况下，canvas 的 1 单位就是 1 个像素。举例说，如果我们设置缩放因子是 0.5，1 个单位就变成对应 0.5 个像素，这样绘制出来的形状就会是原先的一半。同理，设置为 2.0 时，1 个单位就对应变成了 2 像素，绘制的结果就是图形放大了 2 倍。

// ctx.fillRect(100,100,100,100);
            
            // 执行缩放
            // ctx.scale(2,2)
            
            // 再次绘制红色矩形
            // ctx.beginPath();
            // ctx.fillStyle='red';
            // ctx.fillRect(100,100,100,100);
 
 
// 增减图形在 `canvas` 中的像素数目，
            // `scale`方法接受两个参数。`x,y` 分别是横轴和纵轴的缩放因子；
            //  默认情况下，`canvas` 的 1 单位就是 1 个像素。
            
            // ctx.fillRect(100,100,100,100);
            
            // 执行缩放
            // ctx.scale(2,2);
            
            // 再次绘制同样大小矩形
            // ctx.beginPath();
            // ctx.fillStyle='red';
            // ctx.fillRect(100,100,100,100)

4Canvas状态

ctx.save() ctx.restore()

// 起点(0,0)
            // ctx.fillRect(100,100,100,100);
            
            // 保存状态（0,0）
            // ctx.save();
            
            // 执行位移
            // ctx.translate(100,100);
            
            // 再次绘制同样大小矩形 起点（100,100）
            // ctx.beginPath();
            // ctx.fillStyle='red';
            // ctx.fillRect(100,100,100,100)
            
            // 回复状态 （0,0）
            // ctx.restore();
            
            // 再次绘制同样大小矩形 起点（0,0）
            // ctx.beginPath();
            // ctx.fillStyle='green';
            // ctx.fillRect(100,100,50,50)

5变形transform

transform() 变形矩阵，该方法的行为相对于由 rotate()、scale()、translate() 完成的变换。

ctx.transform(1,0,0,1,0,0)

ctx.transform(a,b,c,d,e,f)

a:水平缩放,b:水平旋转(0,1),c:垂直旋转(0,-1),d:垂直缩放,e:水平移动,f:垂直移动

ctx.fillRect(100,100,100,100);
            // 执行位移
            ctx.transform(1,-0.5,0.5,1,100,100);
            
            ctx.beginPath();
            ctx.fillStyle='blue';
            ctx.fillRect(100,100,100,100);