数据可视化后台 数据可视化操作

数据可视化的理解

数据可视化是将数据以视觉形式表现出来的数据研究。
也可以理解为是通过计算机图形学和图像处理等技术将获取的数据转换成图表或图像等展现在屏幕上，
并进行各种交互处理的理论、方法和技术。

数据可视化：

一、canvas的基本操作

<canvas id="box" width="800" height="400"></canvas>

1.注意：width和height最好canvas标签上添加，不要用css中的width,height
2.如何绘制常用图形

  第一步： 获取canvas并创建绘图对象
获取canvas标签,只是一个DOM对象
    let box=document.getElementById('box')
如果想操纵canvvas来绘图，必须调用getContext方法来创建ctx绘图对象
    let ctx=box.getContext('2d')
    
  第二步：绘制图形  
    1.绘制一条线段    
    开始绘制：ctx.beginPath()
    绘制线宽：ctx.lineWidth=数值
    起始位置：ctx.moveTo(x,y)
    结束线段：ctx.lineTo(x,y)
    关闭路径：ctx.closePath()
    绘制线段：ctx.stroke()
    填充图形：ctx.fill()
    边框颜色：ctx.strokeStyle="十六进制或单词"
    填充颜色：ctx.fillStyle="十六进制或单词"   
    
   2.绘制矩形
    绘制矩形边框：ctx.strokeRect(x, y, width, height)
    填充矩形：ctx.fillRect(x, y, width, height)
    清除矩形的一部分：ctx.clearRect(x, y, width, height)    
    
   3.绘制圆形 ctx.arc(横坐标, 纵坐标, 圆半径, 圆的起始度数（弧度）, 圆的结束度数（弧度）, 是顺时针还是逆时间针)   
    弧度制2π = 角度制360°
    所以 弧度制1 =360°/(2π)=(180/π)°
    角度制1°=2π/360=π/18    
    
   4.如何在画布上写字
   	实心填充字：fillText(text, x, y [, maxWidth])
   	空心字：strokeText(text, x, y [, maxWidth])   	
   	
   5.嵌入图片
   ctx.drawImage(image, x, y)

二、svg

1、svg特点与其他图片格式的区别
 图标：icon  gif,jpg，png
svg(放大不失真，可以通过css和js改变样式和交互)
 2、如何生成svg
在线编辑器(http://www.zuohaotu.com/svg/)
通过UI设计工具（AI,stretch）来生成

1、svg标签

<svg width="50" height="40" viewBox="0 0 100 100"></svg>

2、path标签

<svg width="100%" height="100%" viewBox="0 0 100 100">
 <path d="M0,0 L240,0 L240,240 L0,240 Z" fill="#fff" stroke="#000" stroke-width="10" transform="translate(5,5)"></path>
</svg>

d属性介绍：

三、css3 绘图

圆形的制作，我们采用的是CSS3中的border-radius属性。在制作过程中，有几点需要注意，其一宽度和高度值相同，其二圆角值为宽度或高度值的一半。也有地方提使用设置圆角值为50%，但我在Webkit中有碰到过不支持百分数的情况。

半圆形（Semicircle）
#semicircle{ 
width: 100px; 
height: 50px; 
background: red; 
-moz-border-radius: 100px 100px 0 0; 
-webkit-border-radius:  100px 100px 0 0; 
border-radius:  100px 100px 0 0; 
}
制作半圆和圆使用的方法是一样的，但需要配合元素的高度，宽度以及圆角的方位，制作出半圆形效果。

扇形（Fan-Shaped）
#fanShaped {
background: none repeat scroll 0 0 red;
-webkit-border-radius: 50px 0 0 0;
-moz-border-radius: 50px 0 0 0;
border-radius: 50px 0 0 0;
height: 50px;
width: 50px;
}

椭圆形（Oval）
#oval { 
width: 200px; 
height: 100px; 
background: red; 
-moz-border-radius: 100px / 50px; 
-webkit-border-radius: 100px / 50px; 
border-radius: 100px / 50px; 
}
这里使用了border-radius的X/Y两轴取值，制作出一种变形的圆角，在配合宽度等值，就制作了类似椭圆形的一个效果。

正方形（Square）
#square { 
width: 100px;
height: 100px; 
background: red; 
}

长方形(Rectangle)
#rectangle { 
width: 200px; 
height: 100px;
background: red; 
}

圆形（Circle）
#circle { 
width: 100px; 
height: 100px; 
background: red; 
-moz-border-radius: 50px; 
-webkit-border-radius: 50px; 
border-radius: 50px; 
}