Utilizzo cookies

HTML5 canvas in tempo reale

Grafico a barre complesso - live

// Dati del grafico
var data = new Array(6);
data[0] = "VoceA,,#FF0000";
data[1] = "VoceB,,#00FF00";
data[2] = "VoceC,,#0000FF";
data[3] = "VoceD,,#FFFF00";
data[4] = "VoceE,,#00FFFF";
data[5] = "VoceF,,#FF00FF";
startX=;// distanza dal lato sinistro del canvas
DistanzaBarreDaBase = canvas.height - ;
LarghezzaBarre = ;
SpazioFraBarre =; // diminuendo spessore barre
ScalaDelGrafico =;

Codice che crea il grafico (pagine HTML completa):

<!DOCTYPE html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

var canvas = document.getElementById('canvas'); // inizializza canvas
var ctx = canvas.getContext('2d');

// Disegna assi cartesiani
function DisegnaAssi(startx, starty, endx, endy) {
ctx.beginPath();
ctx.moveTo(startx, starty); ctx.lineTo(endx, endy);
ctx.closePath();
ctx.stroke();
}

// disegna rettangoli / barre dei valori
function DisegnaRettangolo(x, y, w, h, fill, Colore) {
ctx.fillStyle = Colore;
ctx.beginPath();
ctx.rect(x, y, w - SpazioFraBarre, h);
ctx.closePath();
ctx.stroke();
ctx.fill();
}

// Dati del grafico
var data = new Array(6);
data[0] = "VoceA,90,#FF0000";
data[1] = "VoceB,120,#00FF00";
data[2] = "VoceC,34,#0000FF";
data[3] = "VoceD,160,#FFFF00";
data[4] = "VoceE,37,#00FFFF";
data[5] = "VoceF,73,#FF00FF";
startX= 30;// distanza dal lato sinistro del canvas
DistanzaBarreDaBase = canvas.height - 30;
LarghezzaBarre = 50;
SpazioFraBarre = 5;
ScalaDelGrafico = 50;

ctx.lineWidth = ".5"; startY = 271;
DisegnaAssi(startX, startY, startX, 10); // Disegna asse Y
DisegnaAssi(startX, startY, 390, startY); // Disegna asse X

var maxValue = 0;
for (i=0; i != data.length; i++) {// Estrae i dati
var values = data[i].split(",");
var name = values[0];
var height = parseInt(values[1]);
var Colore = values[2];
if (parseInt(height) > parseInt(maxValue)) maxValue = height;

// Scrivere dati su un grafico
DisegnaRettangolo(startX + (i * LarghezzaBarre) + i, (DistanzaBarreDaBase - height), LarghezzaBarre, height, true, Colore);

// asse x, disegna etichette per ciacuna barra
ctx.textAlign = "left"; ctx.fillStyle = Colore[i];// allineamento e colore
ctx.fillText(name, startX + (i * LarghezzaBarre) + i, DistanzaBarreDaBase + 10, 200);// etichette
ctx.fillText(height, startX + (i * LarghezzaBarre) + i, DistanzaBarreDaBase + 20, 200); // valori
}

// Aggiunge su ascisse la scala del grafico
var numMarkers = Math.ceil(maxValue / ScalaDelGrafico);
ctx.textAlign = "right";
ctx.fillStyle = "#000";
var markerValue = 0;
for (var i=0; i != numMarkers; i++) {
ctx.fillText(markerValue, (startX), (DistanzaBarreDaBase - markerValue), 50);
markerValue += ScalaDelGrafico;
}
});
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

Questo e-book è un e-book interattivo, ciò significa che il lettore può inserire dei dati nelle pagine ed il contenuto di queste si adeguerà ai nuovi valori. Per inserire i dati, nelle pagine dell’e-book, sono stati implementati dei controlli simili a quelli che si possono trovare sulle pagine Internet ed un pulsante esegui per impartire il comando di adeguare il contenuto della pagina ai nuovi valori.

Antonella Brandi
Art-designer