Days
Hours
Minutes
Seconds
Tentu, ini adalah artikel mengenai cara membuat grafik menggunakan Chart.js.
Visualisasi data adalah cara efektif untuk menyajikan informasi yang kompleks dalam format yang mudah dipahami. Daripada hanya menampilkan data dalam tabel, grafik dapat memberikan wawasan yang lebih cepat dan jelas.
Chart.js adalah pustaka (library) JavaScript yang populer dan gratis untuk membuat berbagai jenis grafik interaktif. Dengan Chart.js, Anda dapat membuat grafik batang, garis, lingkaran, dan banyak lagi dengan mudah di halaman web Anda. Tutorial ini akan memandu Anda dari nol untuk membuat grafik pertama Anda.
Sebelum membuat grafik, kita memerlukan dua hal:
<canvas> di mana grafik akan digambar.Untuk kemudahan, kita akan menggunakan versi CDN (Content Delivery Network) sehingga Anda tidak perlu mengunduh file apa pun.
Buat file HTML baru, misalnya grafik.html, dan siapkan strukturnya.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Grafik dengan Chart.js</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h2>Data Penjualan Bulanan</h2>
<canvas id="myChart"></canvas>
</body>
</html>
Di sini, kita telah menyisipkan pustaka Chart.js dan membuat elemen <canvas> dengan id="myChart". id ini akan kita gunakan di JavaScript untuk “menangkap” elemen tersebut.
Sekarang, kita akan menambahkan kode JavaScript untuk membuat grafik batang yang menampilkan data penjualan bulanan.
Tambahkan tag <script> baru di bagian bawah <body> di file grafik.html dengan kode berikut:
<script>
// Dapatkan elemen canvas berdasarkan ID-nya
const ctx = document.getElementById('myChart');
// Buat objek Chart baru
new Chart(ctx, {
// Tipe grafik yang akan dibuat (bar, line, pie, dll.)
type: 'bar',
// Objek data untuk grafik
data: {
// Label untuk sumbu X
labels: ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni'],
// Array yang berisi dataset (kumpulan data)
datasets: [{
label: 'Penjualan',
data: [1200, 1900, 3000, 500, 2000, 3000],
backgroundColor: [
'rgba(255, 99, 132, 0.7)',
'rgba(54, 162, 235, 0.7)',
'rgba(255, 206, 86, 0.7)',
'rgba(75, 192, 192, 0.7)',
'rgba(153, 102, 255, 0.7)',
'rgba(255, 159, 64, 0.7)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
// Objek options untuk kustomisasi
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
Penjelasan Kode:
new Chart(ctx, { ... }): Ini adalah constructor utama untuk membuat grafik. Argumen pertama adalah elemen canvas, dan argumen kedua adalah objek konfigurasi.type: Mendefinisikan tipe grafik. Di sini kita menggunakan 'bar'.data: Objek ini menyimpan semua data yang akan ditampilkan.
labels: Array string yang digunakan sebagai label sumbu X (bulan).datasets: Array yang bisa berisi satu atau lebih kumpulan data. Setiap objek di dalamnya memiliki label untuk legenda dan array data berisi nilai numerik.options: Objek ini digunakan untuk menyesuaikan tampilan grafik, seperti responsivitas dan pengaturan skala sumbu.
Mengubah tipe grafik sangatlah mudah. Anda hanya perlu mengganti nilai dari properti type.
'line')
Cukup ubah type: 'bar' menjadi type: 'line'. Anda akan mendapatkan grafik garis.
'pie')
Untuk grafik lingkaran, struktur datanya sedikit berbeda. Anda tidak memerlukan sumbu X, jadi cukup berikan labels dan data seperti ini:
new Chart(ctx, {
type: 'pie',
data: {
labels: ['Merah', 'Biru', 'Kuning'],
datasets: [{
label: 'Pop
Dipercaya oleh lebih dari 200++ client untuk menyelesaikan proyeknya dengan total 250++ proyek dari berbagai jenis proyek
