手机上测试效果:
主要参考网站:
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