前言
雷达图（Radar Chart），又可称为戴布拉图、蜘蛛网图（Spider Chart），是财务分析报表的一种。使用者能一目了然的了解各项指标的变动情形及其好坏趋向。
本文介绍如何在微信小程序中实现雷达图绘制。
雷达图
绘制背景
首先我们需要绘制出雷达图后面的“蜘蛛网”。具体原理就是一层一层将多边形画出来，根据数据长度决定每一个点的位置和半径长度。
var angle = Math.PI * 2 / length;for (var layer = 5; layer > 0; layer--) {
context.beginPath();
context.setGlobalAlpha(1);
context.setStrokeStyle("#D3D3D3"); if (layer % 2 != 0) {
context.setFillStyle("white");
} else {
context.setFillStyle("#F5F5F5");
} var currentRad = layer / 5 * radius;
context.moveTo(center.x, center.y - currentRad); var currentAngle = -Math.PI / 2; for (var i = 0; i < length; i++) {
context.lineTo(center.x + currentRad * Math.cos(currentAngle), center.y + currentRad * Math.sin(currentAngle));
currentAngle += angle;
}
context.fill();
context.closePath();
context.stroke();
}如代码所示，angle是根据数据长度决定的，这里为了好看，一共画五层，并且交替涂抹颜色。下图是length=6的效果：
蜘蛛网
绘制轴
接下来就是将各个顶点与圆心连接起来。有了“蜘蛛网”的经验，画轴就简单多了，只需要知道最外层顶点位置然后lineTo圆心就行了。
// draw Axis
context.beginPath(); var currentAngle = -Math.PI / 2; for (var i = 0; i < length; i++) {
context.moveTo(center.x + radius * Math.cos(currentAngle), center.y + radius * Math.sin(currentAngle));
context.lineTo(center.x, center.y);
currentAngle += angle;
}
context.closePath();
context.stroke();以下是加上轴线后的效果：
数轴
绘制指标
接下来是将各个维度指标名字添加到图表上。同数轴一样，首先需要确定最外层顶点的位置，然后根据位置调整文字显示的基准，将文字写上去。
// draw Index
context.beginPath();
context.setFillStyle("#D3D3D3");
context.setFontSize(14); var currentAngle = -Math.PI / 2; for (var i = 0; i < length; i++) { var posX = center.x + radius * Math.cos(currentAngle); var posY = center.y + radius * Math.sin(currentAngle); if (posX < center.x) context.setTextAlign("right"); else context.setTextAlign("left"); if (posY > center.y) context.setTextBaseline("top"); else context.setTextBaseline("bottom");
context.fillText(that.options.xLabel[i], posX, posY);
currentAngle += angle;
}
context.closePath();这里为了好看，对于文字要显示的位置小于中心点x坐标的靠右对齐，否则靠左对齐；对于文字位置大于中心点y坐标的基准设置在上方，否则在下方。以下是加上指标后的效果：
指标
绘制数据
最后，我们将数据绘制到图表上。首先，我们要确定所有数据的最大值，如果最大值大于10，那么取10的倍数。然后同画“蜘蛛网”一样，将各个数据点的半径根据相对于最大值比例换算出来，然后绘制在图表上。
// draw data
var MaxValue = Math.max.apply(null, that.options.data[0].value);
that.options.data.forEach(function(val) { var temp = Math.max.apply(null, val.value); if (temp > MaxValue) MaxValue = temp;
}); if (MaxValue > 10) {
MaxValue = Math.ceil(MaxValue / 10) * 10
}
that.options.data.forEach(function(val) {
context.beginPath();
context.setStrokeStyle(val.color); var currentRad = radius * val.value[0] / MaxValue * step / MaxStep;
context.moveTo(center.x, center.y - currentRad); var currentAngle = -Math.PI / 2; for (var i = 0; i < length; i++) {
currentRad = radius * val.value[i] / MaxValue * step / MaxStep;
context.lineTo(center.x + currentRad * Math.cos(currentAngle), center.y + currentRad * Math.sin(currentAngle));
currentAngle += angle;
}
currentRad = radius * val.value[0] / MaxValue * step / MaxStep;
context.lineTo(center.x, center.y - currentRad);
context.stroke(); if (that.options.area) {
context.setFillStyle(val.color);
context.setGlobalAlpha(0.5);
context.fill();
}
context.closePath();
});
context.draw();以下就是添加数据后的完整效果：
数据
添加绘制动画
为了显示效果更佳，我们可以给绘制图表加上动画，具体实现如下：
var angle = Math.PI * 2 / length; var step = 1; var MaxStep = that.options.animation ? 50 : 1; var animation = function() { if (step <= MaxStep) { // draw background
for (var layer = 5; layer > 0; layer--) {
context.beginPath();
context.setGlobalAlpha(1);
context.setStrokeStyle("#D3D3D3"); if (layer % 2 != 0) {
context.setFillStyle("white");
} else {
context.setFillStyle("#F5F5F5");
} var currentRad = layer / 5 * radius;
context.moveTo(center.x, center.y - currentRad); var currentAngle = -Math.PI / 2; for (var i = 0; i < length; i++) {
context.lineTo(center.x + currentRad * Math.cos(currentAngle), center.y + currentRad * Math.sin(currentAngle));
currentAngle += angle;
}
context.fill();
context.closePath();
context.stroke();
} // draw Axis
context.beginPath(); var currentAngle = -Math.PI / 2; for (var i = 0; i < length; i++) {
context.moveTo(center.x + radius * Math.cos(currentAngle), center.y + radius * Math.sin(currentAngle));
context.lineTo(center.x, center.y);
currentAngle += angle;
}
context.closePath();
context.stroke(); // draw Index
context.beginPath();
context.setFillStyle("#D3D3D3");
context.setFontSize(14); var currentAngle = -Math.PI / 2; for (var i = 0; i < length; i++) { var posX = center.x + radius * Math.cos(currentAngle); var posY = center.y + radius * Math.sin(currentAngle); if (posX < center.x) context.setTextAlign("right"); else context.setTextAlign("left"); if (posY > center.y) context.setTextBaseline("top"); else context.setTextBaseline("bottom");
context.fillText(that.options.xLabel[i], posX, posY);
currentAngle += angle;
}
context.closePath(); // draw data
var MaxValue = Math.max.apply(null, that.options.data[0].value);
that.options.data.forEach(function(val) { var temp = Math.max.apply(null, val.value); if (temp > MaxValue) MaxValue = temp;
}); if (MaxValue > 10) {
MaxValue = Math.ceil(MaxValue / 10) * 10
}
that.options.data.forEach(function(val) {
context.beginPath();
context.setStrokeStyle(val.color); var currentRad = radius * val.value[0] / MaxValue * step / MaxStep;
context.moveTo(center.x, center.y - currentRad); var currentAngle = -Math.PI / 2; for (var i = 0; i < length; i++) {
currentRad = radius * val.value[i] / MaxValue * step / MaxStep;
context.lineTo(center.x + currentRad * Math.cos(currentAngle), center.y + currentRad * Math.sin(currentAngle));
currentAngle += angle;
}
currentRad = radius * val.value[0] / MaxValue * step / MaxStep;
context.lineTo(center.x, center.y - currentRad);
context.stroke(); if (that.options.area) {
context.setFillStyle(val.color);
context.setGlobalAlpha(0.5);
context.fill();
}
context.closePath();
});
context.draw();
step++;
} else {
clearInterval(aniName);
}
} var aniName = setInterval(animation, 10);
作者：Jiao123
链接：https://www.jianshu.com/p/b889c69f9761
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦