Grafico a Barre con HTML Canvas

Esempio di grafico a barre 2D utilizzando il tag Canvas di HTML 5, utilizzando le primitive di base. I valori del grafico sono generati casualmente.

Internet Explorer non supporta il tag Canvas, almeno per ora.

Ecco il codice:

  var context = document.getElementById("chartCanvas").getContext("2d");
  context.fillStyle = "#84C341";

  var wide=5;
  for (var x=0; x < 400; x+=wide) {
      var val = 150 * Math.random();
      context.beginPath();
      context.rect(x, 150-val, wide-1, val );
      context.fill();
  }

Versione Orizzontale:


Ecco il codice:

 var context = document.getElementById("chartCanvasHoriz").getContext("2d");
  context.fillStyle = "#84C341";

  var wide=10;
  for (var y=0; y < 200; y+=wide) {
      var val = 400 * Math.random();
      context.beginPath();
      context.rect(0, y, val, wide-2 );
      context.fill();
  }

Rispondi