如何将标签添加到使用画布创建的图表

Question

你好所有我能够显示图表，但我需要在图表中添加标签，下面给出了标签，但我无法在图表中显示任何帮助请提前感谢

＆＃13;

＆＃13;

   	    	
	var canvas = document.getElementById("canvas");
	
	var ctx = canvas.getContext("2d");
	var lastend = 0;
	
	var data = [20,40]; // If you add more data values make sure you add more colors
	var labels = ["leavebalance", "leaveavailability"];
	var myTotal = 0; // Automatically calculated so don't touch
	var myColor = ['red','green']; // Colors of each slice
     
	for (var e = 0; e < data.length; e++) {
	  myTotal += data[e];
	     
	}
	//alert(myTotal);

	for (var i = 0; i < data.length; i++) {
	  ctx.fillStyle = myColor[i];
	  //ctx.fillText(labels[i]);
	  //ctx.fillText = labels[i];
	  ctx.beginPath();
	  ctx.moveTo(canvas.width / 2, canvas.height / 2);
	  // Arc Parameters: x, y, radius, startingAngle (radians), endingAngle (radians), antiClockwise (boolean)
	  ctx.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2, lastend, lastend + (Math.PI * 2 * (data[i] / myTotal)), false);
	  ctx.lineTo(canvas.width / 2, canvas.height / 2);
	  ctx.fill();
	  lastend += Math.PI * 2 * (data[i] / myTotal);
	}

＆＃13;

<canvas id="canvas" width="200" height="150" >
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

＆＃13;

＆＃13;

＆＃13;

Answer 1

以下是在饼图中为每个楔形应用标签的一种方法：

• 计算起点和起点之间的中间角度。馅饼中每个楔形的结束角度。
• 计算中间角和圆周附近的[x，y]。
• 设置textAlign＆amp; textBaseline这样绘制的文本以计算出的[x，y]为中心。
• 在计算出的[x，y] fillText('20',x,y)
处绘制标签

这是带注释的代码和演示：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;

ctx.lineWidth = 2;
ctx.font = '12px verdana';
ctx.textAlign='center';
ctx.textBaseline='middle';

var PI2 = Math.PI * 2;
var myColor = ['red','green','blue'];
var myData = [25,35,40];
var cx = 150;
var cy = 150;
var radius = 100;

pieChart(myData, myColor);

function pieChart(data, colors) {

  var total = 0;
  for (var i = 0; i < data.length; i++) {
    total += data[i];
  }

  var sweeps = []
  for (var i = 0; i < data.length; i++) {
    sweeps.push(data[i] / total * PI2);
  }

  var accumAngle = 0;
  for (var i = 0; i < sweeps.length; i++) {
    drawWedge(accumAngle, accumAngle + sweeps[i], colors[i], data[i]);
    accumAngle += sweeps[i];
  }


}

function drawWedge(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 = 'black';
  ctx.fill();
  ctx.stroke();

  // draw the label
  var midAngle = startAngle + (endAngle - startAngle) / 2;
  var labelRadius = radius * .75;
  var x = cx + (labelRadius) * Math.cos(midAngle);
  var y = cy + (labelRadius) * Math.sin(midAngle);
  ctx.fillStyle = 'white';
  ctx.fillText(label, x, y);

}

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

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