请帮我用js实现一个类似支付宝的芝麻信用的六边形的雷达图
时间: 2024-04-20 18:27:25 浏览: 22
好的,以下是一个简单的 JavaScript 示例代码,可以绘制一个类似支付宝芝麻信用的六边形雷达图:
```html
<div id="container">
<canvas id="canvas"></canvas>
</div>
<script>
const canvas = document.getElementById('canvas');
canvas.width = 400;
canvas.height = 400;
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const sides = 6;
const radius = 150;
const data = [80, 60, 50, 40, 70, 90]; // 模拟数据
function drawPolygon(x, y, sides, radius) {
ctx.beginPath();
for (let i = 0; i < sides; i++) {
const angle = i * (Math.PI * 2) / sides;
const newX = x + radius * Math.cos(angle);
const newY = y + radius * Math.sin(angle);
ctx.lineTo(newX, newY);
}
ctx.closePath();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = '#ccc';
ctx.lineWidth = 2;
for (let i = 1; i <= sides; i++) {
const r = radius / sides * i;
drawPolygon(centerX, centerY, sides, r);
ctx.stroke();
}
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.strokeStyle = 'red';
ctx.lineWidth = 3;
drawPolygon(centerX, centerY, sides, data[0] / 100 * radius);
for (let i = 1; i < sides; i++) {
const r = data[i] / 100 * radius;
const angle = i * (Math.PI * 2) / sides;
const newX = centerX + r * Math.cos(angle);
const newY = centerY + r * Math.sin(angle);
ctx.lineTo(newX, newY);
}
ctx.closePath();
ctx.fill();
ctx.stroke();
}
draw();
</script>
```
这段代码将绘制一个六边形雷达图,并使用模拟数据绘制一个数据点。你可以根据需要修改此代码,以满足你的需求。