微信小程序 canvas绘制雷达图

微信小程序canvas画布中动态绘制雷达图的主要思路：

（1）雷达图是在一个圆中绘制实现，将圆从圆心分成四部分，0-90，90-180,180-270，270-360（0），分界线单独拿出来考虑；

（2）数据的属性个数，决定雷达图的分支数，结合最大属性值（圆的半径）将雷达图属性线画出和属性名称标出，三角函数计算坐标；

（3）雷达图的属性值决定图形，在画好的雷达网状图中，根据各个属性值（圆的半径）用三角函数计算出坐标，并连成图；

（4）定初始的属性的分支为刻度线，并标上刻度

具体实现在js代码中，写的有点粗略，但是雷达图不是很难画的图，应该不难理解

wxml页面

<canvas class="canvas" canvas-id="radarcanvas" disable-scroll="false" />

js界面

//数据由上一页面传递过来，在页面onLoad函数中获得
	//属性
        var arrayQuality = new Array();
        arrayQuality = options.qualityArray.split(',');
        //属性值
        var arrayScore = new Array();
        arrayScore = options.scoreArray.split(',');
        //画布
        const ctx = wx.createCanvasContext('radarcanvas');
        //属性数量
        var len = arrayQuality.length;
        //存储每个属性值坐标
        var coordinatesArray = new Array(len);
        //雷达图画维度线、维度线名称 
        ctx.setStrokeStyle('gray');
        ctx.setFontSize(12);
        for (var i = 0; i < len; i++) {
            ctx.moveTo(150, 150)
            if (2 * Math.PI * i / len