微信小程序canvas图形制作-radar雷达图

    最近小程序很火，博主作为新人也去了解一下，发现小程序的确有其优势之处，就是还不是很完善，当然这是一个新的东西免不了存在各种问题，相信以后问题会减少。

    正文开始。

    在学习过程中我用微信canvas去画了一个雷达图，嘛，毕竟图形才是直观的数据体现。

    博主是采用的微信自主研发的类vue框架wepy来进行开发的，如果有不了解wepy的小伙伴可以去腾讯的wepy官方文档看看，较之原生的小程序框架还是有许多优点的。

    首先是确定canvas包括canvas的尺寸，微信小程序的canvas标签默认宽度为300px，高度为225px。

< style >

.radar-canvas {

width: 750rpx;

height: 650rpx;

}

</ style >

< template >

< view >

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

</ view >

</ template >

    然后是确定雷达图的中心坐标，这里可以直接获取当前屏幕的宽，然后除以2就是X坐标。Y坐标可以自行调整。

var windowW = wx. getSystemInfoSync(). windowWidth;

var centerPointX = windowW / 2;

var centerPointY = centerPointX;

    

    接着开始建立一些需要的雷达图数据。

data = {

radius: centerPointX - this. rpx( 200),