javascript - 如何使用html5 canvas绘制多级饼图？

Question

我正在尝试创建一个 pie-chart形状canvas元素，但是我找不到任何可以单独执行此操作的函数。
有没有一种简单的方法可以做到 pie chart like below image

？

Answer 1

这是一个使用可调用函数绘制弧线的起始示例:

请记住，起始和结束弧 Angular 是弧度。您可以将度数转换为弧度，如下所示: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>