HTML5 Canvas制作雷达图实战

雷达图又叫蜘蛛网图，是一种对各项数据查看很明显的表现图，在很多游戏中，对游戏中的每个角色的分析图一般也用这种图。

下面，用HTML5的Cavas来实现雷达图。

效果

一、创建Canvas

var mW = 400;

var mH = 400;

var mCtx = null;

var canvas = document.createElement('canvas');

document.body.appendChild(canvas);

canvas.height = mH;

canvas.width = mW;

mCtx = canvas.getContext('2d');

二、制作多边形背景

var mCount = 6; //边数

var mCenter = mW /2; //中心点

var mRadius = mCenter - 50; //半径(减去的值用于给绘制的文本留空间)

var mAngle = Math.PI * 2 / mCount; //角度

var mColorPolygon = '#B8B8B8'; //多边形颜色

// 绘制多边形边

function drawPolygon(ctx){

    ctx.save();

    ctx.strokeStyle = mColorPolygon;

    var r = mRadius/ mCount; //单位半径

    //画6个圈

    for(var i = 0; i < mCount; i ++){

        ctx.beginPath();

        var currR = r * ( i + 1); //当前半径

        //画6条边

        for(var j = 0; j < mCount; j ++){

            var x = mCenter + currR * Math.cos(mAngle * j);

            var y = mCenter + currR * Math.sin(mAngle * j);

            ctx.lineTo(x, y);

        }

        ctx.closePath()

        ctx.stroke();

    }

    ctx.restore();

}

效果：

三、连接顶点线

var mColorLines = '#B8B8B8'; //顶点连线颜色

//顶点连线

function drawLines(ctx){

    ctx.save();

    ctx.beginPath();

    ctx.strokeStyle = mColorLines;

    for(var i = 0; i < mCount; i ++){

        var x = mCenter + mRadius * Math.cos(mAngle * i);

        var y = mCenter + mRadius * Math.sin(mAngle * i);

        ctx.moveTo(mCenter, mCenter);

        ctx.lineTo(x, y);

    }

    ctx.stroke();

    ctx.restore();

}

效果：

四、绘制数据文本

var mData = [['速度', 77],

            ['力量', 72],

            ['防守', 46],

            ['射门', 50],

            ['传球', 80],

            ['耐力', 60]]; //数据

var mColorText = '#000000';

//绘制文本

function drawText(ctx){

    ctx.save();

    var fontSize = mCenter / 12;

    ctx.font = fontSize + 'px Microsoft Yahei';

    ctx.fillStyle = mColorText;

    for(var i = 0; i < mCount; i ++){

        var x = mCenter + mRadius * Math.cos(mAngle * i);

        var y = mCenter + mRadius * Math.sin(mAngle * i);

        //通过不同的位置，调整文本的显示位置

        if( mAngle * i >= 0 && mAngle * i <= Math.PI / 2 ){

            ctx.fillText(mData[i][0], x, y + fontSize);

        }else if(mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI){

            ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y + fontSize);

        }else if(mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2){

            ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);

        }else{

            ctx.fillText(mData[i][0], x, y);

        }

    }

    ctx.restore();

}

效果：

五、绘制数据覆盖区域

//绘制数据区域

function drawRegion(ctx){

    ctx.save();

    ctx.beginPath();

    for(var i = 0; i < mCount; i ++){

        var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;

        var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

        ctx.lineTo(x, y);

    }

    ctx.closePath();

    ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';

    ctx.fill();

    ctx.restore();

}

效果：

六、绘制数据点

把每个数据与线的焦点绘制出来。

//画点

function drawCircle(ctx){

    ctx.save();

    var r = mCenter / 18;

    for(var i = 0; i < mCount; i ++){

        var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;

        var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

        ctx.beginPath();

        ctx.arc(x, y, r, 0, Math.PI * 2);

        ctx.fillStyle = 'rgba(255, 0, 0, 0.8)';

        ctx.fill();

    }       

    ctx.restore();

}

效果：

效果演示

最终代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

    canvas{

    }

  </style>

</head>

<body>

<script type="text/javascript">

    var mW = 400;

    var mH = 400;

    var mData = [['速度', 77],

                            ['力量', 72],

                            ['防守', 46],

                            ['射门', 50],

                            ['传球', 80],

                            ['耐力', 60]];

    var mCount = mData.length; //边数

    var mCenter = mW /2; //中心点

    var mRadius = mCenter - 50; //半径(减去的值用于给绘制的文本留空间)

    var mAngle = Math.PI * 2 / mCount; //角度

    var mCtx = null;

    var mColorPolygon = '#B8B8B8'; //多边形颜色

    var mColorLines = '#B8B8B8'; //顶点连线颜色

    var mColorText = '#000000';

    //初始化

    (function(){

      var canvas = document.createElement('canvas');

      document.body.appendChild(canvas);

      canvas.height = mH;

      canvas.width = mW;

      mCtx = canvas.getContext('2d');

      drawPolygon(mCtx);

      drawLines(mCtx);

      drawText(mCtx);

      drawRegion(mCtx);

      drawCircle(mCtx);

    })();

      // 绘制多边形边

      function drawPolygon(ctx){

        ctx.save();

        ctx.strokeStyle = mColorPolygon;

        var r = mRadius/ mCount; //单位半径

        //画6个圈

        for(var i = 0; i < mCount; i ++){

            ctx.beginPath();

            var currR = r * ( i + 1); //当前半径

            //画6条边

            for(var j = 0; j < mCount; j ++){

                var x = mCenter + currR * Math.cos(mAngle * j);

                var y = mCenter + currR * Math.sin(mAngle * j);

                ctx.lineTo(x, y);

            }

            ctx.closePath()

            ctx.stroke();

        }

        ctx.restore();

      }

    //顶点连线

    function drawLines(ctx){

        ctx.save();

        ctx.beginPath();

        ctx.strokeStyle = mColorLines;

        for(var i = 0; i < mCount; i ++){

            var x = mCenter + mRadius * Math.cos(mAngle * i);

            var y = mCenter + mRadius * Math.sin(mAngle * i);

            ctx.moveTo(mCenter, mCenter);

            ctx.lineTo(x, y);

        }

        ctx.stroke();

        ctx.restore();

    }

    //绘制文本

    function drawText(ctx){

        ctx.save();

        var fontSize = mCenter / 12;

        ctx.font = fontSize + 'px Microsoft Yahei';

        ctx.fillStyle = mColorText;

        for(var i = 0; i < mCount; i ++){

            var x = mCenter + mRadius * Math.cos(mAngle * i);

            var y = mCenter + mRadius * Math.sin(mAngle * i);

            if( mAngle * i >= 0 && mAngle * i <= Math.PI / 2 ){

                ctx.fillText(mData[i][0], x, y + fontSize);

            }else if(mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI){

                ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y + fontSize);

            }else if(mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2){

                ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);

            }else{

                ctx.fillText(mData[i][0], x, y);

            }

        }

        ctx.restore();

    }

    //绘制数据区域

    function drawRegion(ctx){

        ctx.save();

        ctx.beginPath();

        for(var i = 0; i < mCount; i ++){

            var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;

            var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

            ctx.lineTo(x, y);

        }

        ctx.closePath();

        ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';

        ctx.fill();

        ctx.restore();

    }

    //画点

    function drawCircle(ctx){

        ctx.save();

        var r = mCenter / 18;

        for(var i = 0; i < mCount; i ++){

            var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;

            var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

            ctx.beginPath();

            ctx.arc(x, y, r, 0, Math.PI * 2);

            ctx.fillStyle = 'rgba(255, 0, 0, 0.8)';

            ctx.fill();

        }       

        ctx.restore();

    }

</script>

</body>

</html>

代码下载：点击这里

HTML5 Canvas制作雷达图实战的更多相关文章

在Excel中制作雷达图
雷达图的作用雷达图是专门用来进行多指标体系比较分析的专业图表.从雷达图中可以看出指标的实际值与参照值的偏离程度,从而为分析者提供有益的信息.雷达图一般用于成绩展示.效果对比量化.多维数据对比等等,只 ...
如何使用 HTML5 Canvas 制作水波纹效果
今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...
python批量制作雷达图
老板要画雷达图,但是数据好多组怎么办?不能一个一个点excel去画吧,那么可以利用python进行批量制作,得到样式如下: 首先制作一个演示的excel,评分为excel随机数生成: 1 =INT(( ...
怎样用HTML5 Canvas制作一个简单的游戏
原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...
HTML5 Canvas（画布）实战编程初级篇：基本介绍和基础画布元素
欢迎大家阅读HTML5 Canvas(画布)实战编程初级篇系列,在这个系列中,我们将介绍最简单的HTML5画布编程.包括: 画布元素绘制直线绘制曲线绘制路径绘制图形绘制颜色,渐变和图案绘制 ...
[译]怎样用HTML5 Canvas制作一个简单的游戏
这是我翻译自LostDecadeGames主页的一篇文章,原文地址:How To Make A Simple HTML5 Canvas Game. 下面是正文: 自从我制作了一些HTML5游戏(例如C ...
HTML5 canvas制作童年的回忆大风车
今天看到一篇CSS3写的大风车http://www.cnblogs.com/yaojaa/archive/2013/01/30/2882521.html,感觉CSS3太神奇了,这在以前用CSS是想都不 ...
DevExpressXtraReport—制作雷达图
存储过程: SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO -- ========================================== ...
python+matplotlib制作雷达图3例分析和pandas读取csv操作
1.例一图1 代码1 #第1步:导出模块 import numpy as np import matplotlib.pyplot as plt from matplotlib import font ...

随机推荐

cocos creator 的scorllview 滑动事件和子内容触摸事件会产生冲突
1:问题描叙: UI上的 scorllview 的子元素需要拖动到游戏场景.所以子元素需要绑定触摸事件,scorllview 默认的事件处理方式就会和子元素的触摸事件冲突.2:解决方案: Scroll ...
MySQL 数据类型（转）
MySQL 数据类型在 MySQL 中,有三种主要的类型:文本.数字和日期/时间类型. Text 类型: 数据类型描述备注 CHAR(size) 保存固定长度的字符串(可包含字母.数字以及特殊字 ...
robotium之不标准select控件
今天写脚本,遇到一个联合查询框即:下拉框选择,输入框输入搜索条件,点击查询按钮如图样式: 用uiautomatorviewer查看元素:无ID,无name,无desc 看到这我瞬间尴尬了,该咋办呢 ...
Transformer+BERT+GPT+GPT2
Transformer: https://jalammar.github.io/illustrated-transformer/ BERT: https://arxiv.org/pdf/1810.04 ...
1、Appium安装
1.安装node.js 访问node js官网 https://nodejs.org/en/ 下载并安装node js,找到你系统适合的node js一步步安装即可 2.安装Appium 在cmd中执 ...
用strings命令查看kafka-log内容
kafka的log内容格式还不没怎么了解,想快速浏览消息内容的话,除了使用它自带的kafka-console-consumer.sh脚本,还可以直接去看log文件本身,不过内容里有部分二进制字符,通过 ...
RzPageControl 关闭按钮
poj2352树状数组解决偏序问题
树状数组解决这种偏序问题是很厉害的! /* 输入按照y递增,对于第i颗星星,它的level就是之前出现过的星星中,横坐标小于i的总数 */ #include<iostream> #incl ...
Hibernate之开门见山
1:SSH框架: Struts2:基于mvc模式的应用层框架模式(Servlet层) Hibernate:基于持久层的框架(数据访问层) Spring:创建对象对象处理的依赖关系以及框架整合(Serv ...
Storm（三）Storm的原理机制
一.Storm的数据分发策略 1. Shuffle Grouping 随机分组,随机派发stream里面的tuple,保证每个bolt task接收到的tuple数目大致相同. 轮询,平均分配 2. ...

HTML5 Canvas制作雷达图实战

效果

一、创建Canvas

二、制作多边形背景

三、连接顶点线

四、绘制数据文本

五、绘制数据覆盖区域

六、绘制数据点

效果演示

最终代码

HTML5 Canvas制作雷达图实战的更多相关文章

随机推荐

热门专题