Istogramma a colonne by @Codewith.it - Codewith.it

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

References

minlengthDetermina il numero minimo di caratteri per un elemento input
<embed>Tag per l'incorporamento di contenuti multimediali
<ul>Usato per la creazione di liste non ordinate.
<html>Tag primario di un documento HTML
methodDetermina il metodo di invio dei dati di un form al server
hreflangConsente di dichiarare la lingua del documento collegato.

Users

Log in to search for users

Explore

Find inspiration

Costruzione di tabella con html5

Crunchyroll Replica

STILI + IMMAGINI

Esercizi 05/03/2024 es5

La Storia di Cappuccetto Rosso

5/10/24 es. 8 - conta alfabeto

5/10/24 es. 6 - letterainform

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>Istogramma a colonne</title>
</head>

<body>
  <canvas id="grafico" width="500" height="300"></canvas>
</body>

</html>

// Dati di esempio per le date e i valori
var dates = ["01/07", "02/07", "03/07", "04/07", "05/07", "06/07", "07/07"];
var values = [20, 60, 40, 90, 150, 80, 110];

// Funzione per disegnare l'istogramma con date e valori personalizzati
function drawCanvas(dates, values) {
  var canvas = document.getElementById('grafico');
  var ctx = canvas.getContext('2d');

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

  var barWidth = 30;
  var startX = 70;
  var startY = canvas.height - 50;
  var fontSize = 12;

  // Trova il minimo e il massimo valore nell'array dei valori
  var minValue = Math.min(...values);
  var maxValue = Math.max(...values);

  // Calcola i numeri intermedi tra il minimo e il massimo per l'asse y
  var interval = (maxValue - minValue) / 4;
  var yValues = [];
  for (var i = 0; i <= 4; i++) {
    yValues.push(minValue + interval * i);
  }

  // Calcola il valore di partenza (includendo il valore minimo meno uno step)
  var startValue = minValue - interval;
  yValues.unshift(startValue);

  // Disegna l'intestazione
  ctx.fillStyle = 'black';
  ctx.font = 'bold 16px Arial';
  ctx.textAlign = 'center';
  ctx.fillText('Andamento prezzo (€/kg)', canvas.width / 2, 30);

  // Disegna la griglia sullo sfondo
  ctx.strokeStyle = '#f0f0f0';
  ctx.lineWidth = 1;
  for (var i = 0; i <= 4; i++) {
    var y = startY - (yValues[i] - startValue) / (maxValue - startValue) * (canvas.height - 100);
    ctx.beginPath();
    ctx.moveTo(startX, y);
    ctx.lineTo(canvas.width - 30, y);
    ctx.stroke();
  }

  // Disegna i valori sull'asse y
  for (var i = 0; i < yValues.length; i++) {
    if (i > 0) {
      var y = startY - (yValues[i] - startValue) / (maxValue - startValue) * (canvas.height - 100);
      ctx.fillStyle = 'black';
      ctx.font = fontSize + 'px Arial';
      ctx.textAlign = 'right';
      ctx.fillText(yValues[i].toFixed(0), startX - 10, y + fontSize / 2);
    }
  }

  // Disegna le barre dell'istogramma con date
  for (var i = 0; i < dates.length; i++) {
    var barHeight = (values[i] - startValue) / (maxValue - startValue) * (canvas.height - 100);
    ctx.fillStyle = 'blue';
    ctx.fillRect(startX, startY - barHeight, barWidth, barHeight);

    // Disegna la data sotto la colonna
    ctx.fillStyle = 'black';
    ctx.font = fontSize + 'px Arial';
    ctx.textAlign = 'center';
    ctx.fillText(dates[i], startX + barWidth / 2, startY + fontSize + 5);

    startX += barWidth + 20;
  }
}

// Disegna l'istogramma iniziale all'avvio della pagina
window.onload = function () {
  drawCanvas(dates, values);
};