小程序canvas画雷达图

最新推荐文章于 2022-06-20 15:03:27 发布
最新推荐文章于 2022-06-20 15:03:27 发布
阅读量1.9k 收藏 6
点赞数 5
分类专栏： 小程序 文章标签： canvas画圆
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rechal_mei/article/details/83625434
版权

首先， 我们先看一下效果图

雷达图（Radar Chart），又可称为戴布拉图、蜘蛛网图（Spider Chart），是财务分析报表的一种。即将一个公司的各项财务分析所得的数字或比率，就其比较重要的项目集中划在一个圆形的图表上，来表现一个公司各项财务比率的情况，使用者能一目了然的了解公司各项财务指标的变动情形及其好坏趋向。

这边文章参考了https://www.jianshu.com/p/598b55aae7b7的博客，我拿到以后稍加修改了一些地方，变成了我想要的雷达图

类似这样的雷达图，用html5写和小程序写也是有一些不一样的

那么开始上菜

wxml

<view class='radarContainer'>
<canvas class='radarCanvas' canvas-id='radarCanvas'></canvas>
</view>

wxss

.radarContainer{
     background: linear-gradient(#86d0d0, #81e1b4);
   width:100%;
   height:420px;
   display: flex;
   justify-content:center;
    align-items: center; 
   position: relative;
   
}
.radarCanvas{
   width:400px;
   height:400px;
   margin: 0 auto;
   position: absolute;
}

js 准备基础数据，写在全局

var numCount = 6;  //元素个数（6条边）
var numSlot = 5;  //一条线上的总节点数
var mW = 400;  //Canvas的宽度
var mCenter = mW / 2; //中心点
var mAngle = Math.PI * 2 / numCount; //角度
var mRadius = mCenter - 60; //半径(减去的值用于给绘制的文本留空间)
//获取指定的Canvas
var radCtx = wx.createCanvasContext("radarCanvas")
data: {
    chanelArray1: [["战绩", 50], ["生存", 10], ["团战", 56], ["发育", 90], ["输出", 95], ["推进", 50]],
    chanelArray2: [["战绩", 24], ["生存", 60], ["团战", 88], ["发育", 49], ["输出", 46], ["推进", 92]],
    chanelArray3: [["战绩", 88], ["生存", 40], ["团战", 82], ["发育", 41], ["输出", 46], ["推进", 92]]
  },

基础数据准备完毕

开始画图，先画一个六边形

 // 绘制6条边
  drawEdge: function () {
    radCtx.setStrokeStyle("white")
    radCtx.setLineWidth(2)  //设置线宽
    for (var i = 0; i < numSlot; i++) {
      //计算半径
      radCtx.beginPath()
      var rdius = mRadius / numSlot * (i + 1)
      //画6条线段
      for (var j = 0; j < numCount; j++) {
        //坐标
        var x = mCenter + rdius * Math.cos(mAngle * j);
        var y = mCenter + rdius * Math.sin(mAngle * j);
        radCtx.lineTo(x, y);
      }
      radCtx.closePath()
      radCtx.stroke()
    }
  },

 

画圆

  // / 第一步：绘制6个圆，可以通过修改numSlot的数的大小，来确定绘制几个圆
  drawArcEdge: function () {
    radCtx.setStrokeStyle("white")
    radCtx.setLineWidth(2)  //设置线宽
    for (var i = 0; i < numSlot; i++) {
      //计算半径
      radCtx.beginPath()
      var rdius = mRadius / numSlot * (i + 1)
      //画6条线段
      for (var j = 0; j < numSlot; j++) {
        // //计算半径
        radCtx.beginPath()
        var rdius = mRadius / numSlot * (i + 1)  //计算每个圆的半径
        radCtx.arc(mCenter, mCenter, rdius, 0, 2 * Math.PI) //开始画圆
        // radCtx.stroke()
      }
      radCtx.closePath()
      radCtx.stroke()
    }
  },

 接下来的方法不变，所以我上js全部完整代码

var numCount = 6;  //元素个数
var numSlot = 5;  //一条线上的总节点数
var mW = 400;  //Canvas的宽度
var mCenter = mW / 2; //中心点
var mAngle = Math.PI * 2 / numCount; //角度
var mRadius = mCenter - 60; //半径(减去的值用于给绘制的文本留空间)
//获取指定的Canvas
var radCtx = wx.createCanvasContext("radarCanvas")
Page({

  /**
   * 页面的初始数据
   */
  data: {
    chanelArray1: [["战绩", 50], ["生存", 10], ["团战", 56], ["发育", 90], ["输出", 95], ["推进", 50]],
    chanelArray2: [["战绩", 24], ["生存", 60], ["团战", 88], ["发育", 49], ["输出", 46], ["推进", 92]],
    chanelArray3: [["战绩", 88], ["生存", 40], ["团战", 82], ["发育", 41], ["输出", 46], ["推进", 92]]
  },
  

  // 雷达图
  drawRadar: function () {
    var sourceData1 = this.data.chanelArray1
    var sourceData2 = this.data.chanelArray2
    var sourceData3 = this.data.chanelArray3
    //调用
    this.drawEdge() //画六边形
    // this.drawArcEdge() //画圆
    this.drawLinePoint()
    //设置数据
    this.drawRegion(sourceData1, 'rgba(255, 0, 0, 0.5)') //第一个人的
    this.drawRegion(sourceData2, 'rgba(255, 200, 0, 0.5)') //第二个人
    this.drawRegion(sourceData3, 'rgba(122, 202, 254, 0.5)') //第三个人
    //设置文本数据
    this.drawTextCans(sourceData1)
    //设置节点
    this.drawCircle(sourceData1, 'red')
    // this.drawCircle(sourceData2, 'yellow')
    //开始绘制
    radCtx.draw()
  },
  // 绘制6条边
  drawEdge: function () {
    radCtx.setStrokeStyle("white")
    radCtx.setLineWidth(2)  //设置线宽
    for (var i = 0; i < numSlot; i++) {
      //计算半径
      radCtx.beginPath()
      var rdius = mRadius / numSlot * (i + 1)
      //画6条线段
      for (var j = 0; j < numCount; j++) {
        //坐标
        var x = mCenter + rdius * Math.cos(mAngle * j);
        var y = mCenter + rdius * Math.sin(mAngle * j);
        radCtx.lineTo(x, y);
      }
      radCtx.closePath()
      radCtx.stroke()
    }
  },
    // / 第一步：绘制6个圆，可以通过修改numSlot的数的大小，来确定绘制几个圆
  drawArcEdge: function () {
    radCtx.setStrokeStyle("white")
    radCtx.setLineWidth(2)  //设置线宽
    for (var i = 0; i < numSlot; i++) {
      //计算半径
      radCtx.beginPath()
      var rdius = mRadius / numSlot * (i + 1)
      //画6条线段
      for (var j = 0; j < numSlot; j++) {
        // //计算半径
        radCtx.beginPath()
        var rdius = mRadius / numSlot * (i + 1)  //计算每个圆的半径
        radCtx.arc(mCenter, mCenter, rdius, 0, 2 * Math.PI) //开始画圆
        // radCtx.stroke()
      }
      radCtx.closePath()
      radCtx.stroke()
    }
  },

  // 绘制连接点
  drawLinePoint: function () {
    radCtx.beginPath();
    for (var k = 0; k < numCount; k++) {
      var x = mCenter + mRadius * Math.cos(mAngle * k);
      var y = mCenter + mRadius * Math.sin(mAngle * k);

      radCtx.moveTo(mCenter, mCenter);
      radCtx.lineTo(x, y);
    }
    radCtx.stroke();
  },
  //绘制数据区域(数据和填充颜色)
  drawRegion: function (mData, color) {

    radCtx.beginPath();
    for (var m = 0; m < numCount; m++) {
      var x = mCenter + mRadius * Math.cos(mAngle * m) * mData[m][1] / 100;
      var y = mCenter + mRadius * Math.sin(mAngle * m) * mData[m][1] / 100;

      radCtx.lineTo(x, y);
    }
    radCtx.closePath();
    radCtx.setFillStyle(color)
    radCtx.fill();
  },

  // //绘制文字
  drawTextCans: function (mData) {

    radCtx.setFillStyle("white")
    radCtx.font = 'bold 17px cursive'  //设置字体
    for (var n = 0; n < numCount; n++) {
      var x = mCenter + mRadius * Math.cos(mAngle * n);
      var y = mCenter + mRadius * Math.sin(mAngle * n);
      // radCtx.fillText(mData[n][0], x, y);
      //通过不同的位置，调整文本的显示位置
      if (mAngle * n >= 0 && mAngle * n <= Math.PI / 2) {
        radCtx.fillText(mData[n][0], x + 5, y + 5);
      } else if (mAngle * n > Math.PI / 2 && mAngle * n <= Math.PI) {
        radCtx.fillText(mData[n][0], x - radCtx.measureText(mData[n][0]).width - 7, y + 5);
      } else if (mAngle * n > Math.PI && mAngle * n <= Math.PI * 3 / 2) {
        radCtx.fillText(mData[n][0], x - radCtx.measureText(mData[n][0]).width - 5, y);
      } else {
        radCtx.fillText(mData[n][0], x + 7, y + 2);
      }

    }
  },
  //画点
  drawCircle: function (mData, color) {
    var r = 3; //设置节点小圆点的半径
    for (var i = 0; i < numCount; i++) {
      var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
      var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

      radCtx.beginPath();
      radCtx.arc(x, y, r, 0, Math.PI * 2);
      radCtx.fillStyle = color;
      radCtx.fill();
    }

  },


 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //雷达图
    this.drawRadar()
  },
  

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    //雷达图
  
    // this.drawEdge();
    // this.drawLinePoint();
    // this.drawTextCans();
    // this.drawCircle();
  },

#ending#

Rechal_Mei
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
微信小程序canvas图形制作-radar雷达图
qq_36840434的博客
03-29 3935
    最近小程序很火，博主作为新人也去了解一下，发现小程序的确有其优势之处，就是还不是很完善，当然这是一个新的东西免不了存在各种问题，相信以后问题会减少。    正文开始。    在学习过程中我用微信canvas去画了一个雷达图，嘛，毕竟图形才是直观的数据体现。    博主是采用的微信自主研发的类vue框架wepy来进行开发的，如果有不了解wepy的小伙伴可以去腾讯的wepy官方文档看看，较之原...
利用Canvas绘制雷达图
github_39673115的博客
10-27 6614
雷达图（蜘蛛网图）是一种常见的数据分析图表，本文采用canvas来绘制雷达图，并最终封装成一个小组件。首先来看一下最终的效果图： 如何画正多边形以正五边形雷达图为例（其他任意正多边形也一样），如下图所示。Canvas画图的原点在左上角，以r为半径，(r, r)为圆心作圆，作为正五边形的外接圆，则正五边形每条边所对应的圆心角均为 rad = 2*Math.PI/5。再根据正余弦可以求得每个定点所
微信小程序学习用demo：使用canvas绘制雷达图
03-15
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
Canvas 绘制雷达图
weixin_34194087的博客
05-28 762
最近做的一个需求，场景之一是绘制一个雷达图，找了一圈，似乎 AntV 下的 F2 很适合拿来主义： 但是接着又考虑了一下，我当前所做的项目并不是可视化项目，今后大概率也不会有这种可视化图表的需求，只是为了单个需求一两个图表就引入一个可视化库，性价比有点低，辛辛苦苦优化下来的代码体积，就因为一个冗余的代码库一下子回到解放前，那可真要不得（虽然 F2已经够精简的了） 再加上我刚好对于 canvas这...
微信小程序canvas绘制雷达图
liya_nan的博客
09-22 2885
效果图展示： 代码实现（具体实现）： github地址：https://github.com/Yana5417/Radar/ 调用： // 画雷达图 drawRadar() { const categories = ['故事绘本', '英语教育', '数学教育', '科学教育', '情商教育', '通识教育']; const data = [4, 11, 3,...
radarCanvas:微信小程序 雷达图组件 component
05-10
微信小程序组件 radarCanvas wxml中使用 组件在wxml中使用： 建议放在wxml底部，可任意放置 雷达图image组件显示： radarCanvas中根据Id维护雷达图canvas，返回image参数来回显雷达图，Page中需维护image，本例中用变量名currentRadarImage来表示。 radarCanvas组件入参 1、aspectCanvas: { canvasWidth: 392, canvasHeight: 366, fontSize: 40, categories：['智商', '高贵', '暖心', '吃货', '颜值'], MaxDimension:5 } aspectCanvas：画雷达图canvas需要传入的基本绘制参数 canvasWidht：宽 canv
微信小程序Canvas绘制曲线图、饼图、柱状图、雷达图/蛛网图源码
01-31
微信小程序Canvas绘制曲线图、饼图、柱状图、雷达图/蛛网图源码
Canvas绘制正五边形雷达图
12-28
Canvas绘制正五边形雷达图，代码简单，需要的朋友可以下载后自己修改。
微信小程序-雷达图
03-29
如果你想找到了解H5中怎么制作，可以看一下HTML5 Canvas制作雷达图实战,我也是参考这篇文章，做了小程序的雷达图，并做了一点延伸... 先来看看效果图 (此图片来源于网络，如有侵权，请联系删除! ) 开始上菜： //....
雷达图canvas
唐僧的专栏
06-20 463
手写雷达图
html5 canvas 画雷达图. 实现内部元素的click，mousemove，mouseout事件.
12-11
基于html5,canvas技术.全代码手把手画雷达图，实现内部元素的点击，浮动等事件，比echarts功能更强大.
微信小程序开发-手绘雷达图案例源码.zip
08-15
微信小程序开发-手绘雷达图案例源码.zip
wxchart微信小程序图表组件柱状图折线图饼图雷达图
08-10
wxchart 微信小程序，图表组件（柱状图、折线图、饼图、雷达图...）
微信小程序-小程序canvas绘制高铁线路图
08-06
wxapp-Gline 小程序canvas绘制高铁线路图 效果图
微信小程序：实现canvas绘制地图及简单拖动
03-17
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
小程序 雷达图
qq_25239049的博客
08-27 523
有些数据不需要可以不填 如region、text、score 直接写入可能不能直接运行 需要自己看着改下 把不需要得数据删了 //初始化数据 // var numCount = 5; //元素个数 var sys = wx.getSystemInfoSync(); var windowWidth = sys.windowWidth; var numSlot = 4; //一条线上的总节点数 var...
wx小程序雷达图
daengwei的博客
03-28 2225
1、看定义 雷达图（Radar Chart），又可称为戴布拉图、蜘蛛网图（Spider Chart），是财务分析报表的一种。雷达图是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多变量数据的图形方法。轴的相对位置和角度通常是无信息的。 雷达图也称为网络图，蜘蛛图，星图，蜘蛛网图，不规则多边形，极坐标图或Kiviat图。它相当于平行坐标图，轴径向排列。 在 心理测评全系统设计与代码实现 一文中绘制了雷达图， 这是将代码分享出来，希望对大家有所帮助。 2、上效果图 3、上代码 这里只定
小程序+echarts制作雷达图
m0_66863149的博客
05-17 1244
微信小程序引入echars参考文档： https://echarts.apache.org/handbook/zh/how-to/cross-platform/wechat-app wxml: <view class='box'> <ec-canvas id="chart" canvas-id="chart" ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas> </view> j...
小程序canvas实现多边形，雷达图，蜘蛛图
qq_43559271的博客
12-17 553
canvas绘制，多边形，雷达图，蜘蛛图，组件封装，可生成任意多边形，小程序
微信小程序canvas组件 画光谱图
最新发布
03-27
下面是一个简单的微信小程序canvas组件画光谱图的实例： wxml代码： ```html <canvas id="canvas" style="width: 100%; height: 300px;"></canvas> ``` js代码： ```javascript Page({ onReady: function () { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值