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 ...

随机推荐

Java中日期格式化SimpleDateFormat类包含时区的处理方法
1.前言需要把格式为“2017-02-23T08:04:02+01:00”转化成”23-02-2017-T15:04:02“格式(中国时区为+08:00所以是15点),通过网上查找答案,发现没有我需 ...
请手动释放你的资源(Please release resources manually)
作者: Laruence( ) 本文地址: http://www.laruence.com/2012/07/25/2662.html 转载请注明出处我从来不认为这个问题是个问题, 直到昨天. 昨 ...
LiteQuery MAX(Integer)、MAX(String) 判断是否返回值
unit Unit6; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System ...
php中按指定标识及长度替换字符的方法代码
/** * 按指定标识及长度替换字符 * @param $str * @param int $start 开始的位数 * @param int $end 后面保留的位数 * @param string ...
欧拉函数，打表求欧拉函数poj3090
欧拉函数 φ(n) 定义:[1,N]中与N互质的数的个数 //互质与欧拉函数 /* 求欧拉函数按欧拉函数计算公式,只要分解质因数即可 */ int phi(int n){ int ans=n; ;i ...
poj2828 伸展树模拟
用伸展树模拟插队比线段树快乐3倍.. 但是pojT了.别的oj可以过,直接贴代码. 每次更新时,找到第pos个人,splay到根,然后作为新root的左子树即可 #include<iostrea ...
ERP产品采购申请管理（三十八）
BLL层代码: public class BioPurchaseBLL { /// <summary> /// 购进申请添加 /// </summary> /// <pa ...
HTTP请求报文和响应报文
HTTP请求报文 GET / HTTP/1.1 Host: www.baidu.com Connection: keep-alive Upgrade-Insecure-Requests: 1 User ...
python ThreadLocal
ThreadLocal: 主要是为了解决各个线程引用全局变量,并且各个线程之间互不影响而设置的. 实例: import threading threadlocal = threading.local( ...
LR报错Error -27780: [GENERAL_MSG_CAT_SSL_ERROR]connect to host "XXX.XXX.com" failed解决方法

HTML5 Canvas制作雷达图实战

效果

一、创建Canvas

二、制作多边形背景

三、连接顶点线

四、绘制数据文本

五、绘制数据覆盖区域

六、绘制数据点

效果演示

最终代码

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

随机推荐

热门专题