pie chart with canvas - algorithm - wrong result-CodePudding

I wrote this algorithm, which, based on the data in the array, makes a pie chart using the canvas element:

        function pieChart() {
            canvas = document.getElementById('pie-chart');
            canvas.width = 300;
            canvas.height = 300;
            context = canvas.getContext('2d');

            const data = [1, 5, 4, 3];
            const colors = ['brown', 'yellow', 'purple', 'pink'];

            let summ = 0;
            for (let index = 0; index < data.length; index  ) {
                summ  = data[index];
            }

            function deg(num) {
                return num / summ * 360;
            }

            function rad(deg) {
                return deg * (Math.PI / 180);
            }

            let start = 3 * Math.PI / 2;

            for (let index = 0; index < data.length; index  ) {
                context.beginPath();
                context.moveTo(150, 150);
                context.arc(150, 150, 150, start, rad(deg(data[index])), false);
                context.lineTo(150, 150);
                context.fillStyle = colors[index];
                context.fill();
                start = rad(deg(data[index]));
            }
        }

<body onl oad="pieChart();">
    <canvas id="pie-chart"></canvas>
</body>

Here is the result I got:

What am I doing wrong?

CodePudding user response：

There's two notable problems.

start = rad(deg(data[index]));

You are moving your start angle to just be the size of the previous wedge, where in reality, you want to add the size of the previous wedge. This should instead be:

start  = rad(deg(data[index]));

context.arc(150, 150, 150, start, rad(deg(data[index])), false);

The end angle you specify here is the size of the wedge angle. It instead needs to be offset from the start angle (i.e. you have to add the start angle to it). This should instead be:

context.arc(150, 150, 150, start, start   rad(deg(data[index])), false);

function pieChart() {
  canvas = document.getElementById('pie-chart');
  canvas.width = 300;
  canvas.height = 300;
  context = canvas.getContext('2d');

  const data = [1, 5, 4, 3];
  const colors = ['brown', 'yellow', 'purple', 'pink'];

  let summ = 0;
  for (let index = 0; index < data.length; index  ) {
    summ  = data[index];
  }

  function deg(num) {
    return num / summ * 360;
  }

  function rad(deg) {
    return deg * (Math.PI / 180);
  }

  let start = 3 * Math.PI / 2;

  for (let index = 0; index < data.length; index  ) {
    context.beginPath();
    context.moveTo(150, 150);
    context.arc(150, 150, 150, start, start   rad(deg(data[index])), false);
    context.lineTo(150, 150);
    context.fillStyle = colors[index];
    context.fill();
    start  = rad(deg(data[index]));
  }
}

<body onl oad="pieChart();">
  <canvas id="pie-chart"></canvas>
</body>

CodePudding user response：

You were drawing each arc from the angle of the last arc to the angle of the new arc but BOTH starting from 0. You need to ADD the angle of the new arc to the previous result.

Also be aware of the last parameter of the arc function. If it's false, then the arc is drawn clockwise, if it's true then it's drawn counterclockwise.

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc

 document.addEventListener("DOMContentLoaded", function(){
 
 
            canvas = document.getElementById('pie-chart');
            canvas.width = 300;
            canvas.height = 300;
            context = canvas.getContext('2d');

            const data = [1, 5, 4, 3];
            const colors = ['brown', 'yellow', 'purple', 'pink'];

            let summ = 0;
            for (let index = 0; index < data.length; index  ) {
                summ  = data[index];
            }

            function deg(num) {
                return (num / summ) * 360;
            }

            function rad(deg) {
                return deg * (Math.PI / 180);
            }


            let lastAngle = 2 * Math.PI; //Starting angle
            let thisAngle = lastAngle;

            for (let index = 0; index < data.length; index  ) {
                thisAngle  = rad(deg(data[index]));
                context.beginPath();
                context.moveTo(150, 150);
                context.arc(150, 150, 150, lastAngle, thisAngle, false);
                context.lineTo(150, 150);
                context.fillStyle = colors[index];
                context.fill();
                lastAngle = thisAngle;
            }
            
           } );

<html>
<body>
  <canvas id="pie-chart">
  </canvas>
</body>
</html>