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

随机推荐

S5PV210初始化系统时钟
S5PV210初始化系统时钟 S5PV210时钟体系S5PV210中包含3大类时钟domain,分别是主系统时钟domain (简称MSYS,下面将使用简称来进行相关讲解).显示相关的时钟domain ...
TCP 远程执行CMD (解决粘包问题) 代码
服务端 from socket import * import subprocess,json,struct server= socket(AF_INET,SOCK_STREAM) server.bi ...
Math对象应用详解
JavaScript中的Math对象提供了大量的算术运算功能和数值操作方法. JavaScript中的Math对象的与众不同之处在于,它是一个全局对象.在使用Math对象之前,既不需要将一个变量声明为 ...
LeetCode（36）：有效的数独
Medium! 题目描述: 判断一个 9x9 的数独是否有效.只需要根据以下规则,验证已经填入的数字是否有效即可. 数字 1-9 在每一行只能出现一次. 数字 1-9 在每一列只能出现一次. 数字 1 ...
SPLAY，LCT学习笔记（四）
前三篇好像变成了SPLAY专题... 这一篇正式开始LCT! 其实LCT就是基于SPLAY的伸展操作维护树(森林)连通性的一个数据结构核心操作有很多,我们以一道题为例: 例:bzoj 2049 洞穴 ...
idea 快键键
debug快键键 F9 resume programe 恢复程序 Alt+F10 show execution point 显示执行断点 F8 Step Over 相当于eclipse的f6 跳到下一 ...
python 全栈开发，Day6(is,小数据池,编码转换)
一.is a = 100 b = 100 print(a == b) print(a is b) 执行输出: TrueTrue 查看内存地址,使用id函数 print(id(a)) print(id( ...
谷歌云ssh开启root密码登录
修改配置 1.先选择从浏览器打开ssh连接服务器连接登录成功后,输入以下命令 sudo -i #切换到root passwd #修改密码然后会要求输入新密码,然后再重复一次密码,输入密码的时候不会 ...
关于C#中”扩展方法必须在非泛型静态类中定义“问题的解决
问题描述: 在某个窗口下的编码中使用了以下扩展方法FindControl,以求根据字符串的值去操作控件(本文中的控件为Label控件)的属性. public static Control FindCo ...
Kubernetes学习系列
这段时间项目组内想要引入Kubernetes,作为第二代容器调度引擎,故最近在系统的学习Kubernetes.整理了一些学习笔记,心得,放到博客中,一来记录自己的学习经过,二来看能否帮到有需要的同学. ...

HTML5 Canvas制作雷达图实战

效果

一、创建Canvas

二、制作多边形背景

三、连接顶点线

四、绘制数据文本

五、绘制数据覆盖区域

六、绘制数据点

效果演示

最终代码

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

随机推荐

热门专题