Come Disegnare Grafici a Barre utilizzando Javascript e Canvas HTML5

Italian (Italiano) translation by Lorenzo Bianciardi (you can also view the original English article)

Final product image — What You'll Be Creating

In un precedente tutorial avevamo visto come realizzare un grafico a torta o un grafico ad anello utilizzando il canvas HTML5. In questo tutorial invece ti mostrerò come usare Javascript e il canvas HTML5 per visualizzare graficamente i dati con i grafici a barre.

Esistono modi più semplici per creare grafici, piuttosto che codificarne uno da zero, ad esempio è possibile usufruire di questa libreria completa di grafici di CodeCanyon.

Infographic charts and graphics HTML tags library — Libreria Infographic Charts proveniente da CodeCanyon

Ma se vuoi sapere cosa serve per realizzare una libreria simile a questa, questo tutorial farà per te.

Cos'è un Grafico a Barre?

I Grafici a Barre sono strumenti molto comuni utilizzati per rappresentare i dati numerici. Dai resoconti finanziari alle presentazioni su PowerPoint agli infografici, i grafici a barre vengono utilizzati frequentemente poiché offrono una visuale dei dati numerici in una maniera veramente semplice da comprendere.

I Grafici a Barre rappresentano i dati numerici usando delle barre, a forma rettangolare, dove le larghezze o le altezze sono proporzionali ai dati numerici indicati.

Esistono molteplici tipi di grafici a barre:

Grafici a barre orizzontali e grafici a barre verticali a seconda dell'orientamento del grafico
Grafici a barre in pila o i classici grafici a barre per rappresentare molteplici tipi di dati
Grafici a barre in 2D o in 3D
ecc.

Quali Sono i Componenti di un Grafico a Barre?

Diamo un'occhiata ai componenti che compongono un grafico a barre indipendentemente dal suo tipo:

I dati del grafico: sono insiemi di numeri e categorie associate che vengono rappresentate dal grafico.
Nome della serie dei dati (1).
La griglia del grafico (2): per dare un sistema di riferimento così che la rappresentazione visuale possa essere più semplice da capire.
Le barre (3): rettangoli pieni di colore con dimensioni proporzionali ai dati rappresentati.
Legenda del grafico (4): mostra la corrispondenza tra i colori utilizzati e i dati che rappresentano.

Ora che conosciamo i componenti di un grafico a barre, vediamo come possiamo scrivere il codice JavaScript per disegnare un grafico come questo.

Disegnando il Grafico a Barre utilizzando Javascript.

Impostazione del Progetto JS.

Per iniziare a disegnare usando JavaScript e il canvas HTML5, dovremo impostare il nostro progetto nella seguente maniera:

Crea una cartella che contenga i file del progetto; chiamiamo questa cartella bar-chart-tutorial.
Dentro la cartella del progetto, crea un file e chiamalo index.html. Questo conterrà tutto il nostro codice HTML.
Sempre dentro la cartella del progetto, crea un file e chiamalo script.js. Questo conterrà il codice Javascript per disegnare il grafico a barre.

Manterremo le cose molto semplici e aggiungeremo il seguente codice all'interno della pagina index.html.

<html>
<body>
    <canvas id="myCanvas"></canvas>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

Abbiamo l'elemento <canvas> con ID myCanvas così che possiamo richiamarlo nel nostro codice JS. Carichiamo allora il codice JS tramite il tag <script>.

Aggiungiamo il seguente codice nel file script.js:

var myCanvas = document.getElementById("myCanvas");
myCanvas.width = 300;
myCanvas.height = 300;
 
var ctx = myCanvas.getContext("2d");

Questo produce un riferimento all'elemento canvas e imposta la larghezza e l'altezza a 300px. Per disegnare nel canvas abbiamo solo bisogno di un riferimento al suo contesto 2D, che contiene tutti i metodi di disegno.

Aggiungendo delle piccole funzioni d'aiuto

Disegnare il grafico a barre richiede solo il saper disegnare due elementi:

disegnare una linea: per disegnare le linee della griglia.
disegnare un rettangolo colorato-totalmente: per disegnare le barre di un grafico

Andiamo a creare le funzioni JS d'aiuto per questi due elementi. Aggiungeremo le funzioni nel nostro file script.js.

function drawLine(ctx, startX, startY, endX, endY,color){
    ctx.save();
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.lineTo(endX,endY);
    ctx.stroke();
    ctx.restore();
}

La funzione drawLine contiene sei parametri:

ctx: si riferisce al contesto disegnato
startX: la coordinata X del punto iniziale della linea
startY: la coordinata Y del punto iniziale della linea
endX: la coordinata X del punto in cui termina la linea
endY: la coordinata Y del punto in cui termina la linea
color: nient'altro che il colore della linea

Stiamo modificando le impostazioni del colore per il strokeStyle. Questo determina il colore usato per disegnare la linea. Usiamo ctx.save() e ctx.restore() in modo da non influenzare i colori usati al di fuori di questa funzione.

Disegniamo la linea chiamando beginPath(). Questo informa il contesto del disegno che noi stiamo iniziando a disegnare qualcosa di nuovo nel canvas. Usiamo moveTo() per impostare il punto d'inizio, chiamiamo invece lineTo() per indicare il punto finale, e quindi eseguiamo il disegno attuale richiamando stroke().

Un'altra funzione di aiuto di cui abbiamo bisogno è una funzione per disegnare una barra, che non è altro che un rettangolo colorato. Aggiungiamolo nel script.js:

function drawBar(ctx, upperLeftCornerX, upperLeftCornerY, width, height,color){
    ctx.save();
    ctx.fillStyle=color;
    ctx.fillRect(upperLeftCornerX,upperLeftCornerY,width,height);
    ctx.restore();
}

La funzione drawBar è formata da sei parametri:

ctx: riferimento al contesto del disegno.
upperLeftCornerX: la coordinata X dell'angolo a sinistra della barra
upperLeftCornerY: la coordinata Y dell'angolo a sinistra della barra
width: la larghezza della barra
height: l'altezza della barra
color: il colore della barra

Il Modello dei Dati del Grafico a Barre

Ora che abbiamo le funzioni d'aiuto, passiamo al modello dei dati del grafico. Tutti i tipi di grafici, inclusi i grafici a barre, hanno un modello dei dati. Il modello dei dati è un insieme strutturato di dati numerici. Per questo tutorial useremo una serie di dati per le categorie e i loro valori numerici associati che rappresentano il numero di dischi in vinile nella mia collezione di dischi raggruppati per genere musicale:

Musica classica: 10
Rock alternativo: 14
Pop: 2
Jazz: 12

Questo può essere rappresentato in Javascript sotto forma di un oggetto. Andiamo ad aggiungerlo nel nostro file script.js:

var myVinyls = {
    "Classical music": 10,
    "Alternative rock": 14,
    "Pop": 2,
    "Jazz": 12
};

Implementando il Componento del Grafico a Barre

Andiamo ad implementare il componente che farà il disegno del nostro grafico a barre. Lo faremo aggiungendo il seguente oggetto Javascript nel nostro file script.js:

var Barchart = function(options){
    this.options = options;
    this.canvas = options.canvas;
    this.ctx = this.canvas.getContext("2d");
    this.colors = options.colors;
 
    this.draw = function(){
        var maxValue = 0;
        for (var categ in this.options.data){
            maxValue = Math.max(maxValue,this.options.data[categ]);
        }
        var canvasActualHeight = this.canvas.height - this.options.padding * 2;
        var canvasActualWidth = this.canvas.width - this.options.padding * 2;

        //drawing the grid lines
        var gridValue = 0;
        while (gridValue <= maxValue){
            var gridY = canvasActualHeight * (1 - gridValue/maxValue) + this.options.padding;
            drawLine(
                this.ctx,
                0,
                gridY,
                this.canvas.width,
                gridY,
                this.options.gridColor
            );
            
            //writing grid markers
            this.ctx.save();
            this.ctx.fillStyle = this.options.gridColor;
            this.ctx.font = "bold 10px Arial";
            this.ctx.fillText(gridValue, 10,gridY - 2);
            this.ctx.restore();

            gridValue+=this.options.gridScale;
        }
 
        //drawing the bars
        var barIndex = 0;
        var numberOfBars = Object.keys(this.options.data).length;
        var barSize = (canvasActualWidth)/numberOfBars;

        for (categ in this.options.data){
            var val = this.options.data[categ];
            var barHeight = Math.round( canvasActualHeight * val/maxValue) ;
            drawBar(
                this.ctx,
                this.options.padding + barIndex * barSize,
                this.canvas.height - barHeight - this.options.padding,
                barSize,
                barHeight,
                this.colors[barIndex%this.colors.length]
            );

            barIndex++;
        }
 
    }
}

La classe inizia memorizzando le opzioni passate come parametri. Memorizza il riferimento del canvas e crea un contesto del disegno anche memorizzato come membro della classe. Quindi memorizza l'array di colors passate come opzioni.

La prossima parte è quella più consistente, la funzione draw(). Questa disegnerà il grafico disegnando prima le linee della griglia, successivamente i marcatori della griglia e infine le barre usando i parametri passati attraverso l'oggetto options.

Osservando la funzione draw(), possiamo notare che inizialmente calcoliamo il valore massimo per il nostro modello dei dati. Abbiamo bisogno di questo numero perché avremo bisogno di ridimensionare tutte le barre in base a questo valore e in base alle dimensioni del canvas. Altrimenti le nostre barre potrebbero uscire dall'area di visualizzazione; cosa che non vogliamo assolutamente che accada.

Le variabili canvasActualHeight e il canvasActualWidth memorizzano l'altezza e la larghezza del canvas regolata usando il valore del padding passato tramite options. La variabile padding indica il numero dei pixel tra il bordo del canvas e l'interno del grafico.

Disegniamo quindi le linee della griglia del grafico. La variabile options.gridScale imposta il pezzo utilizzato per disegnare le linee. Quindi un gridScale di 10 significherà disegnare linee di griglia ogni 10 unità.

Per disegnare le linee della griglia, usiamo la funzione di aiuto drawLine(); per il colore delle linee della griglia, lo prendiamo dalla variabile options.gridColor. Si noti che le coordinate del canvas iniziano da 0,0 nell'angolo in alto a sinistra che aumentano a destra e in basso, mentre i valori della griglia aumentano di valore dal basso verso l'alto. Questo è il motivo per cui usiamo 1 - gridValue/maxValue nella formula per calcolare il valore di gridY.

Per ogni linea della griglia, disegniamo anche il valore della linea della griglia di 2 pixel sopra la linea della griglia (ecco perché abbiamo gridY - 2 per le coordinate Y del testo).

Quindi disegniamo le barre usando la funzione di aiuto drawBar(). Il calcolo matematico per calcolare l'altezza e la larghezza di ogni barra è abbastanza semplice; questi tengono conto del padding e del valore e colore per ogni categoria nel modello di dati del grafico.

Usando il Componente del Grafico a Barre

Adesso andiamo a vedere come usare la classe Barchart implementata sopra. Abbiamo bisogno di istanziare la classe e richiamare la funzione draw(). Aggiungiamo il seguente codice nel file script.js:

var myBarchart = new Barchart(
    {
        canvas:myCanvas,
        padding:10,
        gridScale:5,
        gridColor:"#eeeeee",
        data:myVinyls,
        colors:["#a55ca5","#67b6c7", "#bccd7a","#eb9743"]
    }
);
myBarchart.draw();

Il codice crea una nuova istanza della classe Barchart con le opzioni richieste. Caricando l'index.html su un broswer otterremo un risultato simile a questo:

Aggiungendo il Nome della serie Dati e la Legenda del Grafico

Per aggiungere il nome della serie di dati sotto il grafico, è necessario aggiungere il seguente codice nel file script.js dopo il for-loop che disegna la barra:

        ...
        //drawing series name
        this.ctx.save();
        this.ctx.textBaseline="bottom";
        this.ctx.textAlign="center";
        this.ctx.fillStyle = "#000000";
        this.ctx.font = "bold 14px Arial";
        this.ctx.fillText(this.options.seriesName, this.canvas.width/2,this.canvas.height);
        this.ctx.restore();  
        ...

Abbiamo anche bisogno di cambiare il modo in cui chiamiamo il componente Barchart in questa maniera:

var myBarchart = new Barchart(
    {
        canvas:myCanvas,
        seriesName:"Vinyl records",
        padding:20,
        gridScale:5,
        gridColor:"#eeeeee",
        data:myVinyls,
        colors:["#a55ca5","#67b6c7", "#bccd7a","#eb9743"]
    }
);
myBarchart.draw();

Ed ecco come appare il risultato:

Per aggiungere la legenda, abbiamo bisogno da prima di modificare l'index.html facendolo assomigliare a questo:

<html>
<body>
    <canvas id="myCanvas" style="background: white;"></canvas>
    <legend for="myCanvas"></legend>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

Il tag legenda verrà usato come un contenitore per la legenda del grafico. L'attributo for collega la legenda al canvas contenente il grafico. Ora dobbiamo cambiare il codice che crea la legenda. Dobbiamo fare questo nel file index.js dopo che il codice disegni il nome della serie di dati. Il codice identifica il tag legenda corrispondendolo ad un grafico, e l'aggiungerà alla lista delle categoria dal grafico del modello dei dati insieme al colore corrispondente. Il risultato del file index.js assomiglierà a questo:

var myCanvas = document.getElementById("myCanvas");
myCanvas.width = 300;
myCanvas.height = 300;
  
var ctx = myCanvas.getContext("2d");

function drawLine(ctx, startX, startY, endX, endY,color){
    ctx.save();
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.lineTo(endX,endY);
    ctx.stroke();
    ctx.restore();
}

function drawBar(ctx, upperLeftCornerX, upperLeftCornerY, width, height,color){
    ctx.save();
    ctx.fillStyle=color;
    ctx.fillRect(upperLeftCornerX,upperLeftCornerY,width,height);
    ctx.restore();
}

var myVinyls = {
    "Classical music": 10,
    "Alternative rock": 14,
    "Pop": 2,
    "Jazz": 12
};

var Barchart = function(options){
    this.options = options;
    this.canvas = options.canvas;
    this.ctx = this.canvas.getContext("2d");
    this.colors = options.colors;
 
    this.draw = function(){
        var maxValue = 0;
        for (var categ in this.options.data){
            maxValue = Math.max(maxValue,this.options.data[categ]);
        }
        var canvasActualHeight = this.canvas.height - this.options.padding * 2;
        var canvasActualWidth = this.canvas.width - this.options.padding * 2;

        //drawing the grid lines
        var gridValue = 0;
        while (gridValue <= maxValue){
            var gridY = canvasActualHeight * (1 - gridValue/maxValue) + this.options.padding;
            drawLine(
                this.ctx,
                0,
                gridY,
                this.canvas.width,
                gridY,
                this.options.gridColor
            );
            
            //writing grid markers
            this.ctx.save();
            this.ctx.fillStyle = this.options.gridColor;
            this.ctx.textBaseline="bottom"; 
            this.ctx.font = "bold 10px Arial";
            this.ctx.fillText(gridValue, 10,gridY - 2);
            this.ctx.restore();

            gridValue+=this.options.gridScale;
        }      
 
        //drawing the bars
        var barIndex = 0;
        var numberOfBars = Object.keys(this.options.data).length;
        var barSize = (canvasActualWidth)/numberOfBars;

        for (categ in this.options.data){
            var val = this.options.data[categ];
            var barHeight = Math.round( canvasActualHeight * val/maxValue) ;
            drawBar(
                this.ctx,
                this.options.padding + barIndex * barSize,
                this.canvas.height - barHeight - this.options.padding,
                barSize,
                barHeight,
                this.colors[barIndex%this.colors.length]
            );

            barIndex++;
        }

        //drawing series name
        this.ctx.save();
        this.ctx.textBaseline="bottom";
        this.ctx.textAlign="center";
        this.ctx.fillStyle = "#000000";
        this.ctx.font = "bold 14px Arial";
        this.ctx.fillText(this.options.seriesName, this.canvas.width/2,this.canvas.height);
        this.ctx.restore();  
        
        //draw legend
        barIndex = 0;
        var legend = document.querySelector("legend[for='myCanvas']");
        var ul = document.createElement("ul");
        legend.append(ul);
        for (categ in this.options.data){
            var li = document.createElement("li");
            li.style.listStyle = "none";
            li.style.borderLeft = "20px solid "+this.colors[barIndex%this.colors.length];
            li.style.padding = "5px";
            li.textContent = categ;
            ul.append(li);
            barIndex++;
        }
    }
}


var myBarchart = new Barchart(
    {
        canvas:myCanvas,
        seriesName:"Vinyl records",
        padding:20,
        gridScale:5,
        gridColor:"#eeeeee",
        data:myVinyls,
        colors:["#a55ca5","#67b6c7", "#bccd7a","#eb9743"]
    }
);

Quale produrrà un risultato finale come questo:

Congratulazioni

Abbiamo visto che disegnare grafici usando il canvas HTML5 non è poi così difficile. Richiede solo un po 'di matematica e un po' di conoscenza di JavaScript. Ora hai tutto ciò che ti serve per disegnare i tuoi grafici a barre.

Se si desidera avere una soluzione veloce e semplice per creare non solo grafici a barre, ma molti altri tipi di grafici, è possibile scaricare la libreria Infrographic Charts and Graphics HTML Tags o la controparte estensione di WordPress Charts and Graphs WordPress Visual Designer.