Thursday 19 July 2018

display value inside pie chart

I've created this pie chart with some help from another question, and everything works fine, except that no matter what I try, then I can't seem to figure out how to put the value inside each part of the Pie chart.

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" />

Do anyone know how I can put the values from numbers inside the pie chart?



from display value inside pie chart

No comments:

Post a Comment