使用html5 canvas绘制雷达图需先创建画布并获取2D上下文,定义多维数据与配置参数,通过极坐标转直角坐标计算各点位置,绘制同心多边形网格线,连接数据点形成填充区域,并在轴线末端添加维度标签,最终实现可扩展的可视化雷达图。
使用html5的canvas
绘制雷达图,关键在于理解极坐标与直角坐标的转换,并通过javaScript控制绘图上下文进行路径绘制。下面介绍具体实现步骤和代码示例。
1. 创建Canvas画布
在HTML中添加<canvas>
标签,设置宽高属性,用于后续javascript绘制。
<canvas id=”radarChart” width=”400″ height=”400″></canvas>
2. 获取绘图上下文
使用JavaScript获取Canvas的2D渲染上下文,这是所有绘图操作的基础。
const canvas = document.getElementById(‘radarChart’);
const ctx = canvas.getContext(‘2d’);
3. 定义数据与配置参数
雷达图通常展示多维度数据。需定义维度名称、对应数值、颜色等。
立即学习“前端免费学习笔记(深入)”;
const data = [80, 70, 90, 60, 85]; // 每个维度的值
const labels = [‘技能’, ‘效率’, ‘沟通’, ‘创新’, ‘责任感’];
const maxValue = 100; // 最大值基准
const numAxes = data.Length; // 维度数量
4. 计算坐标点位置
将每个数据点从极坐标转换为Canvas上的直角坐标。中心点设为画布中心,角度均匀分布。
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = math.min(centerX, centerY) – 50; // 雷达图半径
遍历每个维度,计算其角度和对应坐标:
for (let i = 0; i < numAxes; i++) {
const angle = (i * 2 * Math.PI) / numAxes;
const value = data[i];
const normalizedValue = value / maxValue; // 归一化
const x = centerX + radius * normalizedValue * Math.cos(angle);
const y = centerY + radius * normalizedValue * Math.sin(angle);
// 使用x,y绘制点或连线 }
5. 绘制网格线(背景层)
绘制多个同心多边形作为参考网格,增强可读性。
ctx.strokeStyle = ‘#ddd’;
ctx.lineWidth = 1;
for (let level = 1; level <= 5; level++) {
ctx.beginPath();
for (let i = 0; i < numAxes; i++) {
const angle = (i * 2 * Math.PI) / numAxes;
const r = (level / 5) * radius;
if (i === 0) ctx.moveTo(centerX + r * Math.cos(angle), centerY + r * Math.sin(angle));
else ctx.lineTo(centerX + r * Math.cos(angle), centerY + r * Math.sin(angle));
}
ctx.closePath();
ctx.stroke();
}
6. 绘制数据区域
连接各数据点形成封闭区域,填充颜色以突出表现。
ctx.fillStyle = ‘rgba(100, 150, 255, 0.6)’;
ctx.strokeStyle = ‘#66b3ff’;
ctx.lineWidth = 2;
ctx.beginPath();
for (let i = 0; i < numAxes; i++) {
const angle = (i * 2 * Math.PI) / numAxes;
const value = data[i];
const normalizedValue = value / maxValue;
const x = centerX + radius * normalizedValue * Math.cos(angle);
const y = centerY + radius * normalizedValue * Math.sin(angle);
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fill();
ctx.stroke();
7. 添加维度标签
在每条轴线末端添加文字说明。
ctx.font = ’14px Arial’;
ctx.textAlign = ‘center’;
ctx.textBaseline = ‘middle’;
ctx.fillStyle = ‘#333’;
for (let i = 0; i < numAxes; i++) {
const angle = (i * 2 * Math.PI) / numAxes;
const x = centerX + (radius + 20) * Math.cos(angle);
const y = centerY + (radius + 20) * Math.sin(angle);
ctx.fillText(labels[i], x, y);
}
基本上就这些。通过以上步骤,你可以用HTML5 Canvas完整绘制一个基础雷达图。后续可扩展交互功能,比如鼠标悬停提示、多数据集对比等。