html5 캔버스를 사용하여 다중 레벨 파이 차트를 그리는 방법은 무엇입니까?

Question

canvas 요소에 pie-chart 모양을 만들려고하는데,이 기능 자체를 찾지 못합니다.
쉬운 방법이 있습니까 pie chart like below image

?

Answer 1

는 여기에 리콜 기능을 사용하여 호를 그립니다 당신을위한 시작 예제 :

은 시작 & 종료 아크 각도 Radians을 것을 기억하십시오. 이 같은 라디안으로 변환 할 수 있습니다 : radians = degrees * Math.PI/180

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 
ctx.lineWidth = 2; 
 
ctx.font = '14px verdana'; 
 

 
var PI2 = Math.PI * 2; 
 
var myColor = ["Green", "Red", "Blue"]; 
 
var myData = [30, 15, 38, 22, 30, 20, 10]; 
 
var cx = 150; 
 
var cy = 150; 
 
var radius = 100; 
 

 
ctx.globalAlpha=0.50; 
 
pieChart(myData, myColor); 
 
ctx.globalAlpha=1.00; 
 

 
function pieChart(data, colors){ 
 
    // calc data total 
 
    var total = 0; 
 
    for (var i = 0; i < data.length; i++) { 
 
    total += data[i]; 
 
    } 
 
    // calc sweep angles for each piece of pie 
 
    var sweeps = [] 
 
    for (var i = 0; i < data.length; i++) { 
 
    sweeps.push(data[i]/total * PI2); 
 
    } 
 
    // draw outer pie 
 
    var accumAngle = 0; 
 
    for (var i = 0; i < sweeps.length; i++) { 
 
    var f=randomColor(); 
 
    drawWedge(radius, accumAngle, accumAngle + sweeps[i], f, data[i]); 
 
    accumAngle += sweeps[i]; 
 
    } 
 
    // draw inner percent-complete wedges 
 
    var accumAngle = 0; 
 
    for (var i = 0; i < sweeps.length; i++) { 
 
    var r=radius*(Math.random()*70+20)/100; 
 
    var f=randomColor(); 
 
    drawWedge(r,accumAngle, accumAngle + sweeps[i], f, data[i]); 
 
    accumAngle += sweeps[i]; 
 
    } 
 
} 
 

 
function drawWedge(radius, startAngle, endAngle, fill, label) { 
 
    // draw the wedge 
 
    ctx.beginPath(); 
 
    ctx.moveTo(cx, cy); 
 
    ctx.arc(cx, cy, radius, startAngle, endAngle, false); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = fill; 
 
    ctx.strokeStyle = 'white'; 
 
    ctx.fill(); 
 
    ctx.stroke(); 
 
} 
 

 
function randomColor(){ 
 
    return('#'+(Math.floor(Math.random() * 0x1000000) + 0x1000000).toString(16).substr(1)); 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; }

<canvas id="canvas" width=512 height=512></canvas>