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

随机推荐

[译]bootstrap-select (selectpicker)方法
方法 .selectpicker('val') 您可以通过调用val元素上的方法来设置所选值. $('.selectpicker').selectpicker('val', 'Mustard'); $ ...
ORACLE与SQLSERVER数据转换
前言: 将SQLServer数据库中的表和数据全量导入到Oracle数据库,通过Microsoft SqlServer Management Studio工具,直接导入到oracle数据库,免去了生成 ...
选择一个 HTTP 状态码不再是一件难事 – Racksburg《转载》
本文转载自:众成翻译译者:十年踪迹链接:http://www.zcfy.cc/article/904 原文:http://racksburg.com/choosing-an-http-status ...
hdu5646数学构造+二分
/* 满足n>=(k+1)*k/2的整数n必定满足 a+(a+1)+...+(a+k-1)<=n<=(a+1)+(a+2)+...+(a+k) 只要在[a,a+k]中减掉一个数字ai ...
python 全栈开发，Day28(复习,os模块,导入模块import和from)
一.复习 collections 增加了一些扩展数据类型 :namedtuple orderdict defaltdict队列和栈time 时间三种格式 : 时间戳结构化字符串random 随机 ...
步步为营-17-FileStream-文件加密/解密
以前使用的File是操作小的文本文件,用的并不常见,FileStream(操作字节),可以操作所有格式的文件,用途较广泛下面做一个通过文件流给文件加密解密的小软件. using System; us ...
在Centos下用alternative命令切换各个版本的jdk的方法
https://blog.csdn.net/nsrainbow/article/details/43273991 https://blog.csdn.net/yzh_1346983557/articl ...
WebApi表头设置跨域
public static class WebApiConfig { public static void Register(HttpConfiguration config) { var setti ...
【AtCoder】ARC082
C - Together 用一个数组记一下一个数给它本身,左右贡献都是1,看看哪个数的总贡献最大 #include <bits/stdc++.h> #define fi first #de ...
C#简单画图Draw研究学习
命名空间:using System.Drawing; Graphics类:有道词典翻译在C#里是封装一个 GDI+ 绘图图面,此类不能被继承. Pen类:定义用于绘制直线和曲线的对象. 此类不能被继 ...

HTML5 Canvas制作雷达图实战

效果

一、创建Canvas

二、制作多边形背景

三、连接顶点线

四、绘制数据文本

五、绘制数据覆盖区域

六、绘制数据点

效果演示

最终代码

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

随机推荐

热门专题