How to realize Radar Diagram by WeChat Mini Programs

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