javascript - 如何向使用 Canvas 创建的图表添加标签

Question

大家好，我可以显示图表，但我需要向图表添加标签，标签如下，但我无法在图表中显示它，请提前感谢任何帮助

   	    	
	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);
	}

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

Answer 1

以下是向饼图中的每个楔形应用标签的一种方法:

• 计算饼图中每个楔形的起始 Angular 和结束 Angular 之间的中间 Angular 。
• 计算中间 Angular 和圆周附近的 [x,y]。
• 设置 textAlign 和 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>