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

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

Referenze

typeSpecifica la tipologia/funzione di un elemento.
<embed>Tag per l'incorporamento di contenuti multimediali
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
<i>Formatta il testo in corsivo/italico non enfatizzato
<h1>Titolo di intestazione di primo livello

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

esercitazione sulle celle

Cappuccetto Rosso - La Storia

Esercitazione Informatica

GUIDA GALATTICA PER AUTOSTOPPISTI

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

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