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

随机推荐

unicode-range特定字符使用font-face自定义字体
链接: https://www.zhangxinxu.com/wordpress/2016/11/css-unicode-range-character-font-face/
Android Studio 超级简单的打包生成apk
为什么要打包: apk文件就是一个包,打包就是要生成apk文件,有了apk别人才能安装使用.打包分debug版和release包,通常所说的打包指生成release版的apk,release版的apk ...
JUnit单元测试--IntelliJ IDEA
单元测试的基本使用一.环境配置使用idea IDE 进行单元测试,首先需要安装JUnit 插件. 1.安装JUnit插件步骤 File-->settings-->Plguins--&g ...
pytest十五：pytest-html 生成 html 报告
pytest-HTML 是一个插件,pytest 用于生成测试结果的 HTML 报告.兼容 Python 2.7,3.6 pytest-html1.github 上源码地址[https://githu ...
Hibernate的主配置文件hibernate.cfg.xml
1:Hibernate的主配置文件的名字必须是hibernate.cfg.xml(主要配置文件中主要配置:数据库连接信息,其他参数,映射信息):常用配置查看源码:Hibernate\hibernate ...
AOJ 0189 Convenient Location （Floyd）
题意: 求某一个办公室到其他所有办公室的总距离最短办公室数不超过10 输入:多组输入,每组第一行为n (1 ≤ n ≤ 45),接下来n行是 (x, y, d),x到y的距离是d输出:办公室 ...
POJ 2718【permutation】
POJ 2718 问题描述: 给一串数,求划分后一个子集以某种排列构成一个数,余下数以某种排列构成另一个数,求这两个数最小的差,注意0开头的处理. 超时问题:一开始是得到一个数列的组合之后再从中间进行 ...
day8--socketserver回顾
sockeserver主要实现多并发的情况,我们知道,socket只能一对一用户进行交互,如何实现一对多交互,socketserver就是用来解决这个问题的. socketserver--共有这么几种 ...
自动化部署之gitlab权限管理--issue管理
一.删除测试项目先进入项目,选择编辑项目二.拉取到最下方,移除项目三输入你要删除的项目名称二创建Group,User,Project 2.1 创建一个组,组名为java Group pat ...
pandas学习（创建数据，基本操作）
pandas学习(一) Pandas基本数据结构 Series类型数据 Dataframe类型基本操作 Pandas基本数据结构两种常用数据结构: Series 一维数组,与Numpy中的一维ar ...

HTML5 Canvas制作雷达图实战

效果

一、创建Canvas

二、制作多边形背景

三、连接顶点线

四、绘制数据文本

五、绘制数据覆盖区域

六、绘制数据点

效果演示

最终代码

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

随机推荐

热门专题