数据可视化知识点汇总

canvas

“画布”,像素的位图

1. 编写canvas标签 添加默认宽高

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

2. 获取到canvas对象

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

3. 设置获取绘图属性
4. 调用API

实现

<canvas id="canvas" width="800" height="800"></canvas>
<script>
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    // 矩形
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, 50, 50);
    // 线段
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.strokeStyle = "blue";
    ctx.moveTo(100, 100);
    ctx.lineTo(250, 75);
    ctx.lineTo(300, 100);
    ctx.stroke();
    //绘制圆形
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = "green";
    ctx.fillStyle = "red";
    ctx.arc(200, 200, 50, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fill();
</script>

图片压缩

<input type="file" id="upload" />
<script>
    const ACCEPT = ["image/gif", "image/jpeg"];
    const MAXSIZE = 1024 * 1024 * 1024;
    const upload = document.getElementById("upload");
    // 转base64
    function converImageToBase64(file, callback) {
   
        let reader = new FileReader();
        reader.addEventListener("load", function(e) {
   
            // console.log(reader.result);
            const base64Image = e.target.result;
            callback && callback(base64Image);
            reader = null; //内存回收
        });
        reader.readAsDataURL(file);
    }

    // 压缩
    function compress(base64Image, callback) {
   
        let maxW = 1024;
        let maxH = 1024;
        // 获取base64
        // console.log(base64Image);
        // 创建标签
        const image = new Image();
        image.src = base64Image;
        // 图片宽高进行压缩
        image.addEventListener("load", function(e) {
   
            let ratio;
            let needCompress = false;
            if (maxW < image.naturalWidth) {
   
                needCompress = true;
                ratio = image.naturalWidth / maxW;
                maxH = image.naturalHeight / ratio;
            } else if (maxH < image.naturalHeight) {
   
                needCompress = true;
                ratio = image.naturalHeight / maxH;
                maxW = image.naturalHeight / ratio;
            }
            if (!needCompress) {
   
                maxW = image.naturalWidth;
                maxH = image.naturalHeight;
            }
            document.body.appendChild(image);
            // canvas 压缩 压缩尺寸/分辨率
            const canvas = document.createElement("canvas");
            canvas.setAttribute("id", "_compress_");
            canvas.width = maxW;
            canvas.height = maxH;
            // canvas.style.visibility = "visible";
            canvas.style.visibility = "hidden";
            document.body.appendChild(canvas);
            const ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, maxW, maxH);
            // 压缩大小
            ctx.drawImage(image, 0, 0, maxW, maxH);
            // 压缩分辨率
            const compressImage = canvas.toDataURL("image/jpeg", 0.9);
            // console.log(compressImage);
            // 创建image显示
            callback && callback(compressImage);
            canvas.remove();
            image.remove();
        });

        // 输出base64
    }

    function uploadToServer(compressImage) {
   
        console.log("发送给后端", compressImage);
    }

    upload.addEventListener("change", function(e) {
   
        const [file] = e.target.files;
        if (!file) {
   
            upload.value = "";
            return;
        }
        const {
   
            type: fileType,
            size: fileSize
        } = file;
        // 判断包含
        // console.log(fileType);
        if (!ACCEPT.includes(fileType)) {
   
            alert("不支持");
            upload.value = "";
            return;
        }
        if (fileSize > MAXSIZE) {
   
            alert("文件超出1mb");
            upload.value = "";
            return;
        }
        // 压缩文件
        converImageToBase64(file, (base64Image) =>
            compress(base64Image, uploadToServer)
        );
    });
</script>

svg

矢量图形

1. 编写svg标签 添加默认宽高
2. 编写svg绘图标签以及属性

实现

<svg width="800" height="800">
<!-- 矩形 -->
<rect
  width="50"
  height="50"
  style="fill: red; stroke-width: 1px; stroke: #000;"
></rect>
<!-- 线段 -->
<line
  x1="100"
  y1="100"
  x2="250"
  y2="75"
  style="stroke: blue; stroke-width: 1px;"
></line>
<line
  x1="250"
  y1="75"
  x2="300"
  y2="100"
  style="stroke: blue; stroke-width: 1px;"
></line>
<!-- 圆形 -->
<circle
  cx="200"
  cy="200"
  r="50"
  stroke="green"
  stroke-width="2"
  fill="red"
></circle>
</svg>

项目矢量图svg

1. viewport:svg可视区域
   <svg width="100px" height="100px">
2. viewBox:视区盒子,画布上绘制svg图形的坐标系统
   <svg width="100%" height="100%" viewBox="0 0 100 100">
3. preserveAspectRatio 默认值：“xMidYMid meet”
   当 viewport 和 viewBox 比例出现突兀。

• meet slice
  meet : viewBox保持和viewport合适宽高比，svg将优先考虑压缩比较小的作为最终压缩比。
  500/200=2.5 200/200 = 1 所以压缩比是1。
  slice ：保持宽高比，不在viewport中的viewBox裁剪,优先考虑较大的宽高比。
  500/200=2.5 200/200 = 1 所以压缩比是2.5。
• Min Max Min
  xMid ： viewBox x视口的中心
  YMid ： viewBox y视口中心
• preserveAspectRatio = “none”
  不保存宽高比，根据viewport viewBox 宽高比计算显示
• <defs>定义成组件
  <g id="more"></g>隐藏里面的内容
  <use href="#more"></use>引用g id=“more”
  <symbol>同g 但是可以在g 设定viewBox,不用引用者设
• 其他：
  currentColor：继承父级的颜色
  <line x1="0" y1="50" x2="100" y2="50" stroke-width="8" stroke="currentColor"></line>
  stroke-dasharray:10; // 一段颜色 一段没有颜色
  stroke-dashoffset:10; // 根据stroke-dasharray 右移

4. 矢量图组件：
   自定义：
   html:
   <svg> <use :href="iconname"></use>
   js:
   根据传入的name 获取iconname 渲染
   iconf引入：
   <script src="//at.alicdn.com/t/font_2164427_lzj78h68b5j.js"></script>
   然后自定义的组件 通过name引入
5. 绘制动画
   1、平面
   transform="translate(10,10) rotate(30) skewX(30) skewY(30) scale(0.5)"
   2、矩阵 线性计算
   matrix(2 1 -1 2 50 0)
   [2,-1,50] => 2*_x+(-1)_y+50 = x
   [1,2,0] => 1_x+(-2)*_y+0 = y
   顶点坐标：
   [0,0] => [50,0]
   [100,0] => [250,100]
   [100,50] => [200,200]
   [0,50] => [0,100]
   3、@keyframes

@keyframes circle{
   
    from{
   
        stroke-dasharray:0 1131;
    }
    to{
   
        stroke-dasharray:1131 1131;
    }
}
.circle{
   
    animation: circle 5s linear infinite;
}

• logo描边动画
  1、选择logo
  2、设置 stroke-dasharray 和 stroke-dashoffset
  3、对stroke-dashoffset设置动画

.logo{
   
    width: 100%;
    height: 100%;
    fill:none;
    stroke:#333;
    stroke-width: 8px;
    stroke-dasharray: 5029.8291015625 ;
    animation:logo 5s  linear 1 ;
}

@keyframes logo {
   
    0% {
   
        stroke-dashoffset:5029.8291015625;
    }
    50% {
   
        stroke-dashoffset:0;
    }
    75%{
   
        fill:red;
    }
    100%{
   
        fill:burlywood
    }
}

• SMIL动画
  不需要css js
  1、<set>
  attributeName:改变的属性； to：变成啥样子； begin：动画开始时间；attributeType XML(获取的属性是当前的dom) css(监听的属性是css);

<svg width="200px" hegith="200px" >
    <rect x="0" y="0" fill="red" width="100" height="50" >
        <set attributeName="x" attributeType="XML" to="10" begin="1s"></set>
        <set attributeName="x" attributeType="XML" to="20" begin="2s"></set>
        <set attributeName="fill" attributeType="XML" to="blue" begin="3s"></set>
    </rect>
</svg>

2、<animate>
repeatCount=“indefinite” 动画无数次 repeatCount=“1” 动画一次
fill=“freeze” 动画结束后停留最后 fill=“remove” 动画结束后回到最初

<svg width="200px" hegith="200px" >
    <circle cx="0" cy="0" r="30" fill="blue" stroke="black" stroke-width="1">
        <animate attributeName