微信小程序雷达图

手机上测试效果：

主要参考网站：

http://blog.csdn.net/lecepin/article/details/60466711

但是有些地方不适用在小程序上，需要修改以下几点

1，函数的修改；比如将ctx.strokeStyle = mColorPolygon;修改为ctx.setStrokeStyle(mColorPolygon);将ctx.fillStyle = mColorText;修改为ctx.setFillStyle(mColorText);

2，要让雷达图自适应页面大小。需要修改canvas宽高，将宽高设置为屏幕的宽高

var sys = wx .getSystemInfoSync ();//获取设备信息

var mW = sys .windowWidth ;

var mH = sys .windowHeight ;

3，给雷达图加动画

使用setinterval循环修改x.y值进行画图

that .Interval = setInterval ( function () {

if (precent <= 1 ) {

that .drawRegion (ctx ); //画数据区域块

} else {

clearInterval (that .Interval );

}

}, spaceTime );

4.圆形图片

另起一个canvas，使用circleImg方法

整体代码：

wxss文件

.canvasCon {

margin: 0 auto ;

margin-top: 50 rpx ;

height: 670 rpx ;

}

.canvas {

margin: 0 auto ;

position: absolute ;

left: 50% ;

transform: translateX( -50% ) ;

}

wxml文件

< view class= 'canvasCon' bindtap= 'clickCanvas' >

< canvas class= "canvas" canvas-id= "radarcanvas1" disable-scroll= "false" style= "width:{ {canvasW}}rpx; height:{ {canvasH}}rpx;" / >

< canvas class= "canvas" canvas-id= "radarcanvas2" disable-scroll= "false" style= "width:{ {canvasW}}rpx; height:{ {canvasH}}rpx;" / >

< canvas class= "canvas" canvas-id= "radarcanvas3" disable-scroll= "false" style= "width:{ {canvasW}}rpx; height:{ {canvasH}}rpx;" / >

< canvas class= "canvas" canvas-id= "radarcanvas4" disable-scroll= "false" style= "width:{ {canvasW}}rpx; height:{ {canvasH}}rpx;" / >

< canvas class= "canvas" canvas-id= "radarcanvas5" disable-scroll= "false" style= "width:{ {canvasW}}rpx; height:{ {canvasH}}rpx;" / >

</ view >

js文件

// pages/test/test.js

// start雷达图初始化数据

var sys = wx .getSystemInfoSync ();

var windowWidth = sys .windowWidth ;

var mW = sys .windowWidth * 0.85 ;

var mH = sys .windowHeight * 0.85 ;

var mdData = [[ '甜美' , 30 ], [ '时尚' , 20 ], [ '帅气' , 20 ], [ '典雅' , 30 ], [ '摩登' , 40 ], [ '文雅' , 50 ], [ '浪漫' , 90 ], [ '自然' , 50 ]]; //内心

var mdData2 = [[ '甜美' , 70