js简单的插件（折线图）

最新推荐文章于 2024-05-17 02:07:51 发布

小栗子的普

最新推荐文章于 2024-05-17 02:07:51 发布

阅读量5.1k

点赞数 1

分类专栏： JS 文章标签： js插件

本文链接：https://blog.csdn.net/weixin_43885459/article/details/85237064

版权

JS 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

自己做的一个简单的折线图，html代码如下

<head>
    <meta charset="UTF-8">
    <title>折线图</title>
    <style>
        #container{
            height: 600px;
            background-image: url("../../day09-20181213/nybj.png");
            background-size: 100% 100%;
        }
    </style>

</head>
<body>
<div id="container"></div>
</body>

js代码如下

<script>
    var obj = {
        id:"container",
        width:1300,
        height:500,
        datas:[
            {
                name:"青岛",
                color:"red",
                data:[30,20,40,21,23,16,33,20,13,21,10,1]
            },
            {
                name:"烟台",
                color:"orange",
                data:[26,21,33,30,24,20,25,10,8,5,8,10]
            },
            {
                name:"威海",
                color:"green",
                data:[42,33,28,18,20,33,25,16,15 ,16,23,3]
            },

        ],
        startX:60,
        startY:450,
        labelColor:"white",
        labelCount:10,
        nameSpace : 80,
        circleColor:"blue",
        tip:"山东省各个城市12个月的平均温度"
    };

    drawLine1(obj);
    function drawLine1(obj) {
        var id = obj.id;
        var datas = obj.datas;
        var width = obj.width;
        var height = obj.height;
        var startX = obj.startX;
        var startY = obj.startY;
        var labelColor = obj.labelColor;
        var labelCount = obj.labelCount;
        var nameSpace = obj.nameSpace;
        var tip = obj.tip;
        var circleColor = obj.circleColor;

        var container = document.getElementById(id);
        var canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;
        canvas.style.border = "1px solid red";
        container.appendChild(canvas);
        var cvs = canvas.getContext("2d");
        cvs.beginPath();
        cvs.strokeStyle = "white";
        var startY1 = 50;
        cvs.moveTo(startX, startY1);
        cvs.lineTo(startX, startY);
        cvs.lineTo(1200, startY);
        cvs.stroke();
        var length = datas.length;
        var length1 = datas[0].data.length;
        var maxNum = 0;
        for(var i = 0;i < length;i++){
            for (var j = 0;j < length1;j++){
                if (maxNum <= datas[i].data[j]) {
                    maxNum = datas[i].data[j];
                }
            }
        }

        maxNum = maxNum * 1.1;
        var increment =  (startY - startY1) / maxNum;
        var labelSpace = (startY - startY1) / labelCount;
        for (var i = 0; i <= labelCount; i++) {
            var text = Math.round((maxNum / labelCount) * i);
            cvs.beginPath();
            cvs.fillStyle = labelColor;
            cvs.fillText(text, startX - 40, startY - (labelSpace * i ) );
            cvs.closePath();
            cvs.fill();
        }

        var start = 0;
        var end = 0;
        var titleSpace = 30;

        for (let i = 0;i < length ;i++) {
            var k = 100;

            for (let j = 0; j < length1; j++) {

                // end = length1 * (i + 1);
                // start = i * length1;
                //折线
                setTimeout(function () {
                    cvs.beginPath();
                    cvs.strokeStyle = datas[i].color;
                    cvs.moveTo(startX + nameSpace * (j + 1), (startY1 + (maxNum - datas[i].data[j]) * increment ));
                    cvs.lineTo(startX + nameSpace * (j + 2), (startY1 + (maxNum - datas[i].data[j + 1]) * increment));
                    cvs.stroke();
                }, k += 100);

                end = length1 * (i + 1);
                start = i * length1;
                //圆点
                cvs.beginPath();
                cvs.fillStyle = circleColor;
                cvs.arc(startX + nameSpace * (j + 1), (startY1 + (maxNum - datas[i].data[j]) * increment ), 4, 0, Math.PI * 2)
                cvs.closePath();
                cvs.fill();



            }
            cvs.beginPath();
            cvs.strokeStyle = datas[i].color;
            cvs.moveTo(1050, 40 + titleSpace * i);
            cvs.lineTo(1100, 40 + titleSpace * i);
            cvs.stroke();
            cvs.closePath();

            cvs.beginPath();
            cvs.fillStyle = datas[i].color;
            cvs.font = "15px 宋体";
            cvs.fillText(datas[i].name, 1130, 45 + titleSpace * i);
            cvs.stroke();
            cvs.closePath();


        }
        cvs.beginPath();
        cvs.fillStyle = labelColor;
        cvs.fillText(tip,20,30);
        cvs.closePath();
        cvs.fill();
        for(var k = 0;k < length1;k++){
            cvs.beginPath();
            cvs.fillStyle = labelColor;
            cvs.fillText((k + 1) + "月份", startX + nameSpace * (k + 1) - 10, startY + 30 );
            cvs.closePath();
            cvs.fill();
        }



    }
</script>

结果如下（动画效果没有展示）
在这里插入图片描述

小栗子的普

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
js简单的插件（折线图）

自己做的一个简单的折线图，html代码如下&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;折线图&lt;/title&gt; &lt;style&gt; #container{ height: 600px; background-image: ur...
复制链接

扫一扫