Npcink Blog
切换菜单

Canvas 制作雷达图 - JS 笔记

数据可视化可以让大量枯燥的数据显的更加简单直观，而雷达图，就是数据可视化中你的一种。雷达图又叫蜘蛛网图，是一种对各项数据查看很明显的表现图

最后更新于
本页目录7 节

数据可视化可以让大量枯燥的数据显的更加简单直观，而雷达图，就是数据可视化中你的一种。雷达图又叫蜘蛛网图，是一种对各项数据查看很明显的表现图，在很多游戏中，对游戏中的每个角色的分析图一般也用这种图。

接下来，让我们用 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();
}