SVG绘图表格统计

越陌度阡

发布于 2020-11-26 15:01:53

9400

发布于 2020-11-26 15:01:53

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

用SVG绘图写一个表格统计的效果，类似于百度图表工具Echarts实现的效果。

实现效果如下：

实现代码如下：

<!DOCTYPE html>
<html>

<head lang="zh-cn">
    <meta charset="UTF-8">
    <title>SVG绘图表格统计</title>
    <style>
        body {
            text-align: center;
        }

        svg {
            background: #f0f0f0;
        }
    </style>
</head>

<body>
    <h3>SVG绘图表格统计</h3>
    <svg id="s1">
        <defs id="effectList"></defs>

        <g stroke="#555" stroke-width="2">
            <!--绘制X轴-->
            <line x1="50" y1="450" x2="650" y2="450"></line>
            <line x1="650" y1="450" x2="620" y2="440"></line>
            <line x1="650" y1="450" x2="620" y2="460"></line>
            <!--绘制Y轴-->
            <line x1="50" y1="450" x2="50" y2="50"></line>
            <line x1="50" y1="50" x2="40" y2="80"></line>
            <line x1="50" y1="50" x2="60" y2="80"></line>

        </g>

    </svg>
    <script>
        var w = 600 + 100;  // 加100为padding值
        var h = 10 * 40 + 100;// 整体放大40倍

        // getAttribute用于获取，setAttribute用于设置
        s1.setAttribute("width", w);
        s1.setAttribute("height", h);

        // 此为js数组，如果用单引号括起来,表明是json字符串，里面要加双引号
        var data = [
            { label: 'HTML', value: 3 },
            { label: 'CSS', value: 5 },
            { label: 'JS', value: 7 },
            { label: 'DOM', value: 6 },
            { label: 'JQUERY', value: 5.5 },
            { label: 'AJAX', value: 8 },
            { label: 'HTML5', value: 6 }
        ];
        // 计算每个柱子的宽度
        var colWidth = 600 / (2 * data.length + 1);
        // 遍历每个对象
        for (var i = 0; i < data.length; i++) {
            // 取出每个对象
            var d = data[i];
            // 每个柱子的宽度
            var cw = colWidth;
            // 每个柱子的高度，用高度系数乘以倍率
            var ch = d.value * 40;
            // 每个柱子的x坐标
            var x = (2 * i + 1) * colWidth + 50;
            // 每个柱子的y的坐标
            var y = 500 - 50 - ch;

            var c = rc();// 渐变的颜色
            // 动态添加渐变对象
            var html = `
	            <linearGradient id="g${i}" x1="0" y1="0" x2="0" y2="100%">
	    			<stop offset="0" stop-color="${c}"></stop>
	    			<stop offset="100%" stop-color="${c}" stop-opactity="0"></stop>
	    		</linearGradient>
            `;
            effectList.innerHTML += html;

            // 动态的创建每个矩形
            var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            // 设置每个柱子的宽度
            rect.setAttribute('width', cw);
            // 设置每个柱子的高度
            rect.setAttribute('height', ch);
            // 设置每个柱子的x坐标
            rect.setAttribute('x', x);
            // 设置每个柱子的y坐标
            rect.setAttribute('y', y);
            // 设置随机填渐变颜色
            rect.setAttribute('fill', `url("#g${i}")`);
            s1.appendChild(rect);

        }

        // 随机颜色函数
        function rc() {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return `rgb(${r},${g},${b})`;
        }

    </script>
</body>

</html>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019-07-04 ，如有侵权请联系 cloudcommunity@tencent.com 删除

svg