作者：焦作艾文斯 | 来源：互联网 | 2023-02-02 09:14
最近小程序很火，博主作为新人也去了解一下，发现小程序的确有其优势之处，就是还不是很完善，当然这是一个新的东西免不了存在各种问题，相信以后问题会减少。 正文开始。 在学习过程
最近小程序很火，博主作为新人也去了解一下，发现小程序的确有其优势之处，就是还不是很完善，当然这是一个新的东西免不了存在各种问题，相信以后问题会减少。
正文开始。
在学习过程中我用微信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),//半径，减去的部分为文字留空位
radarData: [
{desc:"动漫",value:"0.6"},
{desc:"体育",value:"0.5"},
{desc:"旅游",value:"0.8"},
{desc:"游戏",value:"0.5"},
{desc:"学习",value:"0.3"}
]
};
现在开始写方法
第一步：画出多边形，边数根据radarData的长度来确定。
//draw polygon
drawPolygon(ctx, sideNum, angle) {
ctx.setStrokeStyle("rgb(83,139,81)");
var r = this.radius / 5; //单位半径
for (var i = 1; i <5; i++) {
ctx.beginPath();
var currR = r * (i + 1); //当前半径
for (
var j =
0; j
var x = centerPointX + currR *
Math.
cos(angle * j +
Math.PI /
3.3);
//Math.PI/3.3是为了调整图形的偏移量，可自行设置
var y = centerPointY + currR * Math.sin(angle * j + Math.PI / 3.3);
ctx.lineTo(x, y);
}
ctx.setLineDash([2, 2]); //虚线
ctx.closePath();
ctx.stroke();
}
}
第二步：绘制伞骨。
//draw rib
drawRib(ctx, sideNum, angle) {
ctx.setStrokeStyle("#cdcdcd");
ctx.beginPath();
for (
var i =
0; i
var x = centerPointX + this.radius * Math.cos(angle * i + Math.PI / 3.3);
var y = centerPointY + this.radius * Math.sin(angle * i + Math.PI / 3.3);
ctx.moveTo(centerPointX, centerPointY);
ctx.lineTo(x, y);
}
ctx.closePath();
ctx.stroke();
}
第三步：添加radar各方向的文字描述。
//add radar description
addTags(ctx, radarData, sideNum, angle) {
ctx.setFontSize(this.rpx(30));
ctx.setFillStyle("rgb(95, 153, 32)");
//确定文本位置，可以根据微信小程序文档中的具体方法来设置
for (
var i =
0; i
var x = parseInt(
centerPointX + this.radius * Math.cos(angle * i + Math.PI / 3.3)
);
var y = parseInt(
centerPointY + this.radius * Math.sin(angle * i + Math.PI / 3.3)
);
var center = parseInt(centerPointX);
var centerY = parseInt(centerPointY);
if (x
ctx.setTextAlign("left");
ctx.fillText(radarData[i].desc, x - this.rpx(120), y);
}
else if (x -
this.
rpx(
20) > center && y
ctx.setTextAlign("right");
ctx.fillText(radarData[i].desc, x + this.rpx(120), y);
} else if (y > centerY) {
ctx.setTextAlign("center");
ctx.fillText(radarData[i].desc, x, y + this.rpx(80));
} else {
ctx.setTextAlign("center");
ctx.fillText(radarData[i].desc, x, y - this.rpx(40));
}
}
}
第四步：绘制数据点。
//add dataPoint
addDataPoint(ctx, radarData, sideNum, angle) {
for (
var i =
0; i
var x = centerPointX + this.radius * Math.cos(angle * i + Math.PI / 3.3) * radarData[i].value;
var y = centerPointY + this.radius * Math.sin(angle * i + Math.PI / 3.3) * radarData[i].value;
ctx.beginPath();
ctx.arc(x, y, 3, 0, 2 * Math.PI);
ctx.setFillStyle("rgb(0, 91, 51)");
ctx.fill();
ctx.closePath();
}
}
第五步：连线并填充区域。
//line point
linePoint(ctx, radarData, sideNum, angle) {
ctx.setStrokeStyle("rgb(83, 139, 81)");
ctx.beginPath();
for (
var i =
0; i
var x =
centerPointX +
this.radius * Math.cos(angle * i + Math.PI / 3.3) * radarData[i].value;
var y =
centerPointY +
this.radius * Math.sin(angle * i + Math.PI / 3.3) * radarData[i].value;
ctx.lineTo(x, y);
}
ctx.closePath();
ctx.setFillStyle("rgba(0,91,51,0.2)");//填充色
ctx.fill();//填充
ctx.stroke();
}
最后看看效果
附完整代码：
github链接。
学习之后留下笔记，后续将会有更多的其它chart。
新人菜鸟第一次写，如果有错误希望各位指出，谢谢。
推荐阅读
-
这是奶爸码农第49篇原创文章，点击上方蓝字关注在两个月前，我开始了一次对国内各大互联网前端技术体系的探索之路。自己的技术视野也得到不断扩展， ...
[详细]
蜡笔小新 2023-08-18 15:50:12
-
蜡笔小新 2023-12-14 19:14:56
-
-
本文介绍了一个使用Vue实现的Demo商品管理的效果图及实现代码。 ...
[详细]
蜡笔小新 2023-12-10 15:14:25
-
本文详细介绍了Android中的坐标系以及与View相关的方法。首先介绍了Android坐标系和视图坐标系的概念，并通过图示进行了解释。接着提到了View的大小可以超过手机屏幕，并且只有在手机屏幕内才能看到。最后，作者表示将在后续文章中继续探讨与View相关的内容。 ...
[详细]
蜡笔小新 2023-12-10 13:13:29
-
mpvue-meituanmpvue-meituan是一款使用mpvue开发的实战小程序项目，完全仿制美团官方外卖点餐小程序开发而成，项目的框架结构完全 ...
[详细]
蜡笔小新 2023-09-01 15:02:18
-
Linux命令查询小程序中的WePY云开发实践-大家好，今天我来为大家分享一下，Linux命令查询小程序中的WePY云开发实践。WhyWePY首先，先分享一下为什么要选择WePY？ ...
[详细]
蜡笔小新 2023-08-28 23:17:28
-
大部分Web应用的富文本内容都是以HTML字符串的形式存储的，通过HTML文档去展示HTML内容自然没有问题。但是，在微信小程序(下文简称为「小程序」) ...
[详细]
蜡笔小新 2023-08-25 09:04:53
-
继微信正式推出微信小程序后，各个大厂陆续发布了各自的小程序平台——支付宝小程序、百度小程序、头条小程序，跨小程序平台开发也成为了众多小程序开发者要面临的问题。Antmove–小程序 ...
[详细]
蜡笔小新 2023-08-20 01:42:04
-
小程序概述APP和和H5的区别：原生APP是软件开发者开发后，直接在安卓或者iOS系统中直接运行的软件应用，功能强大，体验 ...
[详细]
蜡笔小新 2023-08-17 16:54:09
-
这几天空下来，整理了部分需求，简单的写了点文档，供大家学习，希望能提出宝贵意见哈1.小程序是什么？区别是什么？小程序是一种无需下载安装，即可使用的手机应用。只需要扫描二维码，或是搜 ...
[详细]
蜡笔小新 2023-08-10 17:35:05
-
Iamtryingtomakeaclassthatwillreadatextfileofnamesintoanarray,thenreturnthatarra ...
[详细]
蜡笔小新 2023-12-14 17:38:12
-
本文详细介绍了MySQL语句的使用方法，包括创建用户、授权、查询、修改等操作。通过连接MySQL数据库，可以使用命令创建用户，并指定该用户在哪个主机上可以登录。同时，还可以设置用户的登录密码。通过本文，您可以全面了解MySQL语句的使用方法。 ...
[详细]
蜡笔小新 2023-12-11 15:34:14
-
本文介绍了pack布局管理器在Perl/Tk中的使用方法及注意事项。通过调用pack()方法，可以控制部件在显示窗口中的位置和大小。同时，本文还提到了在使用pack布局管理器时，应注意将部件分组以便在水平和垂直方向上进行堆放。此外，还介绍了使用Frame部件或Toplevel部件来组织部件在窗口内的方法。最后，本文强调了在使用pack布局管理器时，应避免在中间切换到grid布局管理器，以免造成混乱。 ...
[详细]
蜡笔小新 2023-12-10 16:03:24
-
本文介绍了一个基于WeiPHP5.0开发的微信民众号商城/小顺序商城的开源项目，包括前端和后端的目录结构，以及所使用的技术栈。同时提供了项目的运行和打包方法，并分享了一些调试和开发经验。最后还附上了在线预览和GitHub商城源码的链接，以及加入前端交流QQ群的方式。 ...
[详细]
蜡笔小新 2023-12-09 08:45:47
-
小程序的名字必须和你微信注册的名称一模一样在后台注册好小程序。mp.wx-union.cn后台域名https。mp.wx-union.cn ...
[详细]
蜡笔小新 2023-10-17 13:53:34
-
京公网安备 11010802041100号