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

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

References

<address> Definisce una sezione contenente indirizzi, contatti e informazioni
forSpecifica a quale id è associato l'elemento in cui è dichiarato.
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
downloadConsente di scaricare file al click di collegamento ipertestuale.
<ol>Crea liste ordinate o numerate.
hrefDefinisce l'URL della risorsa/pagina di destinazione.

Users

Log in to search for users

Explore

Find inspiration

Inserimento immagini in un testo

Immagini con didascalia

Questa è una pagina dimostrativa

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);
};