如何使用canvas画一个雷达图
时间: 2023-07-20 18:07:41 浏览: 58
以下是一个简单的使用 canvas 绘制雷达图的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Radar Chart</title>
<style type="text/css">
canvas {
border: 1px solid #ddd;
margin: 20px auto;
}
</style>
</head>
<body>
<canvas id="radar-chart" width="400" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('radar-chart');
var context = canvas.getContext('2d');
var data = [80, 60, 40, 50, 90, 70]; // 数据
var labels = ['A', 'B', 'C', 'D', 'E', 'F']; // 标签
var maxVal = 100; // 最大值
var stepSize = maxVal / 5; // 步长
// 绘制坐标轴
context.beginPath();
context.moveTo(200, 0);
context.lineTo(200, 400);
context.moveTo(0, 200);
context.lineTo(400, 200);
context.stroke();
// 绘制数据区域
context.beginPath();
context.moveTo(getX(0, data[0]), getY(0, data[0]));
for (var i = 1; i < data.length; i++) {
context.lineTo(getX(i, data[i]), getY(i, data[i]));
}
context.closePath();
context.fillStyle = 'rgba(255, 0, 0, 0.2)';
context.fill();
// 绘制数据点
for (var i = 0; i < data.length; i++) {
context.beginPath();
context.arc(getX(i, data[i]), getY(i, data[i]), 5, 0, 2 * Math.PI);
context.fillStyle = 'red';
context.fill();
}
// 绘制标签
for (var i = 0; i < labels.length; i++) {
context.fillText(labels[i], getX(i, maxVal + 10), getY(i, maxVal + 10));
}
// 绘制刻度
for (var i = 0; i <= 5; i++) {
var val = i * stepSize;
context.fillText(val, getX(0, val) - 15, getY(0, val) + 5);
context.beginPath();
context.arc(200, 200, getX(0, val), 0, 2 * Math.PI);
context.strokeStyle = '#ddd';
context.stroke();
}
// 计算坐标
function getX(index, value) {
var angle = Math.PI * 2 / data.length * index - Math.PI / 2;
return 200 + 150 * value / maxVal * Math.cos(angle);
}
function getY(index, value) {
var angle = Math.PI * 2 / data.length * index - Math.PI / 2;
return 200 + 150 * value / maxVal * Math.sin(angle);
}
</script>
</body>
</html>
```
这个例子绘制了一个六边形的雷达图,包含了数据区域、数据点、标签、刻度等元素。你可以根据自己的需求修改数据和样式。