Canvas制作雷達(dá)圖 – JS筆記

數(shù)據(jù)可視化可以讓大量枯燥的數(shù)據(jù)顯的更加簡(jiǎn)單直觀，而雷達(dá)圖，就是數(shù)據(jù)可視化中你的一種。雷達(dá)圖又叫蜘蛛網(wǎng)圖，是一種對(duì)各項(xiàng)數(shù)據(jù)查看很明顯的表現(xiàn)圖，在很多游戲中，對(duì)游戲中的每個(gè)角色的分析圖一般也用這種圖。

接下來，讓我們用HTML5的Cavas來實(shí)現(xiàn)雷達(dá)圖。

• 代碼來源：詳情
• 參考鏈接：詳情

效果

一、創(chuàng)建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; //邊數(shù)
var mCenter = mW /2; //中心點(diǎn)
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個(gè)圈
    for(var i = 0; i < mCount; i ++){
        ctx.beginPath();        
        var currR = r * ( i + 1); //當(dāng)前半徑
        //畫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();
}

三、連接頂點(diǎn)線

var mColorLines = '#B8B8B8'; //頂點(diǎn)連線顏色

//頂點(diǎn)連線
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();
}

四、繪制數(shù)據(jù)文本

var mData = [['速度', 77],
            ['力量', 72],
            ['防守', 46],
            ['射門', 50],
            ['傳球', 80],
            ['耐力', 60]]; //數(shù)據(jù)
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);

        //通過不同的位置，調(diào)整文本的顯示位置
        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();
}

五、繪制數(shù)據(jù)覆蓋區(qū)域

//繪制數(shù)據(jù)區(qū)域
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();
}

六、繪制數(shù)據(jù)點(diǎn)

把每個(gè)數(shù)據(jù)與線的焦點(diǎn)繪制出來。

//畫點(diǎn)
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();
}