Cara Menggambar Grafik 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 ini, saya akan menunjukkan cara menggunakan JavaScript dan canvas sebagai sarana untuk menampilkan informasi numerik dalam bentuk diagram lingkaran dan diagram donat.

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

Infographic charts and graphics HTML tags library — Pustaka bagan dari CodeCanyon

Tapi jika Anda ingin tahu apa yang terjadi di balik layar di pustaka seperti ini, bacalah terus.

Apa itu Diagram Lingkaran?

Bagan adalah alat statistik yang digunakan untuk menerangkan data numerik secara grafis. Diagram lingkaran menampilkan data numerik sebagai lingkaran yang dibagi menjadi irisan-irisan. Ukuran masing-masing potongan sebanding dengan nilai numerik yang dimilikinya.

Apa itu Diagram Donat?

Singkatnya, diagram donat adalah variasi pada diagram lingkaran. Perbedaannya adalah irisan dipotong menuju pusat pie sehingga hanya bingkai yang terlihat. Dengan cara ini, bagan itu terlihat seperti donat dan oleh karena itulah namanya.

Mulai Menggambar dengan Canvas

Sebelum menggambar diagram lingkaran, kita akan melihat pada menggambar bagian-bagiannya. Kita akan melihat bagaimana kita bisa menggunakan komponen canvas dan JavaScript untuk menggambar:

sebuah garis
sebuah busur (bagian dari lingkaran)
sebuah bentuk yang berisi warna

Untuk mulai menggambar menggunakan canvas HTML5, kita perlu membuat beberapa hal:

Satu folder untuk menyimpan file proyek; mari kita sebut folder ini piechart-tutorial.
Satu file HTML index.html di dalam folder piechart-tutorial. File ini akan berisi kode HTML.
Satu file script.js di dalam folder piechart-tutorial. File ini akan berisi kode JavaScript kita.

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>.

Di dalam script.js, kode JS pertama akan mendapatkan referensi ke canvas dan kemudian mengatur lebar dan tingginya. Untuk menggambar di canvas, kita hanya memerlukan referensi ke konteks 2D yang berisi semua metode menggambar.

var myCanvas = document.getElementById("myCanvas");
myCanvas.width = 300;
myCanvas.height = 300;

var ctx = myCanvas.getContext("2d");

Setelah kita menyiapkan canvas dan juga mereferensikan ke canvas menggambar, mari kita definisikan beberapa fungsi JavaScript yang bisa kita gunakan kembali saat menggambar diagram lingkaran. Kita akan menambahkan fungsi di file script.js kita.

function drawLine(ctx, startX, startY, endX, endY){
    ctx.beginPath();
	ctx.moveTo(startX,startY);
	ctx.lineTo(endX,endY);
	ctx.stroke();
}

Fungsi drawLine mengambil lima 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

Kita mulai 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().

Sekarang mari kita lihat bagaimana kita bisa menggambar bagian lingkaran, juga disebut busur.

function drawArc(ctx, centerX, centerY, radius, startAngle, endAngle){
    ctx.beginPath();
	ctx.arc(centerX, centerY, radius, startAngle, endAngle);
	ctx.stroke();
}

Fungsi drawArc mengambil enam parameter:

ctx: mengacu pada konteks gambar
centerX: koordinat X dari pusat lingkaran
centerY: koordinat Y dari pusat lingkaran
radius: koordinat X dari titik akhir garis
startAngle: sudut awal di radian dimana bagian lingkaran dimulai
endAngle: sudut akhir radian di mana bagian lingkaran berakhir

Kita telah melihat cara menggambar garis dan cara menggambar busur, jadi sekarang mari kita lihat cara menggambar bentuk yang berwarna. Karena tujuan kita adalah menggambar diagram lingkaran yang terdiri dari irisan-irisan, mari buat fungsi yang menggambar potongan lingkaran.

function drawPieSlice(ctx,centerX, centerY, radius, startAngle, endAngle, color ){
    ctx.fillStyle = color;
	ctx.beginPath();
	ctx.moveTo(centerX,centerY);
	ctx.arc(centerX, centerY, radius, startAngle, endAngle);
	ctx.closePath();
	ctx.fill();
}

Fungsi drawPieSlice mengambil tujuh parameter:

ctx: mengacu pada konteks gambar
centerX: koordinat X dari pusat lingkaran
centerY: koordinat Y dari pusat lingkaran
radius: koordinat X dari titik akhir garis
startAngle: sudut awal di radian dimana bagian lingkaran dimulai
endAngle: sudut akhir radian di mana bagian lingkaran berakhir
color: warna yang digunakan untuk mengisi potongan

Berikut adalah contoh untuk memanggil tiga fungsi:

1	drawLine(_ctx,100,100,200,200);
2	drawArc(_ctx, 150,150,150, 0, Math.PI/3);
3	drawPieSlice(_ctx, 150,150,150, Math.PI/2, Math.PI/2 + Math.PI/4, '#ff0000');

Ini akan menghasilkan hasil ini:

Sekarang kita memiliki semua alat yang diperlukan untuk menggambar diagram lingkaran, jadi mari kita lihat bagaimana kita menggunakannya bersama-sama.

Menggambar Diagram Lingkaran

Secara konsep, setiap diagram memiliki dua bagian utama:

Model data yang berisi data numerik untuk diwakili. Ini terstruktur dalam format yang khusus terhadap jenis diagram.
Representasi grafisnya adalah bagaimana data numerik dalam model data digambarkan oleh elemen visual sesuai dengan beberapa peraturan dalam bentuk rumus matematika.

Model Data Diagram Lingkaran

Cara yang paling umum dari menyusun model data untuk diagram lingkaran adalah serangkaian kategori dan nilai yang sesuai, di mana masing-masing kategori dan nilai dikaitkan dengan potongan lingkaran.

Sebagai contoh, model data diagram lingkaran yang menampilkan jumlah vinyl yang telah dikelompokkan menurut genre akan terlihat seperti:

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

Kita bisa menambahkan objek JS ke file script.js untuk menyimpan data model seperti ini:

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

Representasi Grafis Diagram Lingkaran

Diagram lingkaran menggunakan lingkaran untuk menampilkan informasi dalam model data dengan membaginya menjadi irisan-irisan. Setiap irisan sesuai dengan kategori dari model data, dan ukuran potongannya sebanding dengan nilai kategori.

Koleksi kecil saya dari 38 vinyl memiliki empat kategori. Setiap kategori akan mendapatkan sepotong pie chart sebanding dengan jumlah vinyl dalam kategori tersebut.

Tapi bagaimana kita mengukur ukuran potongannya? Itu mudah—kita melakukannya dengan sudut di ujung irisan. Yang harus kita ketahui adalah bahwa lingkaran penuh sesuai dengan sudut 360 derajat atau 2 * PI. Jadi setengah lingkaran akan menjadi 180 derajat atau PI, seperempat 90 derajat atau PI/2, dan seterusnya.

Untuk menentukan sudut untuk setiap slice kategori, kita menggunakan rumus:

sudut potongan = 2 * PI * nilai kategori / nilai total

Menurut rumus ini, sepuluh vinyl classical music akan mendapatkan sudut iris kira-kira 0,526 * PI atau 94 derajat.

Mari kita menggambar. Untuk ini kita akan menggunakan kelas JavaScript yang akan kita beri nama Piechart. Constructor akan menerima satu argumen opsi, sebuah objek yang berisi yang berikut ini:

canvas: mengacu ke canvas dimana kita ingin menggambar diagram lingkaran
data: mengacu pada objek yang memegang model data
colors: array yang memegang warna-warna yang ingin kita gunakan untuk setiap irisan

Kelas Piechart juga berisi satu metode draw() yang menggambarkan diagram sebenarnya.

var Piechart = function(options){
    this.options = options;
	this.canvas = options.canvas;
	this.ctx = this.canvas.getContext("2d");
	this.colors = options.colors;

	this.draw = function(){
		var total_value = 0;
		var color_index = 0;
		for (var categ in this.options.data){
			var val = this.options.data[categ];
			total_value += val;
		}

		var start_angle = 0;
		for (categ in this.options.data){
			val = this.options.data[categ];
			var slice_angle = 2 * Math.PI * val / total_value;

			drawPieSlice(
				this.ctx,
				this.canvas.width/2,
				this.canvas.height/2,
				Math.min(this.canvas.width/2,this.canvas.height/2),
				start_angle,
				start_angle+slice_angle,
				this.colors[color_index%this.colors.length]
			);

			start_angle += slice_angle;
			color_index++;
		}

	}
}

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 menarik data dari model data. Pertama, menghitung jumlah semua nilai dalam model data. Kemudian, untuk setiap kategori dalam model data kita menerapkan rumus yang disebutkan di atas untuk menghitung sudut potongan lingkaran. Akhirnya kita menggunakan fungsi drawPieSlice() menggunakan pusat canvas sebagai pusat potongan. Untuk radius kita menggunakan nilai minimum antara setengah dari lebar canvas dan setengah dari tinggi canvas karena kita tidak ingin lingkaran kita keluar dari canvas.

Kita juga memberi offset sudut awal dan akhir irisan setiap kali kita menggambar kategori, jika tidak, irisannya akan tumpang tindih.

Untuk menggunakan kelas, kita harus membuat sebuah instance dan kemudian memanggil metode draw() pada objek yang dibuat.

var myPiechart = new Piechart(
    {
		canvas:myCanvas,
		data:myVinyls,
		colors:["#fde23e","#f16e23", "#57d9ff","#937e88"]
	}
);
myPiechart.draw();

Dan hasilnya terlihat seperti ini

Menggambar Diagram Donat

Kita telah melihat cara menggambar diagram lingkaran. Kita juga tahu bahwa diagram donat berbeda hanya dengan memiliki lubang di tengah diagram. Bagaimana kita menggambar lubangnya? Kita bisa menggambar lingkaran putih di atas pie chart.

Mari kita ubah kode kelas Piechart untuk melakukan itu.

var Piechart = function(options){
    this.options = options;
	this.canvas = options.canvas;
	this.ctx = this.canvas.getContext("2d");
	this.colors = options.colors;

	this.draw = function(){
		var total_value = 0;
		var color_index = 0;
		for (var categ in this.options.data){
			var val = this.options.data[categ];
			total_value += val;
		}

		var start_angle = 0;
		for (categ in this.options.data){
			val = this.options.data[categ];
			var slice_angle = 2 * Math.PI * val / total_value;

			drawPieSlice(
				this.ctx,
				this.canvas.width/2,
				this.canvas.height/2,
				Math.min(this.canvas.width/2,this.canvas.height/2),
				start_angle,
				start_angle+slice_angle,
				this.colors[color_index%this.colors.length]
			);

			start_angle += slice_angle;
			color_index++;
		}

        //drawing a white circle over the chart
        //to create the doughnut chart
		if (this.options.doughnutHoleSize){
			drawPieSlice(
				this.ctx,
				this.canvas.width/2,
				this.canvas.height/2,
				this.options.doughnutHoleSize * Math.min(this.canvas.width/2,this.canvas.height/2),
				0,
				2 * Math.PI,
				"#ff0000"
			);
		}

	}
}

Kode tambahannya terlihat pada parameter options untuk variabel anggota doughnutHoleSize. Jika ini tidak ada dalam opsi maka kode tersebut akan menggambar diagram lingkaran seperti sebelumnya, tapi jika memang ada maka lingkaran putih digambar dengan pusat yang sama dengan diagram lingkaran.

Jari-jari lingkaran ditentukan dengan mengalikan radius diagram lingkaran dan nilai doughnutHoleSize. Ini harus berupa angka antara 0 dan 1, di mana 0 akan menghasilkan diagram lingkaran dan nilai yang lebih tinggi dari 0 akan menghasilkan donat dengan lubang lebih besar dan lebih besar, 1 membuat diagram tidak terlihat.

Untuk menggambar diagram donat dengan ukuran lubang setengah dari diagram, kita perlu menggunakan doughnutHoleSize sebesar 0.5 dan membuat panggilan berikut:

var myDougnutChart = new Piechart(
    {
		canvas:myCanvas,
		data:myVinyls,
		colors:["#fde23e","#f16e23", "#57d9ff","#937e88"],
		doughnutHoleSize:0.5
	}
);
myDougnutChart.draw();

Dan inilah hasilnya:

drawing a doughnut chart with HTML5 canvas

Menambahkan Label dan Legenda Diagram

Diagram lingkaran dan diagram donat kita terlihat cukup bagus, namun kita dapat membuatnya lebih baik dengan menambahkan dua hal:

value labels: menunjukkan persentase yang sesuai dengan setiap irisan
legenda diagram: menunjukkan kategori dan warna yang sesuai dalam diagram

Biasanya, nilai yang terkait dengan irisan direpresentasikan sebagai nilai persentase yang dihitung sebagai 100 * nilai yang terkait dengan nilai potongan / total, dengan keseluruhan lingkaran mewakili 100%.

Sebagai contoh, dalam kasus data sampel kita, vinyl dengan classical music akan mewakili sekitar 26%. Alangkah baiknya bisa menulis nilai itu pada potongan yang sesuai. Untuk melakukannya, kita akan menggunakan fungsi fillText(text,x,y) dari konteks gambar. Fungsi ini mengambil tiga parameter: teks beserta koordinat x dan y.

Bagaimana kita menghitung koordinat x dan y untuk menempatkan teks? Kita harus menggunakan beberapa pengetahuan geometri dan sesuatu yang disebut koordinat kutub. Pada dasarnya, koordinat kutub menggunakan radius dan sudut untuk menentukan posisi sebuah titik. Dua rumus yang akan kita gunakan adalah:

x = R * cos(angle)

y = R * sin(angle)

Kita akan menerapkan dua rumus ini untuk menempatkan teks di tengah lingkaran sepanjang radius diagram lingkaran dan setengah di sekitar sudut untuk setiap irisan lingkaran. Untuk melakukannya, kita perlu memodifikasi kelas Piechart dan menambahkan kode berikut tepat setelah blok if (this.options.doughnutHoleSize){...}:

        ...
        start_angle = 0;
		for (categ in this.options.data){
			val = this.options.data[categ];
			slice_angle = 2 * Math.PI * val / total_value;
			var pieRadius = Math.min(this.canvas.width/2,this.canvas.height/2);
			var labelX = this.canvas.width/2 + (pieRadius / 2) * Math.cos(start_angle + slice_angle/2);
			var labelY = this.canvas.height/2 + (pieRadius / 2) * Math.sin(start_angle + slice_angle/2);

			if (this.options.doughnutHoleSize){
				var offset = (pieRadius * this.options.doughnutHoleSize ) / 2;
				labelX = this.canvas.width/2 + (offset + pieRadius / 2) * Math.cos(start_angle + slice_angle/2);
				labelY = this.canvas.height/2 + (offset + pieRadius / 2) * Math.sin(start_angle + slice_angle/2);				
			}

			var labelText = Math.round(100 * val / total_value);
			this.ctx.fillStyle = "white";
			this.ctx.font = "bold 20px Arial";
			this.ctx.fillText(labelText+"%", labelX,labelY);
			start_angle += slice_angle;
		}
        ...

Kode berjalan di atas setiap irisan, menghitung persentase, menghitung posisi, dan menggunakan metode fillText() untuk menggambarnya di diagram. Kita telah menggunakan properti fillStyle untuk mengatur warna teks menjadi putih dan properti font untuk mengatur ukuran, gaya dan font family dari label. Penting juga untuk dicatat bahwa jika diagram adalah diagram donat dan doughnutHoleSize ditetapkan, maka label akan terdorong ke arah tepi bagan agar dipusatkan pada potongan donat.

Dan inilah bagaimana diagram yang dihasilkan terlihat dengan label nilai:

Pie chart and doughnut chart with value labels

Untuk melengkapi diagram kita, hal terakhir yang akan kita tambahkan adalah legenda diagram. Legenda diagram kita akan menampilkan kategori model data kita dan warna yang digunakan untuk potongan yang sesuai. Pertama kita harus membuat beberapa modifikasi pada file index.html kita dengan menambahkan tag <div> yang akan menyimpan elemen legenda kita.

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

Kemudian di script.js kita tambahkan kode yang membuat konten elemen legenda. Kita menambahkan kode ini di akhir fungsi draw() dari kelas Piechart:

...
        if (this.options.legend){
			color_index = 0;
			var legendHTML = "";
			for (categ in this.options.data){
				legendHTML += "<div><span style='display:inline-block;width:20px;background-color:"+this.colors[color_index++]+";'>&nbsp;</span> "+categ+"</div>";
			}
			this.options.legend.innerHTML = legendHTML;
		}
...

Kode tersebut mencari elemen legend yang disampaikan melalui parameter options. Jika salah satu disediakan, elemen ini diisi dengan kode HTML yang berisi kotak berwarna dan nama kategori model data.

Kita juga perlu membuat perubahan seperti yang kita panggil penggambaran diagram lingkaran kita seperti ini:

var myLegend = document.getElementById("myLegend");

var myDougnutChart = new Piechart(
    {
		canvas:myCanvas,
		data:myVinyls,
		colors:["#fde23e","#f16e23", "#57d9ff","#937e88"],
		legend:myLegend
	}
);
myDougnutChart.draw();

Dan inilah diagram dan legenda diagram yang dihasilkan:

Pie chart with value labels and chart legend

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 lingkaran dan diagram donat Anda sendiri.

Jika Anda menginginkan solusi cepat dan mudah untuk tidak hanya membuat diagram lingkaran dan diagram donat 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.