0
103
Vistasgráfico circular con lienzo - algoritmo - resultado incorrecto
Escribí este algoritmo que, basado en los datos de la matriz, crea un gráfico circular usando el elemento canvas:
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> Aquí está el resultado que obtuve:
¿Qué estoy haciendo mal?
2 Respuestas
Responde la pregunta0
Hay dos problemas notables.
-
start = rad(deg(data[index]));
Está moviendo su ángulo de inicio para que tenga el tamaño de la cuña anterior, cuando en realidad desea agregar el tamaño de la cuña anterior. En cambio, esto debería ser:
start += rad(deg(data[index]));-
context.arc(150, 150, 150, start, rad(deg(data[index])), false);
El ángulo final que especifique aquí es el tamaño del ángulo de cuña. En cambio, debe compensarse desde el ángulo de inicio (es decir, debe agregarle el ángulo de inicio). En cambio, esto debería ser:
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
Estabas dibujando cada arco desde el ángulo del último arco hasta el ángulo del nuevo arco pero AMBOS comenzando desde 0. Necesitas SUMAR el ángulo del nuevo arco al resultado anterior.
También tenga en cuenta el último parámetro de la función de arc . Si es falso, el arco se dibuja en el sentido de las agujas del reloj, si es verdadero, se dibuja en el sentido contrario a las agujas del reloj.
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>