用SVG绘图写一个表格统计的效果，类似于百度图表工具Echarts实现的效果。
实现效果如下：
实现代码如下：
代码语言：javascript复制<!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>
