大数据canvas

那是遇知吧

已于 2022-09-27 09:34:30 修改

阅读量73

点赞数

分类专栏： canvas 全部总结-2 文章标签： javascript html 前端

于 2019-12-20 10:14:55 首次发布

本文链接：https://blog.csdn.net/weixin_41406727/article/details/103496495

版权

canvas 同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

全部总结-2

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .top-state-total {
            display: flex;
            justify-content: space-between;
            color: #000;
            text-align: center;
        }

        .top-state-total .single {
            position: relative;
        }

        .top-state-total .single span {
            position: absolute;
            left: 60px;
            top: 45px;
            font-size: 14px;
        }

        .top-state-total .single span b {
            font-size: 25px;
        }
    </style>
</head>

<body>
    <div class='top-state-total' id="stateTotal"></div>
    <script>
        function drawLabel(canvas, textInfo) {
            var ctx = canvas.getContext('2d'),
                text = textInfo.text,
                idx = textInfo.lineWid,
                colorValue = "#049188";
            canvas.width = idx;
            ctx.fillStyle = colorValue;
            //畫圓
            ctx.beginPath();
            ctx.arc(35, 55, 2, 0, 2 * Math.PI, false);
            ctx.fill();
            //折線
            ctx.moveTo(35, 55);
            ctx.lineTo(60, 80);
            ctx.lineTo(idx, 80);
            ctx.lineWidth = 1;
            ctx.strokeStyle = colorValue;
            ctx.stroke();
            //文字
            ctx.font = '12px Georgia';
            ctx.fillText(text, 60, 92);
        }
        var stateList = document.getElementById('stateTotal'),
            titleObj = [
                {
                    text: '接入終端數量1',
                    lineWid: 160,
                    num: 100,
                    unit: '臺'
                }, {
                    text: '接入終端數量2',
                    lineWid: 160,
                    num: 200,
                    unit: '臺'
                }, {
                    text: '接入終端數量3',
                    lineWid: 160,
                    num: 300,
                    unit: '臺'
                }, {
                    text: '接入終端數量4',
                    lineWid: 160,
                    num: 400,
                    unit: '臺'
                }, {
                    text: '接入終端數量4',
                    lineWid: 160,
                    num: 500,
                    unit: '臺'
                }, {
                    text: '接入終端數量4',
                    lineWid: 160,
                    num: 600,
                    unit: '臺'
                }
            ];

        titleObj.forEach(function (o, i) {
            stateList.innerHTML += `<div class="single">
            <canvas height="100" width='${o.lineWid}'></canvas>
            <span><b>${o.num}</b>${o.unit}</span>
        </div> `
        });
        stateList.querySelectorAll('canvas').forEach(function (item, idx) {
            drawLabel(item, titleObj[idx]);
        })
    </script>
</body>

</html>