2021-05-10

一、什么是数据可视化：

数据可视化，是关于数据视觉表现形式的科学技术研究
数据可视化的理论基础：计算机图形学

二、 浏览器实现数据可视化架构：

三、数据可视化基础核心技术

1、canvas
canvas 是 HTML5 提供的一个用于展示绘图效果的标签. canvas 原意画布, 帆布. 在 HTML 页面中用于展示绘图效果. 最早 canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现

canvas 的基本用法:
基本语法

<canvas></canvas>

1.使用 canvas 标签, 即可在页面中开辟一格区域. 可以设置其 width 和 height 设置该区域的尺寸.
默认 canvas 的宽高为 300 和 150.
不要使用 CSS 的方式设置宽高, 应该使用 HTML 属性.
如果浏览器不支持 canvas 标签, 那么就会将其解释为 div 标签. 因此常常在 canvas 中嵌入文本, 以提示用户浏览器的能力.
2.canvas 的兼容性非常强, 只要支持该标签的, 基本功能都一样, 因此不用考虑兼容性问题.
3.canvas 本身不能绘图. 是使用 JavaScript 来完成绘图.
4.canvas 对象提供了各种绘图用的 api.

canvas 的使用领域:
canvas 的使用领域很多:

1. 游戏
2. 可视化数据(重点)
3. banner 广告
4. 多媒体
5. 未来

 基本绘图方法
绘图步骤
    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)

2、svg

可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。
SVG有DOM接口，每个图元都会对应DOM对象，这些对象都是可以单独操作的，而且还能绑定onclick这类事件。 
SVG图形是矢量的，无需任何图像处理工具，通过XML文本生成，
正是因为通过文本、指令生成的图像，才是矢量的。

如何生成svg：

  > 在线编辑器(http://www.zuohaotu.com/svg/)
  >
  > 通过UI设计工具（AI,stretch）来生成

• svg具体如何绘制基本图形

 1.绘制矩形：
  <rect width="300" hei

- svg具体如何绘制基本图形

```javascript
 1.绘制矩形：
  <rect width="300" height="200" x="300" y="200"></rect>
 2.绘制圆形：
  <circle cx="100" cy="100" r="100"></circle>
 3.绘制椭圆：
  <ellipse cx="200" cy="150" rx="100" ry="200"></ellipse>
 4.折线：
  <line x1="100" y1="100" x2="600" y2="400"></line>
 5.多边形： 
  <polyline points="50,100 100,200 200,350 250,300"></polyline>
  // polygon:标签用来创建不少于三个边的图形
 6.常用属性：
  fill="white"   // 填充色
  stroke="green"   // 边框色
  stroke-width="5" // 边框宽度
  fill-opacity="0" // 透明度

贝赛尔曲线

三次贝塞尔曲线需要定义一个点和两个控制点，所以用C命令创建三次贝塞尔曲线，需要设置三组坐标参数

 C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
 
 <svg xmlns="http://www.w3.org/2000/svg">
    <path d="M10 10 C 140 20, 140 130, 100 160" stroke="red" fill="none"/>
</svg>

说明:
  最后一个坐标(x,y)表示的是曲线的终点，另外两个坐标是控制点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点。