如何在饼图中添加文字？

Question

我创建了饼图，一切看起来都很棒，但我无法在饼图的每个部分中插入文本，例如 "data 1" 或 "data 2"。我知道有填充文本方法，但在这种情况下，我无法用 x 位置和 y 位置填充文本。你有什么想法吗？

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3;">
</canvas>

<script>

function draw() {
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");

  // Colors
  var colors = ['red', 'green', 'yellow', 'black', 'purple'];


  // store beginning angle and ending angle 
  var beginAngle = 0;
  var endAngle = 0;
  // data input 
  var data =[10,10,10,10,10]
  var total = 0;
  //sum of data
  for(i=0;i<data.length;i++){
    total = total + data[i];

  }
  // Iterate through the angles
  for(var i = 0; i < data.length; i = i + 1) {
    beginAngle= endAngle;//begin angle
    endAngle = endAngle+((Math.PI*2)*(data[i]/total));//end angle

    ctx.beginPath();
    // Fill color
    ctx.fillStyle = colors[i];

    //create each arc of the pie chart
    ctx.moveTo(200, 200);
    ctx.arc(200, 200, 120, beginAngle,endAngle);
    ctx.lineTo(200, 200);
    ctx.stroke();

    // Fill
    ctx.fill();
  }
}
window.onload = draw;


</script>


</body>
</html>

Answer 1

您好，我已经编辑了您的代码。您必须使用 Cosinus（X 轴）和 Sinus（Y 轴）计算每个 Piece 的位置，并将文本设置为位置，文本设置为 cancas.getContext("2d).fillText("text" , x, y)

HTML

<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid 
#d3d3d3;">
</canvas>
</body>

JS

function draw() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// Colors
var colors = ['red', 'green', 'yellow', 'black', 'purple'];


// store beginning angle and ending angle 
var beginAngle = 0;
var endAngle = 0;
// data input 
var data = [10, 10, 10, 10, 10]
var total = 0;
//sum of data
for (i = 0; i < data.length; i++) {
    total = total + data[i];

}
// Iterate through the angles
for (var i = 0; i < data.length; i = i + 1) {
    beginAngle = endAngle; //begin angle
    endAngle = endAngle + ((Math.PI * 2) * (data[i] / total)); //end angle

    ctx.beginPath();
    // Fill color
    ctx.fillStyle = colors[i];
    //create each arc of the pie chart
    ctx.moveTo(200, 200);
    ctx.arc(200, 200, 120, beginAngle, endAngle);
    ctx.lineTo(200, 200);
    ctx.stroke();
    ctx.fill()

    // Set Text
    var pieRadius = Math.min(ctx.canvas.width / 2, ctx.canvas.height / 2);
    var labelX = ctx.canvas.width / 2 + (pieRadius / 2) * Math.cos(beginAngle + (endAngle - beginAngle) / 2);
    var labelY = ctx.canvas.height / 2 + (pieRadius / 2) * Math.sin(beginAngle + (endAngle - beginAngle) / 2)
    ctx.fillStyle = "white";
    ctx.font = "bold 10px Arial";
    ctx.fillText("test", labelX, labelY);

    // Fill
}
}
draw()

Working fiddle

但您可以使用 Highchart 而不是 Canvas Pie Diagramm with Highchart

如何在饼图中添加文字？

How to add the text inside the pie chart?

javascript

pie-chart