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

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

References

autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.
Inserisce un commento nel codice
minlengthDetermina il numero minimo di caratteri per un elemento input
<tr>Definisce le righe di una tabella (rows)
<aside>Definisce un contenuto separato dal testo perincipale

Users

Log in to search for users

Explore

Find inspiration

inserimento immagini in un testo

conta caratteri online

calcola peso in byte

Esercizio gatto

HTML - Esercizi

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