数据可视化知识点汇总

最新推荐文章于 2024-05-30 20:51:15 发布

genggengbu2

最新推荐文章于 2024-05-30 20:51:15 发布

阅读量1.3k

点赞数

分类专栏：知识点汇总文章标签：数据可视化

本文链接：https://blog.csdn.net/genggengbu2/article/details/113243979

版权

canvas

“画布”,像素的位图

编写canvas标签添加默认宽高

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

获取到canvas对象

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

设置获取绘图属性
调用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

矢量图形

编写svg标签添加默认宽高
编写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

viewport:svg可视区域
<svg width="100px" height="100px">
viewBox:视区盒子,画布上绘制svg图形的坐标系统
<svg width="100%" height="100%" viewBox="0 0 100 100">
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 右移

矢量图组件：
自定义：
html:
<svg> <use :href="iconname"></use>
js:
根据传入的name 获取iconname 渲染
iconf引入：
<script src="//at.alicdn.com/t/font_2164427_lzj78h68b5j.js"></script>
然后自定义的组件通过name引入
绘制动画
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

最低0.47元/天解锁文章

genggengbu2

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
数据可视化知识点汇总

数据可视化canvassvg项目矢量图svgCanvas与SVG的主要区别d3zrenderthreeAntvAntv--g2g6L7HighchartsEchart系列组件坐标系样式管理数据维度映射移动端自适应事件和行为拖拽自定义系列v-chartsvue-echartscanvas“画布”,像素的位图编写canvas标签添加默认宽高<canvas id="canvas" width="800" height="800"></canvas>获取到canvas
复制链接

扫一扫

专栏目录