前言
雷达图（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);
最终效果如下：
动画效果
结语
以上就是在微信小程序中绘制雷达图的方法。如有兴趣了解更多，可以查看完整代码😊。
网友评论