Grafico a torta by @Codewith.it - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

valueValore alfanumerico o booleano contenuto in un elemento
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
<b>Formatta il testo in grassetto
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<meta>Definisce i meta dati di una pagina web.

Users

Log in to search for users

Explore

Find inspiration

Bootstrap List Grid

AirPods Shop LOGIN

Array of Colors

Esercitazione n. 1

Favola dei tre porcellini(2)

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html>

<head>
  <title>Grafico a Torta</title>
</head>

<body>
  <canvas id="grafico" width="600" height="400"></canvas>
</body>

</html>

// Dati di esempio per le categorie e i valori
var categories = ["Roma", "Milano", "Napoli", "Torino", "Palermo"];
var values = [200, 150, 120, 90, 75];
var colors = ["red", "#33ff57", "#5733ff", "#ff33aa", "#33aaff"];

// Funzione per disegnare il grafico a torta
function drawCanvas(categories, values, colors) {
  var canvas = document.getElementById('grafico');
  var ctx = canvas.getContext('2d');

  // Pulisce il canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = Math.min(centerX, centerY) - 10;

  var total = values.reduce((acc, val) => acc + val, 0);
  var startAngle = 0;
  var endAngle = 0;

  // Disegna l'intestazione
  ctx.fillStyle = 'black';
  ctx.font = 'bold 16px Arial';
  ctx.fillText('Città più popolate', 5, 15);

  for (var i = 0; i < values.length; i++) {
    endAngle = startAngle + (values[i] / total) * (2 * Math.PI);

    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.arc(centerX, centerY, radius, startAngle, endAngle);
    ctx.closePath();
    ctx.fillStyle = colors[i];
    ctx.fill();

    // Calcola l'angolo centrale per posizionare il testo della percentuale
    var midAngle = (startAngle + endAngle) / 2;
    var textX = centerX + (radius / 2) * Math.cos(midAngle);
    var textY = centerY + (radius / 2) * Math.sin(midAngle);

    // Disegna la percentuale all'interno della fetta
    var percentage = (values[i] / total) * 100;
    ctx.fillStyle = 'black';
    ctx.font = 'bold 12px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle'; // Imposta l'allineamento verticale al centro
    ctx.fillText(percentage.toFixed(1) + '%', textX, textY);

    startAngle = endAngle;
  }

  // Disegna la legenda
  var legendX = 0;
  var legendY = 25;
  var legendSize = 15;
  var legendSpacing = 25;

  for (var i = 0; i < categories.length; i++) {
    ctx.fillStyle = colors[i];
    ctx.fillRect(legendX, legendY + i * legendSpacing, legendSize, legendSize);

    ctx.fillStyle = 'black';
    ctx.font = '14px Arial';
    ctx.textAlign = 'left'; // Imposta l'allineamento orizzontale a sinistra
    ctx.textBaseline = 'middle'; // Imposta l'allineamento verticale al centro
    ctx.fillText(categories[i], legendX + legendSize + 5, legendY + i * legendSpacing + legendSize / 2);
  }
}

// Disegna il grafico a torta iniziale all'avvio della pagina
window.onload = function () {
  drawCanvas(categories, values, colors);
};