Question

我已经在另一个问题的帮助下创建了此饼图，并且一切正常，除了无论如何尝试，然后我似乎都无法弄清楚如何将值放入饼图的每个部分图表。

var can = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var lastend = 0;
var numbers = [200, 60, 15]; // If you add more data values make sure you add more colors
var myTotal = 0; // Automatically calculated so don't touch
var myColor = ['red', 'green', 'blue']; // Colors of each slice

for (var e = 0; e < numbers.length; e++) {
  myTotal += numbers[e];
}

for (var i = 0; i < numbers.length; i++) {
  ctx.fillStyle = myColor[i];
  ctx.beginPath();
  ctx.moveTo(can.width / 2, can.height / 2);
  ctx.arc(can.width / 2, can.height / 2, can.height / 2, lastend, lastend + (Math.PI * 2 * (numbers[i] / myTotal)), false);
  ctx.lineTo(can.width / 2, can.height / 2);
  ctx.fill();
  lastend += Math.PI * 2 * (numbers[i] / myTotal);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="200" height="200" />

有人知道如何将numbers中的值放在饼图中吗？

Answer 1

这是您意识到三角学实际上有用的地方。要获得圆角的xy，有一个简单的公式：

x = radius *  cos(angle)
y = radius *  sin(angle)

现在您需要做的就是找到每个数字中心的角度。由于您已经使用了lastend，因此我只需要将当前角度除以2

lastend + (Math.PI * 2 * ((numbers[i]/2) / myTotal));

这样，您将从中心获得x和y。然后，您只需添加中心的x，y即可获取文本的位置。

您的代码段已更新：

var can = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var lastend = 0;
var numbers = [200, 60, 15]; // If you add more data values make sure you add more colors
var myTotal = 0; // Automatically calculated so don't touch
var myColor = ['red', 'green', 'blue']; // Colors of each slice
var x, y;

for (var e = 0; e < numbers.length; e++) {
  myTotal += numbers[e];
}

for (var i = 0; i < numbers.length; i++) {
  ctx.fillStyle = myColor[i];
  ctx.beginPath();
  ctx.moveTo(can.width / 2, can.height / 2);
  ctx.arc(can.width / 2, can.height / 2, can.height / 2, lastend, lastend + (Math.PI * 2 * (numbers[i] / myTotal)), false);
  ctx.lineTo(can.width / 2, can.height / 2);
  ctx.fill();

  ctx.font = "12px Arial";
  ctx.fillStyle = "white";
  //I divided the width by 4 so that it is halfway to the middle
  x = (can.width / 4) * Math.cos(lastend + (Math.PI * 2 * ((numbers[i]/2) / myTotal)));
  y = (can.height / 4) *  Math.sin(lastend + (Math.PI * 2 * ((numbers[i]/2) / myTotal)));
  ctx.fillText(numbers[i], x+(can.width/2)  , y+(can.width/2));
 
  lastend += Math.PI * 2 * (numbers[i] / myTotal);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="200" height="200" />

Answer 2

我不确定您要将数字放在哪里，但是请检查此示例，您必须使用 HTML Canvas Text ，以及某些属性，例如 font，fillStyle和fillText

var can = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var lastend = 0;
var numbers = [200, 60, 15]; // If you add more data values make sure you add more colors
var myTotal = 0; // Automatically calculated so don't touch
var myColor = ['red', 'green', 'blue']; // Colors of each slice

for (var e = 0; e < numbers.length; e++) {
  myTotal += numbers[e];
}

for (var i = 0; i < numbers.length; i++) {
  ctx.fillStyle = myColor[i];
  ctx.beginPath();
  ctx.moveTo(can.width / 2, can.height / 2);
  ctx.arc(can.width / 2, can.height / 2, can.height / 2, lastend, lastend + (Math.PI * 2 * (numbers[i] / myTotal)), false);
  ctx.lineTo(can.width / 2, can.height / 2);
  ctx.fill();
  lastend += Math.PI * 2 * (numbers[i] / myTotal);
      }
  
  ctx.font = "12px Arial";
  ctx.fillStyle = "white";
  ctx.fillText(numbers[0] , 50 , 50); // Adjust the x and y here
  ctx.fillText(numbers[1] , 100 , 50);
  ctx.fillText(numbers[2] , 180 , 90);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="200" height="200" />

在HTML Canvas Text上查看本教程

Answer 3

var can = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var lastend = 0;
var numbers = [15, 90 ,15, 90, 60, 15, 120]; // If you add more data values make sure you add more colors
var myTotal = 0; // Automatically calculated so don't touch
var myColor = ['black', 'magenta', 'red', 'purple', 'green', 'blue', 'pink']; // Colors of each slice
var x, y;

for (var e = 0; e < numbers.length; e++) {
  myTotal += numbers[e];
}

var fillText = [];
for (var i = 0; i < numbers.length; i++) {
  ctx.fillStyle = myColor[i];
  ctx.beginPath();
  ctx.moveTo(can.width / 2, can.height / 2);
  ctx.arc(can.width / 2, can.height / 2, can.height / 2, lastend, lastend + (Math.PI * 2 * (numbers[i] / myTotal)), false);
  ctx.lineTo(can.width / 2, can.height / 2);
  ctx.fill();

  ctx.font = "12px Arial";
  ctx.fillStyle = "white";

  // Calc by @Liora Haydont
  x = (can.width / 4) * Math.cos(lastend + (Math.PI * 2 * ((numbers[i]/2) / myTotal)));
  y = (can.height / 4) *  Math.sin(lastend + (Math.PI * 2 * ((numbers[i]/2) / myTotal)));
  
  // set a slight offset for numbers so they are centered
  let tmp = [(numbers[i]), (x-8+(can.width/2)), (y+5+(can.width/2))]
  fillText.push(tmp);
  
  lastend += Math.PI * 2 * (numbers[i] / myTotal);
}

// draw text afterwards so it doesnt get overpainted
for( let i = 0; i < fillText.length; i++ ) {
  ctx.fillText(fillText[i][0], fillText[i][1], fillText[i][2]);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="200" height="200" />

在饼图中显示值

3 个答案: