Question

0

104

Visualizações

pie chart with canvas - algorithm - wrong result

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 onload="pieChart();">
    <canvas id="pie-chart"></canvas>
</body>

Here is the result I got:

What am I doing wrong?

about 4 years ago · Juan Pablo Isaza

2 Respostas

Responde à pergunta

0

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>

about 4 years ago · Juan Pablo Isaza Relatório

Responde à pergunta

Encontrar trabalhos remotos

Accepted Answer · 2022-07-03T21:47:34.162Z

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 onload="pieChart();">
  <canvas id="pie-chart"></canvas>
</body>

0

104

pie chart with canvas - algorithm - wrong result

2 Respostas

0

0

Encontrar trabalhos remotos

Andres GPT