pp电子

登录

免费开通

微信小程序实现雷达图的方式,小程序雷达图怎么做

—— 2018 ——

05/21

00:00

泉源：

作者：未知

栏目：小程序开发

2018/5/21 0:00:00 泉源：不详作者：未知

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

若是你想找到相识H5中怎么制作，，，，，，可以看一下HTML5 Canvas制作雷达图实战,我也是参考这篇文章，，，，，，做了小程序的雷达图，，，，，，并做了一点延伸...

先来看看效果图

微信小程序实现雷达图的方式,小程序雷达图怎么做

最先上菜：

//.wxml ,接下来的操作将在这个Canvas上面绘制

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

//.wxss
.radarContainer{
   background-color: black;
   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
初始化数据：(我没写在data中)
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")

//.js  模拟对战两方的数据
  data: {
    chanelArray1:[["战绩",88],["生涯",30],["团战",66],["发育",90],["输出",95],["推进",88]],
    chanelArray2: [["战绩", 24], ["生涯", 60], ["团战", 88], ["发育", 49], ["输出", 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()
   } 
 },

// 第二步：绘制毗连点
  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();
  },

//第三步：绘制文字（文字位置可能需要微调）
    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);
        }

      }
    },

//绘制红色数据区域(数据和填充颜色)
  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();
    },

//画点
    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();
        }
    }

重复四五步的要领添加另一方的雷达图

.js文件完整内容如下



var numCount = 6;
var numSlot = 5;
var mW = 400;
var mH = 400;
var mCenter = mW / 2; //中心点
var mAngle = Math.PI * 2 / numCount; //角度
var mRadius = mCenter - 60; //半径(减去的值用于给绘制的文本留空间)
//获取Canvas
var radCtx = wx.createCanvasContext("radarCanvas")


Page({

 /**
   * 页面的初始数据
   */
  data: {
 stepText:5,
 chanelArray1:[["战绩",88],["生涯",30],["团战",66],["发育",90],["输出",95],["推进",88]],
 chanelArray2: [["战绩", 24], ["生涯", 60], ["团战", 88], ["发育", 49], ["输出", 46], ["推进", 92]]
  },

 /**
   * 生命周期函数--监听页面首次渲染完成
   */
  onReady: function () {

 //雷达图
 this.drawRadar()

  },
 // 雷达图
  drawRadar:function(){
 var sourceData1 = this.data.chanelArray1
 var sourceData2 = this.data.chanelArray2

 //挪用
 this.drawEdge()
 this.drawLinePoint()
 //设置数据
 this.drawRegion(sourceData1,'rgba(255, 0, 0, 0.5)') //第一个人的
 this.drawRegion(sourceData2, 'rgba(255, 200, 0, 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()
    } 
  },
 // 绘制毗连点
  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();
        }

      }

})

【本站声明】
1、本站文章中所选用的图片及文字泉源于网络以及用户投稿，，，，，，由于未联系到知识产权人或未发明有关知识产权的挂号，，，，，，若有知识产权人并不肯意我们使用，，，，，，若是有侵权请连忙联系。。。
2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真，，，，，，仅系客观性形貌，，，，，，如您需要相识该类商品/服务详细的资讯，，，，，，请您直接与该类商品/服务的提供者联系。。。

KESION pp电子软件
KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商，，，，，，恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。
KESION 一直通过手艺立异，，，，，，提供产品和服务，，，，，，助力企业向数字化转型，，，，，，通过科技驱动商业刷新，，，，，，让商业变得更智慧！

▼点击进入pp电子官网相识更多

热门标签

微信小程序 SaaS

上/下篇

小程序监控接口开发文档

小程序新增自界说营业数据监控功效。。。？？？⒄呖勺越缢导嗫厥萆媳，，，，，，在小程序治理后台设置告警战略，，，，，，并启用微信告警通知。。。...

SaaS 2018/5/21 0:00:00
使用mpvue开发微信小程序

以离线包方式下载到外地，，，，，，通过微信客户端载入和启动 mpvue 设计 vue.js 能通过 vue-cli 提供 quick start 示例代码组件机制小程序逻辑和视图层代码相互疏散，，，，，，...

微信小程序SaaS 2018/5/21 0:00:00

换一换相关推荐

精选内容

热门精选

运营学院
模板超市
课程超市
授权盘问
下载体验
资质办理服务
手艺论坛

© 2006-2026 pp电子版权所有

ICP证闽B2-20190777 闽ICP备06009871号-1 JdPFEevTjyc2gv0eqUhR+TZ0r6FNfW8rjQju4bIixlNWoxViStHHLcXeCAIttKrJsbXY0hzT2KM0EQovG3f6IszmdycbiD4+09Zt81Jtjk15+yLm9NtJUr0qTyxvOf53dkeWWqyk4cqk0KW0HISNBvNLwgrbW4OugAAAAASUVORK5CYII=

JdPFEevTjyc2gv0eqUhR+TZ0r6FNfW8rjQju4bIixlNWoxViStHHLcXeCAIttKrJsbXY0hzT2KM0EQovG3f6IszmdycbiD4+09Zt81Jtjk15+yLm9NtJUr0qTyxvOf53dkeWWqyk4cqk0KW0HISNBvNLwgrbW4OugAAAAASUVORK5CYII=

闽公网安备 35020302001540号统一社会信用代码：91350206MA2XN2XQ4A 国家高新手艺企业编号：GR201735100465 软件企业证书号：厦RQ-2017-0034 软件产品证书号：厦RC-2017-0005 认证同盟企业编号：928180109031687687593 国际权威认证：信息手艺服务治理系统标准（ISO 20000）信息清静治理系统国际认证（ISO/IEC 27001）

pp电子·模拟器(试玩游戏)官方网站

pp电子·模拟器(试玩游戏)官方网站

pp电子·模拟器(试玩游戏)官方网站

【网站地图】