六个数值，画雷达图
源码在文章最后面
雷达图六个数值更改的方法：在源代码的js部分找到以下代码，把 [ ] 里的数值改掉就行，但是一定要有6个数
// 示例值
const values = [30, 80, 50, 90, 70, 60];
界面
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radar Chart</title>
<style>
#radar-chart {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<svg id="radar-chart" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<!-- 雷达图的六边形框架和线条将在 JavaScript 中动态添加 -->
</svg>
<script>
function drawRadarChart(values) {
const svg = document.getElementById('radar-chart');
const radius = 90; // 雷达图的半径
const centerX = 100; // 雷达图的中心 X 坐标
const centerY = 100; // 雷达图的中心 Y 坐标
const angleStep = Math.PI / 3; // 每个轴之间的角度差
// 绘制六边形的框架
for (let i = 0; i < 6; i++) {
const angle = i * angleStep;
const startX = centerX + radius * Math.cos(angle);
const startY = centerY + radius * Math.sin(angle);
const endX = centerX + (radius + 10) * Math.cos(angle); // 框架线稍微长一些
const endY = centerY + (radius + 10) * Math.sin(angle);
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1', startX);
line.setAttribute('y1', startY);
line.setAttribute('x2', endX);
line.setAttribute('y2', endY);
line.setAttribute('stroke', 'black');
line.setAttribute('stroke-width', '2');
svg.appendChild(line);
}
// 绘制雷达图的线条
for (let i = 0; i < values.length; i++) {
const angle = i * angleStep;
const scaledRadius = radius * (values[i] / 100); // 根据值缩放半径
const x = centerX + scaledRadius * Math.cos(angle);
const y = centerY + scaledRadius * Math.sin(angle);
// 如果不是第一个点，则绘制线条到上一个点
if (i > 0) {
const prevX = centerX + scaledRadiusPrev * Math.cos(prevAngle);
const prevY = centerY + scaledRadiusPrev * Math.sin(prevAngle);
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1', prevX);
line.setAttribute('y1', prevY);
line.setAttribute('x2', x);
line.setAttribute('y2', y);
line.setAttribute('stroke', 'blue');
line.setAttribute('stroke-width', '2');
svg.appendChild(line);
}
// 绘制当前点的圆点
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', x);
circle.setAttribute('cy', y);
circle.setAttribute('r', '4');
circle.setAttribute('fill', 'blue');
svg.appendChild(circle);
// 更新上一个点和角度以供下一次迭代使用
scaledRadiusPrev = scaledRadius;
prevAngle = angle;
}
// 连接最后一个点到第一个点以完成雷达图
if (values.length > 0) {
const startX = centerX + scaledRadiusPrev * Math.cos(prevAngle);
const startY = centerY + scaledRadiusPrev * Math.sin(prevAngle);
const endX = centerX + values[0] * (radius / 100) * Math.cos(0);
const endY = centerY + values[0] * (radius / 100) * Math.sin(0);
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1', startX);
line.setAttribute('y1', startY);
line.setAttribute('x2', endX);
line.setAttribute('y2', endY);
line.setAttribute('stroke', 'blue');
line.setAttribute('stroke-width', '2');
svg.appendChild(line);
}
}
// 示例值
const values = [30, 80, 50, 90, 70, 60];
drawRadarChart(values);
</script>
</body>
</html>
7743
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
