静态折线图

最新推荐文章于 2021-06-08 10:20:29 发布

动心.

最新推荐文章于 2021-06-08 10:20:29 发布

阅读量494

点赞数

本文链接：https://blog.csdn.net/weixin_43893437/article/details/85004637

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折线图</title>
    <style>

    </style>
</head>
<body>
<div id="container"></div>
</body>
<script src="../day35/bar.js"></script>
<script>
    var obj = {
        id:"canvas",
        width:500,
        height:300,
        tipH:4,
        series: [
            {
                name: "网络",
                type: "line",
                lineColor: "red",
                fontColor: "red",
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: "内存",
                type: "line",
                lineColor: "blue",
                fontColor: "blue",
                data:[200, 182, 191, 234, 290, 330, 310]
            },
            {
                name: "CPU",
                type: "line",
                lineColor: "green",
                fontColor: "green",
                data:[150, 232, 201, 154, 190, 330, 410]
            }
        ]
    };
    drawBrokenLine(obj);
</script>
</html>

外部JS：

function drawBrokenLine(obj) {
    var id = obj.id;
    var width = obj.width;
    var height = obj.height;
    var series = obj.series;
    var length = series.length;
    var tipH=obj.tipH||4;//y轴分布
    var container=document.getElementById("container");
    id=document.createElement("canvas");
    container.appendChild(id);
    id.width=width;
    id.height=height;
    id.style.borderBottom="1px solid red";
    id.style.borderLeft="1px solid red";
    var cvs=id.getContext("2d");
 /*   container.style.position="relative";
    container.style.left="50px";
    container.style.top="50px";*/
    container.style.cssText="position:relative;left:50px;top:50px;width:551px;height:301px";
    var max=0;
    var arr=[];
    for(var i=0;i<length;i++){
        for(var j=0;j<series[i].data.length;j++){
            if(series[i].data[j]>=max){
                max=series[i].data[j];
            }
        }
        arr.push(max);
    }
    var arrLength=arr.length;
    for(var i=0;i<arrLength;i++){
        if(arrLength[i]>=max){
            max=arrLength[i];
        }
    }
    max=Math.ceil(max/100)*100;
    var per=height/max;//每一个像素代表的高度
    var spaceHeight=Math.round(max/(tipH+1));//y轴间隔
    console.log(spaceHeight);
    var y=0;
    var spaceYy=[];
    var data=[];
    var numX=series[0].data.length;
    var spaceWidth=width/numX;//x轴间隔
    for(var i=0;i<length;i++){
        data.push(series[i].data);//series里面的每个data数组
        for(var j=0;j<numX;j++)
        spaceYy.push(height-(per*data[i][j]));
    }
    console.log(spaceYy)
    for(var i=0;i<tipH+2;i++){
        var spaceY=document.createElement("div");
        spaceY.innerText=Math.round((y+i*spaceHeight)*100/100);
        spaceY.style.cssText="position:absolute;left:-40px;width:50px;text-align:center";
        spaceY.style.bottom=(per*spaceHeight*i-8)+"px";
        container.appendChild(spaceY);

    }
    var spaceXx=[];

    // console.log(numX);//data数组里面的个数
    for(var i=0;i<numX;i++){
        var spaceX=document.createElement("div");
        spaceX.innerText=i;
        spaceX.style.cssText="position:absolute;bottom:-30px;text-align:center";
        spaceX.style.left=(spaceWidth*i)+"px";
        spaceXx.push(spaceWidth*i);
        container.appendChild(spaceX);
    }
    for(var i=0;i<length;i++){
        cvs.strokeStyle=series[i].lineColor;
        cvs.beginPath();
        cvs.moveTo(spaceXx[0],spaceYy[(numX*i)+i]);
        for(var j=0;j<numX;j++){
          cvs.lineTo(spaceXx[j],spaceYy[(i*numX)+j]);
          cvs.stroke();
        }
    }
    for(var i=0;i<length;i++){
        cvs.fillStyle="white";
        cvs.strokeStyle=series[i].lineColor;
        cvs.lineWidth=1;
        cvs.moveTo(spaceXx[0],spaceYy[(numX*i)+i]);
        for(var j=0;j<numX;j++){
            cvs.beginPath();
            cvs.arc(spaceXx[j],spaceYy[(i*numX)+j],2,0,2*Math.PI);
            cvs.fill();
            cvs.stroke();
            cvs.closePath();
        }
    }
    var perHeight=30;
    for(var i=0;i<length;i++){
        cvs.fillStyle=series[i].lineColor;
        cvs.beginPath();
        cvs.arc(460,100+perHeight*i,5,0,2*Math.PI);
        cvs.fill();
        cvs.closePath();
        cvs.beginPath();
        cvs.fillStyle=series[i].fontColor;
        cvs.fillText(series[i].name,475,105+perHeight*i);
        cvs.fill();
    }
}

动心.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
静态折线图

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;折线图&lt;/title&gt; &lt;style&gt; &lt;/style&gt;&lt;
复制链接

扫一扫