作者：焦作艾文斯 | 来源：互联网 | 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。
新人菜鸟第一次写，如果有错误希望各位指出，谢谢。
推荐阅读
-
尽管在WPF中工作了一段时间，但在菜单控件的样式设置上遇到了一些基础问题，特别是关于如何正确配置前景色和背景色。 ...
[详细]
蜡笔小新 2024-11-22 15:30:54
-
一、引言今天是2017年11月份的最后一天，也就是2017年11月30日，利用今天再写一个模式，争取下个月（也就是12月份& ...
[详细]
蜡笔小新 2024-11-22 19:45:55
-
-
在尝试加载支持推送通知的iOS应用程序的Ad Hoc构建时，遇到了‘no valid aps-environment entitlement found for application’的错误提示。本文将探讨此错误的原因及多种可能的解决方案。 ...
[详细]
蜡笔小新 2024-11-21 19:26:31
-
在AngularJS中，有时需要在表单内包含某些控件，但又不希望这些控件导致表单变为脏状态。例如，当用户对表单进行修改后，表单的$dirty属性将变为true，触发保存对话框。然而，对于一些导航或辅助功能控件，我们可能并不希望它们触发这种行为。 ...
[详细]
蜡笔小新 2024-11-24 13:01:59
-
神经网络的可视化在理论学习与实践应用中扮演着至关重要的角色。本文深入探讨了三种有效的CNN（卷积神经网络）可视化方法，旨在帮助读者更好地理解和优化模型。 ...
[详细]
蜡笔小新 2024-11-24 11:30:28
-
本文介绍了如何通过安装和配置php_uploadprogress扩展来实现文件上传时的进度条显示功能。通过一个简单的示例，详细解释了从安装扩展到编写具体代码的全过程。 ...
[详细]
蜡笔小新 2024-11-24 00:04:13
-
STM32代码编写STM32端不需要写关于连接MQTT服务器的代码，连接的工作交给ESP8266来做，STM32只需要通过串口接收和发送数据，间接的与服务器交互。串口三配置串口一已 ...
[详细]
蜡笔小新 2024-11-23 21:37:55
-
本文综述了视觉Transformer在计算机视觉领域的应用，从原始Transformer出发，详细介绍了其在图像分类、目标检测和图像分割等任务中的最新进展。文章不仅涵盖了基础的Transformer架构，还深入探讨了各类增强版Transformer模型的设计思路和技术细节。 ...
[详细]
蜡笔小新 2024-11-22 19:53:16
-
本文深入探讨了WPF框架下的数据验证机制，包括内置验证规则的使用、自定义验证规则的实现方法、错误信息的有效展示策略以及验证时机的选择，旨在帮助开发者构建更加健壮和用户友好的应用程序。 ...
[详细]
蜡笔小新 2024-11-22 09:44:38
-
本指南旨在帮助开发者在未使用CodeIgniter框架的情况下，如何独立使用其强大的图像处理功能，包括图像尺寸调整、创建缩略图、裁剪、旋转及添加水印等。 ...
[详细]
蜡笔小新 2024-11-20 19:57:35
-
本文详细介绍了如何在HTML前端开发中利用UINavigationController进行页面管理和数据传递，适合初学者和有一定基础的开发者学习。 ...
[详细]
蜡笔小新 2024-11-20 09:46:39
-
2020年9月15日，Oracle正式发布了最新的JDK 15版本。本次更新带来了许多新特性，包括隐藏类、EdDSA签名算法、模式匹配、记录类、封闭类和文本块等。 ...
[详细]
蜡笔小新 2024-11-14 12:11:09
-
本文将详细介绍如何在微信小程序的 app.json 文件中启用调试模式（debug），并通过实际案例展示其配置方法和应用场景。 ...
[详细]
蜡笔小新 2024-11-14 08:21:10
-
百度蛮多例子的,但是代码太长懒得看了前言要实现跑马灯主要就是获得判断开始定界和结束定界,1.9.3新增的wxml操作接口就可以拿到节点长宽等属性，当然你也可以直接用文字数量* ...
[详细]
蜡笔小新 2023-08-31 14:25:10
-
一、填空题（共17题，每题3分，总共51分）1.设有inta5,*b,**c,执行语句c&b,b&a后，**c的值为________答：5 ...
[详细]
蜡笔小新 2024-11-17 11:01:27
-
京公网安备 11010802041100号