免费国产欧美国日产_少妇AV一区二区三区无码_蜜桃精品av无码喷奶水小说_jk18禁网站视频_精产国品一二三级产品区别_被夫の上司に犯波多野结衣_78m成人手机免费看_最爽最刺激18禁视频_偷偷色噜狠狠狠狠的777米奇

易優(yōu)GEO 重磅上線 ~ 一站式GEO優(yōu)化工具，讓豆包、文心一言、DeepSeek 在回答中主動推薦你的品牌，搶占AI流量入口！  點擊查看

小程序模板網

微信小程序-雷達圖

發(fā)布時間：2018-05-30 11:35 所屬欄目：小程序開發(fā)教程

知識普及：

雷達圖（Radar Chart），又可稱為戴布拉圖、蜘蛛網圖（Spider Chart），是財務分析報表的一種。即將一個公司的各項財務分析所得的數字或比率，就其比較重要的項目集中劃在一個圓形的圖表上，來表現一個公司各項財務比率的情況，使用者能一目了然的了解公司各項財務指標的變動情形及其好壞趨向。

如果你想找到了解H5中怎么制作，可以看一下HTML5 Canvas制作雷達圖實戰(zhàn),我也是參考這篇文章，做了小程序的雷達圖，并做了一點延伸...


先來看看效果圖


開始上菜：


//.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;  //一條線上的總節(jié)點數
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  模擬對戰(zhàn)兩方的數據
  data: {
    chanelArray1:[["戰(zhàn)績",88],["生存",30],["團戰(zhàn)",66],["發(fā)育",90],["輸出",95],["推進",88]],
    chanelArray2: [["戰(zhàn)績", 24], ["生存", 60], ["團戰(zhàn)", 88], ["發(fā)育", 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);
        }

      }
    },



//繪制紅色數據區(qū)域(數據和填充顏色)
  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; //設置節(jié)點小圓點的半徑
 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:[["戰(zhàn)績",88],["生存",30],["團戰(zhàn)",66],["發(fā)育",90],["輸出",95],["推進",88]],
 chanelArray2: [["戰(zhàn)績", 24], ["生存", 60], ["團戰(zhàn)", 88], ["發(fā)育", 49], ["輸出", 46], ["推進", 92]]
  },

 /**
   * 生命周期函數--監(jiān)聽頁面初次渲染完成
   */
  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)
 //設置節(jié)點
 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();
  },
 //繪制數據區(qū)域(數據和填充顏色)
  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; //設置節(jié)點小圓點的半徑
 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();
        }

      }

})


易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://www.szcjxy.com/wxmini/doc/course/24488.html 復制鏈接 如需定制請聯系易優(yōu)客服咨詢： 點擊咨詢
在線客服