HTML5画布饼图

为便于声明，我将值移入数据对象数组中. 我将其他值（例如百分比）明确声明为数据对象的属性或单独的变量. 我认为它更易于阅读.

如果您对重构感兴趣，那么重构也使将值绑定到输入框更加容易.

  var data = [{
    label: "one",
    value: 100,
    color: 'white'
  }, {
    label: "two",
    value: 100,
    color: 'skyBlue'
  }, {
    label: "three",
    value: 100,
    color: 'yellow'
  }];
  var total = 0;
  for (obj of data) {
    total += obj.value;
  }
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  var previousRadian;
  var middle = {
    x: canvas.width / 2,
    y: canvas.height / 2,
    radius: canvas.height / 2,
  };
  
   //background
  ctx.beginPath();
  ctx.arc(middle.x, middle.y, middle.radius, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.stroke();
  ctx.fillStyle = "black";
  ctx.fill();
   //end of background
  for (obj of data) {
    previousRadian = previousRadian || 0;
    obj.percentage = parseInt((obj.value / total) * 100)
    
    ctx.beginPath();
    ctx.fillStyle = obj.color;
    obj.radian = (Math.PI * 2) * (obj.value / total);
    ctx.moveTo(middle.x, middle.y);
    //middle.radius - 2 is to add border between the background and the pie chart
    ctx.arc(middle.x, middle.y, middle.radius - 2, previousRadian, previousRadian + obj.radian, false);
    ctx.closePath();
    ctx.fill();
    ctx.save();
    ctx.translate(middle.x, middle.y);
    ctx.fillStyle = "black";
    ctx.font = middle.radius / 10 + "px Arial";
    ctx.rotate(previousRadian + obj.radian);
    var labelText = "'" + obj.label + "' " + obj.percentage  + "%";
    ctx.fillText(labelText, ctx.measureText(labelText).width / 2, 0);
    ctx.restore();
    previousRadian += obj.radian;
  }

<canvas id="myCanvas" width="500" height="500" ></canvas>

为便于声明，我将值移入数据对象数组中. 我将其他值（例如百分比）明确声明为数据对象的属性或单独的变量. 我认为它更易于阅读. 如果您对重构感兴趣canvas 饼图，则重构还使将值绑定到输入框变得更加容易. var data = [{{label: “ one”canvas 饼图，va ...

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-153675-1.html