JavaScript: creare un grafico a barre con l'elemento canvas

Creare un grafico a barre in puro JavaScript utilizzando l'elemento canvas è un compito che può sembrare complesso, ma con una buona guida passo-passo, diventa un'attività gestibile anche per chi ha poca esperienza. In questo articolo, vedremo come impostare un semplice grafico a barre senza l'uso di librerie esterne, sfruttando solo JavaScript e l'API Canvas di HTML5.

Per prima cosa, dobbiamo creare un file HTML che includa l'elemento canvas dove disegneremo il nostro grafico. Ecco un semplice esempio di come potrebbe apparire il nostro file HTML:


<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grafico a Barre</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <h1>Grafico a Barre in Puro JavaScript</h1>
    <canvas id="barChart" width="800" height="600"></canvas>
    <script src="script.js"></script>
</body>
</html>

In questo file HTML, abbiamo un elemento canvas con l'id "barChart" e un file JavaScript esterno chiamato script.js dove scriveremo il nostro codice JavaScript.

Nel file script.js, iniziamo definendo i dati che vogliamo rappresentare e alcune configurazioni di base per il nostro grafico:


// Dati del grafico
const data = [10, 20, 30, 40, 50];
const labels = ['Gen', 'Feb', 'Mar', 'Apr', 'Mag'];

// Configurazione del grafico
const canvas = document.getElementById('barChart');
const ctx = canvas.getContext('2d');
const chartWidth = canvas.width;
const chartHeight = canvas.height;
const padding = 50;
const barWidth = (chartWidth - (2 * padding)) / data.length;

Ora possiamo scrivere il codice per disegnare il grafico a barre. Divideremo questo passaggio in più sotto-passaggi per maggiore chiarezza.

Disegnare le barre


ctx.fillStyle = 'blue';
for (let i = 0; i < data.length; i++) {
    const barHeight = data[i] * (chartHeight - 2 * padding) / Math.max(...data);
    const x = padding + i * barWidth;
    const y = chartHeight - padding - barHeight;
    ctx.fillRect(x, y, barWidth - 10, barHeight);
}

Aggiungere le Etichette


ctx.fillStyle = 'black';
ctx.font = '16px Arial';
ctx.textAlign = 'center';
for (let i = 0; i < labels.length; i++) {
    const x = padding + i * barWidth + (barWidth - 10) / 2;
    const y = chartHeight - padding + 20;
    ctx.fillText(labels[i], x, y);
}

Aggiungere gli Assi


// Asse Y
ctx.beginPath();
ctx.moveTo(padding, padding);
ctx.lineTo(padding, chartHeight - padding);
ctx.stroke();

// Asse X
ctx.beginPath();
ctx.moveTo(padding, chartHeight - padding);
ctx.lineTo(chartWidth - padding, chartHeight - padding);
ctx.stroke();

Codice Completo

Ecco il codice JavaScript completo per creare il grafico a barre:


// Dati del grafico
const data = [10, 20, 30, 40, 50];
const labels = ['Gen', 'Feb', 'Mar', 'Apr', 'Mag'];

// Configurazione del grafico
const canvas = document.getElementById('barChart');
const ctx = canvas.getContext('2d');
const chartWidth = canvas.width;
const chartHeight = canvas.height;
const padding = 50;
const barWidth = (chartWidth - (2 * padding)) / data.length;

// Disegnare le barre
ctx.fillStyle = 'blue';
for (let i = 0; i < data.length; i++) {
    const barHeight = data[i] * (chartHeight - 2 * padding) / Math.max(...data);
    const x = padding + i * barWidth;
    const y = chartHeight - padding - barHeight;
    ctx.fillRect(x, y, barWidth - 10, barHeight);
}

// Aggiungere le etichette
ctx.fillStyle = 'black';
ctx.font = '16px Arial';
ctx.textAlign = 'center';
for (let i = 0; i < labels.length; i++) {
    const x = padding + i * barWidth + (barWidth - 10) / 2;
    const y = chartHeight - padding + 20;
    ctx.fillText(labels[i], x, y);
}

// Aggiungere assi
// Asse Y
ctx.beginPath();
ctx.moveTo(padding, padding);
ctx.lineTo(padding, chartHeight - padding);
ctx.stroke();

// Asse X
ctx.beginPath();
ctx.moveTo(padding, chartHeight - padding);
ctx.lineTo(chartWidth - padding, chartHeight - padding);
ctx.stroke();

Conclusione

n questo articolo, abbiamo visto come creare un semplice grafico a barre utilizzando solo JavaScript e l'elemento canvas. Questa è una base solida da cui partire; potete espandere questo esempio aggiungendo ulteriori funzionalità come titoli, linee di griglia, colori personalizzati e animazioni. L'API Canvas di HTML5 offre molte possibilità per creare visualizzazioni grafiche potenti e interattive.

Torna su