Shulou(Shulou.com)06/01 Report--

What this article shares to you is about how WeChat Mini Programs realizes the radar map. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Radar map (Radar Chart), also known as Dabratu and Spider Chart, is a kind of financial analysis report. That is, the figures or ratios obtained from the financial analysis of a company are plotted on a round chart to show the financial ratios of a company. users can clearly understand the changes of the company's financial indicators and their good or bad trends.

Let's take a look at the effect picture first.

Begin to serve:

/ / .wxml, the next operation will draw / / .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 initialize the data: (I didn't write it in data) var numCount = 6 / / number of elements var numSlot = 5; / / Total number of nodes on a line var mW = 400; / / width of Canvas var mCenter = mW / 2; / / Center point var mAngle = Math.PI * 2 / numCount; / / Angle var mRadius = mCenter-60 / / Radius (the subtracted value is used to make room for the drawn text) / / get the specified Canvasvar radCtx = wx.createCanvasContext ("radarCanvas") / / .js simulates the data of both sides of the war data: {chanelArray1: [["achievements", 88], ["Survival", 30], ["Tuanzhan", 66], ["Development", 90], ["output", 95], ["advance", 88], chanelArray2: ["achievements" 24], [Survival, 60], [Tuanzhan, 88], [Development, 49], [output, 46], [push, 92]}

When the basic data is ready, start drawing.

/ / first step: draw 6 sides of drawEdge: function () {radCtx.setStrokeStyle ("white") radCtx.setLineWidth (2) / / set lineweight 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 & & mAngle * n Math.PI & & mAngle * n

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.