Cara Menggambar Diagram Batang Menggunakan JavaScript dan Canvas HTML5

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Final product image — What You'll Be Creating

Dalam tutorial sebelumnya, kita membahas cara menggambar diagram lingkaran atau diagram donat menggunakan canvas HTML5. Dalam tutorial ini saya akan menunjukkan cara menggunakan JavaScript dan canvas HTML5 sebagai sarana untuk menampilkan data secara grafis dengan menggunakan diagram batang.

Ada cara yang lebih mudah untuk membuat diagram daripada mengkodekannya dari awal, misalnya pustaka diagram lengkap ini dari CodeCanyon.

Infographic charts and graphics HTML tags library — Pustaka Diagram Infografis dari CodeCanyon

Tapi jika Anda ingin tahu apa yang diperlukan untuk membuat pustaka seperti ini, tutorial ini untuk Anda.

Apa itu Diagram Batang?

Diagram batang adalah alat yang sangat umum digunakan untuk mewakili data numerik. Dari laporan keuangan hingga presentasi PowerPoint hingga infografis, diagram batang sangat sering digunakan karena mereka menawarkan tampilan data numerik yang sangat mudah dipahami.

Diagram batang mewakili data numerik dengan menggunakan batang, yang berbentuk persegi panjang dengan lebar atau tinggi proporsional dengan data numerik yang mereka wakili.

Ada banyak jenis diagram batang:

diagram batang horisontal dan diagram batang vertikal tergantung pada orientasi diagram
diagram batang yang ditumpuk atau diagram batang klasik untuk mewakili beberapa rangkaian data
diagram batang 2D atau 3D
dll.

Apa Saja Komponen dari Diagram Batang?

Mari kita lihat komponen yang membentuk diagram batang terlepas dari jenisnya:

Data diagram: ini adalah kumpulan angka dan kategori terkait yang ditunjukkan oleh diagram.
Nama rangkaian data (1).
Grid diagram (2): memberikan sistem referensi sehingga representasi visual dapat dengan mudah dipahami.
Batang (3): persegi panjang penuh warna dengan dimensi sebanding dengan data yang diwakili.
Legenda diagram (4): menunjukkan korespondensi antara warna yang digunakan dan data yang mereka wakili.

Sekarang kita tahu komponen diagram batang, mari kita lihat bagaimana kita bisa menulis kode JavaScript untuk menggambar diagram seperti ini.

Menggambar Diagram Batang Menggunakan JavaScript

Menyiapkan Proyek JS

Untuk mulai menggambar menggunakan JavaScript dan canvas HTML5, kita perlu menyiapkan proyek kita seperti ini:

Buatlah folder untuk menampung file proyek; mari kita sebut folder ini bar-chart-tutorial.
Di dalam folder proyek, buat file dan sebutlah index.html. Ini akan berisi kode HTML kita.
Juga di dalam folder proyek, buat file dan sebutlah script.js. Ini akan berisi kode JavaScript untuk menggambar diagram batang.

Kita akan menjaga hal-hal sangat sederhana dan menambahkan kode berikut di dalam index.html:

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

Kita memiliki elemen <canvas> dengan ID myCanvas sehingga kita bisa mereferensikannya dalam kode JS kita. Kita kemudian memuat kode JS melalui tag <script>.

Tambahkan kode berikut di file script.js:

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

Ini mendapatkan referensi ke elemen canvas dan kemudian menetapkan lebar dan tinggi menjadi 300px. Untuk menggambar di canvas, kita hanya memerlukan referensi ke konteks 2D, yang berisi semua metode gambar.

Menambahkan Beberapa Fungsi Pembantu

Menggambar diagram batang hanya perlu mengetahui cara menggambar dua elemen:

menggambar garis: untuk menggambar garis grid
menggambar persegi panjang berisi warna: untuk menggambar batang dari diagram

Mari membuat fungsi JS pembantu untuk kedua elemen ini. Kita akan menambahkan fungsi di file script.js kita.

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

Fungsi drawLine mengambil enam parameter:

ctx: mengacu pada konteks gambar
startX: koordinat X dari titik awal garis
startY: koordinat Y dari titik awal garis
endX: koordinat X dari titik akhir garis
endY: koordinat Y dari titik akhir garis
color: warna dari garis

Kita memodifikasi pengaturan warna untuk strokeStyle. Ini menentukan warna yang digunakan untuk menggambar garis. Kita menggunakan ctx.save() dan ctx.restore() sehingga kita tidak mempengaruhi warna yang digunakan di luar fungsi ini.

Kita menggambar garis dengan memanggil beginPath(). Ini menginformasikan konteks gambar bahwa kita mulai menggambar sesuatu yang baru di atas canvas. Kita menggunakan moveTo() untuk mengatur titik awal, panggilan lineTo() untuk menunjukkan titik akhir, dan kemudian benar-benar menggambar dengan memanggil stroke().

Fungsi pembantu lain yang kita butuhkan adalah fungsi untuk menggambar sebuah batang—yang merupakan persegi panjang berisi warna. Mari menambahkannya ke script.js:

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

Fungsi drawBar membutuhkan enam parameter:

ctx: mengacu pada konteks gambar
upperLeftCornerX: koordinat X dari pojok kiri atas batang
upperLeftCornerY: koordinat Y dari pojok kiri atas batang
width: lebar batang
height: tinggi batang
color: warna dari batang

Model Data Diagram Batang

Sekarang setelah fungsi pembantu kita di tempatnya, mari beralih ke model data diagram. Semua jenis grafik, termasuk diagram batang, memiliki model data di belakangnya. Model data adalah kumpulan data numerik yang terstruktur. Untuk tutorial ini kita akan menggunakan serangkaian data kategori dan nilai numerik yang terkait yang mewakili jumlah rekaman vinyl dalam kumpulan rekaman saya yang dikelompokkan berdasarkan genre musik:

Classical music: 10
Alternative rock: 14
Pop: 2
Jazz: 12

Kita bisa mewakili ini dalam JavaScript dalam bentuk objek. Mari menambahkannya ke file script.js kita:

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

Menerapkan Komponen Diagram Batang

Mari kita menerapkan komponen yang akan melakukan penggambaran grafik batang kita yang sebenarnya. Kita akan melakukan ini dengan menambahkan objek JavaScript berikut ke file script.js kita:

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++;
        }
 
    }
}

Kelas dimulai dengan menyimpan options yang diberikan sebagai parameter. Ini menyimpan referensi canvas dan menciptakan konteks gambar juga disimpan sebagai anggota kelas. Kemudian ia menyimpan array colors yang disampaikan sebagai opsi.

Bagian selanjutnya adalah yang paling konsisten, fungsi draw(). Ini akan menggambar diagram dengan terlebih dahulu menggambar garis grid, penanda grid dan kemudian batangnya yang menggunakan parameter yang dikirimkan objek options.

Melihat fungsi draw(), kita dapat melihat bahwa pertama kita menghitung nilai maksimum untuk model data kita. Kita membutuhkan angka ini karena kita perlu mengukur semua jenis batang sesuai dengan nilai ini dan sesuai dengan ukuran kanvasnya. Jika tidak, batang kita mungkin berada di luar area tampilan, dan kita tidak menginginkannya.

Variabel canvasActualHeight dan canvasActualWidth menyimpan tinggi dan lebar canvas yang disesuaikan dengan nilai padding yang disampaikan melalui options. Variabel padding menunjukkan jumlah piksel antara tepi canvas dan diagram di dalamnya.

Kita kemudian menggambar garis grid dari diagram. Variabel options.gridScale menetapkan langkah yang digunakan untuk menggambar garis. Jadi gridScale 10 berarti menggambar garis grid setiap 10 unit.

Untuk menggambar garis grid, kita menggunakan fungsi pembantu drawLine(); sedangkan untuk warna garis grid, kita mengambilnya dari variabel options.gridColor. Perlu diketahui bahwa koordinat canvas dimulai dari 0,0 di sudut kiri atas dan naik ke arah kanan dan bawah, sementara nilai grid kita meningkat nilainya dari bawah ke arah atas. Itulah sebabnya kita menggunakan 1 - gridValue/maxValue dalam rumus yang menghitung nilai gridY.

Untuk setiap garis grid, kita juga menggambar nilai garis grid 2 piksel di atas garis grid (karena itulah kita memiliki gridY - 2 untuk koordinat Y dari teks).

Selanjutnya kita menggambar batang dengan menggunakan fungsi pembantu drawBar(). Matematika untuk menghitung tinggi dan lebar masing-masing batang sangat mudah; itu memperhitungkan padding dan nilai dan warna untuk setiap kategori dalam model data diagram.

Menggunakan Komponen Diagram Batang

Sekarang mari kita lihat bagaimana menggunakan kelas Barchart yang diterapkan di atas. Kita perlu menjalankan kelas dan memanggil fungsi draw(). Tambahkan kode berikut ke file script.js:

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

Kode membuat instance baru dari kelas Barchart dengan opsi yang diperlukan. Memuat index.html di browser harus menghasilkan hasil seperti ini:

Menambahkan Nama Seri Data dan Legenda Diagram

Untuk menambahkan nama seri data di bawah diagram, kita perlu menambahkan kode berikut di file script.js setelah for-loop yang menggambar batang:

        ...
        //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();  
        ...

Kita juga perlu mengubah cara kita memanggil komponen Barchart seperti ini:

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

Dan beginilah hasilnya:

Untuk menambahkan legenda, pertama kita perlu memodifikasi index.html agar terlihat seperti ini:

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

Tag legend akan digunakan sebagai tempat untuk legenda diagram. Atribut for menghubungkan legenda ke canvas yang memegang diagram. Kita sekarang perlu menambahkan kode yang menciptakan legenda. Kita akan melakukan ini di file index.js setelah kode yang menggambar nama seri data. Kode ini mengidentifikasi tag legend yang sesuai dengan diagram, dan akan menambahkan daftar kategori dari model data diagram bersamaan dengan warna yang sesuai. File index.js yang dihasilkan akan terlihat seperti ini:

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"]
    }
);

Yang akan menghasilkan hasil akhir terlihat seperti ini:

Selamat

Kita telah melihat bahwa menggambar diagram menggunakan canvas HTML5 sebenarnya tidak terlalu sulit. Ini hanya membutuhkan sedikit matematika dan sedikit pengetahuan JavaScript. Anda sekarang memiliki semua yang Anda butuhkan untuk menggambar diagram batang Anda sendiri.

Jika Anda menginginkan solusi cepat dan mudah untuk tidak hanya membuat diagram batang, tapi juga banyak jenis diagram lainnya, Anda dapat men-download Infographic Charts and Graphics HTML Tags Library atau plugin WordPress pasangannya Charts and Graphs WordPress Visual Designer.