利用Canvas绘制雷达图

最新推荐文章于 2024-04-01 11:41:11 发布

VIP文章 MaterialCoder

最新推荐文章于 2024-04-01 11:41:11 发布

阅读量6.5k

点赞数 2

分类专栏： demo 文章标签： canvas 雷达图

本文链接：https://blog.csdn.net/github_39673115/article/details/78369409

版权

雷达图（蜘蛛网图）是一种常见的数据分析图表，本文采用canvas来绘制雷达图，并最终封装成一个小组件。首先来看一下最终的效果图：

如何画正多边形

以正五边形雷达图为例（其他任意正多边形也一样），如下图所示。Canvas画图的原点在左上角，以r为半径，(r, r)为圆心作圆，作为正五边形的外接圆，则正五边形每条边所对应的圆心角均为 rad = 2*Math.PI/5。再根据正余弦可以求得每个定点所对应的坐标，这样一个正五边形就可以画出来了。

下面进行具体的代码实现。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas绘制雷达图</title>
    <style>
        body, html, div{
            margin: 0;
            padding: 0;
        }
        .container {
            width: 300px;
            height: 300px;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div class="container" id="container"></div>
</body>
</html>

基本样式和模拟数据

var container = document.getElementById('container');
var cans = documen

最低0.47元/天解锁文章

MaterialCoder

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
利用Canvas绘制雷达图

雷达图（蜘蛛网图）是一种常见的数据分析图表，本文采用canvas来绘制雷达图，并最终封装成一个小组件。首先来看一下最终的效果图：如何画正多边形以正五边形雷达图为例（其他任意正多边形也一样），如下图所示。Canvas画图的原点在左上角，以r为半径，(r, r)为圆心作圆，作为正五边形的外接圆，则正五边形每条边所对应的圆心角均为 rad = 2*Math.PI/5。再根据正余弦可以求得每个定点所
复制链接

扫一扫