0
102
Viewspie 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?
2 answers
Answer question0
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
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>