微信小程序绘制雷达图（多边形绘制）

最新推荐文章于 2024-07-20 15:37:01 发布

踏着阳光

最新推荐文章于 2024-07-20 15:37:01 发布

阅读量1.8k

点赞数 1

分类专栏：小程序

本文链接：https://blog.csdn.net/qq_35014708/article/details/104762749

版权

本文介绍了如何在微信小程序中利用JavaScript和WXML进行雷达图的绘制，详细讲解了绘制多边形的步骤，并附带实际操作效果展示。

摘要由CSDN通过智能技术生成

WXML

<canvas canvas-id="canvas" class="canvas" style="width: 700rpx; height: 600rpx;background:#fff;;"/>

const app = getApp()

Page({
  data: {},
  onLoad: function () {
    // 能力值数据
    const mData = [
      { title: "a", score: 10, fullScore: 10 },
      { title: "b", score: 9, fullScore: 10 },
      { title: "c", score: 6, fullScore: 10 },
      { title: "d", score: 6, fullScore: 10 },
      { title: "e", score: 7, fullScore: 10 },
      { title: "f", score: 6, fullScore: 10 },
    ];
    this.init(mData);
  },

  getRatio() {
    let systemInfo = wx.getSystemInfoSync();
    let ratio = 750 / systemInfo.windowWidth; // rpx/px比例
    return ratio;
  },

  init(mData) {
    const L_RADIUS = 244 / this.getRatio(); // 大圆半径
    const LINE_WIDTH = 2 / this.getRatio(); //线宽
    const ctx = wx.createCanvasContext("canvas");

    const canvasW = 700 / this.getRatio(); // canvas宽
    const canvasH = 600 / this.getRatio(); //canvas高
    //清空画布
    ctx.clearRect(0, 0, canvasW, canvasH);
    ctx.save();
    // 重新映射 canvas的 (0, 0)，映射的结果是让canvas的坐标原点位于 canvas的中心位
    ctx.translate(canvasW / 2, canvasH / 2);
    // 多边形的边数
    const mCount =