小程序canvas画雷达图

最新推荐文章于 2024-08-19 11:01:44 发布

Rechal_Mei

最新推荐文章于 2024-08-19 11:01:44 发布

阅读量1.9k

点赞数 5

分类专栏：小程序文章标签： canvas画圆

本文链接：https://blog.csdn.net/Rechal_Mei/article/details/83625434

版权

本文介绍了如何在小程序中使用canvas画出雷达图。通过展示基础数据、绘制六边形和圆，逐步解析了实现过程，参考并改编自其他博客，适配了小程序的特性。

摘要由CSDN通过智能技术生成

首先，我们先看一下效果图

雷达图（Radar Chart），又可称为戴布拉图、蜘蛛网图（Spider Chart），是财务分析报表的一种。即将一个公司的各项财务分析所得的数字或比率，就其比较重要的项目集中划在一个圆形的图表上，来表现一个公司各项财务比率的情况，使用者能一目了然的了解公司各项财务指标的变动情形及其好坏趋向。

这边文章参考了https://www.jianshu.com/p/598b55aae7b7的博客，我拿到以后稍加修改了一些地方，变成了我想要的雷达图

类似这样的雷达图，用html5写和小程序写也是有一些不一样的

那么开始上菜

wxml

<view class='radarContainer'>
<canvas class='radarCanvas' canvas-id='radarCanvas'></canvas>
</view>

wxss

.radarContainer{
     background: linear-gradient(#86d0d0, #81e1b4);
   width:100%;
   height:420px;
   display: flex;
   justify-content:center;
    align-items: center; 
   position: relative;
   
}
.radarCanvas{
   width:400px;
   height:400px;
   margin: 0 auto;
   position: absolute;
}

js 准备基础数据，写在全局

var numCount = 6;  //元素个数（6条边）
var numSlot = 5;  //一条线上的总节点数
var mW = 400;  //Canvas的宽度
var mCenter = mW / 2; //中心点
var mAngle = Math.PI * 2 / numCount; //角度
var mRadius = mCenter - 60; //半径(减去的值用于给绘制的文本留空间)
//获取指定的Canvas
var radCtx = wx.createCanvasContext("radarCanvas")