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

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

References

<body>Tag primario di un documento HTML
<html>Tag primario di un documento HTML
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
<label>Mostrare un testo di etichetta per un elemento di input.
<option>Serve ad inserire una voce in un menu di selezione.
<blockquote>Inserisce citazioni in un documento HTML

Users

Log in to search for users

Explore

Find inspiration

Form Raccolta Segnalazioni Immobil

Blocco visualizzazione PC

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