2018-08-29

工作 / 小程序

9 分钟读完 (大约 1403 个字)

微信小程序中绘制雷达图

¶前言

雷达图（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);

最终效果如下：
动画效果

¶结语

😊 以上就是在微信小程序中绘制雷达图的方法。如有兴趣了解更多，可以查看完整代码：https://github.com/chmini-app/CHCharts-wechat。

# html, 前端, 小程序