Ich versuche hier, eine Polarkarte mit Leinwand zu erstellen:

http: //jsfiddle.net/wm7pwL2w/2

Code

var myColor = ["#ff0", "#00f", "#002", "#003", "#004"];
var myData = [10, 30, 20, 60, 40];
var myRadius = [120, 80, 40, 70, 40];

function getTotal() {
    var myTotal = 0;
    for (var j = 0; j < myData.length; j++) {
        myTotal += (typeof myData[j] == 'number') ? myData[j] : 0;
    }
    return myTotal;
}

function plotData() {
    var canvas;
    var ctx;
    var lastend = 0;
    var myTotal = getTotal();

    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < myData.length; i++) {
        ctx.fillStyle = myColor[i];
        ctx.beginPath();
        ctx.moveTo(200, 150);
        ctx.arc(200, 150, myRadius[i], lastend, lastend + (Math.PI * 2 * (myData[i] / myTotal)), false);
        console.log(myRadius[i]);
        ctx.lineTo(200, 150);
        ctx.fill();
        lastend += Math.PI * 2 * (myData[i] / myTotal);
    }
}

plotData();

Aktualisieren Um Dinge zu klären, ist dies das, was ich implementieren möchte:

<>

Dieser Stil mit diesem:

(Dies ist ein einfaches Kreisdiagramm.) Ich kann den zweiten Teil (Explodieren der Slices) mit meiner aktuellen Implementierung nicht implementieren.