Ada beberapa perpustakaan JavaScript yang adil untuk merencanakan berbagai bagan, mulai dari grafik batang hingga grafik garis dan banyak lagi. Jika Anda mempelajari cara menampilkan data secara dinamis di situs web Anda dengan JavaScript, Chart.js adalah salah satu perpustakaan yang harus Anda coba.

Bagaimana Anda bisa mulai membuat visualisasi data dengan Chart.js? Anda akan mempelajari caranya di artikel ini.

Mari kita mulai.

Apa Itu Chart.js?

Chart.js adalah pustaka JavaScript visualisasi data sumber terbuka yang digunakan untuk memplot bagan yang dapat dirender HTML. Saat ini mendukung delapan jenis bagan interaktif berbeda yang juga dapat Anda animasikan. Untuk membuat grafik berbasis HTML dengan chart.js, Anda memerlukan kanvas HTML untuk menahannya.

Pustaka menerima satu set kumpulan data dan parameter penyesuaian lainnya seperti warna latar belakang, warna batas, dan banyak lagi. Salah satu dataset adalah label, yang mewakili nilai pada sumbu X. Yang lainnya adalah satu set nilai numerik, yang biasanya terletak pada sumbu Y.

Anda juga perlu menentukan tipe grafik di dalam objek grafik sehingga perpustakaan mengetahui grafik mana yang akan diplot.

Cara Membuat Grafik Dengan Chart.js

Seperti yang kami sebutkan sebelumnya, Anda dapat membuat berbagai jenis grafik dengan chart.js. Untuk tutorial ini, Anda akan mulai dengan grafik garis dan batang. Setelah Anda memahami konsep di balik ini, Anda akan memiliki semua alat dan kepercayaan diri yang Anda butuhkan untuk merencanakan grafik lain yang tersedia.

Terkait:Cara Membuat Website Anda Responsif dan Interaktif Dengan CSS dan JavaScript

Untuk mulai menggunakan chart.js, buat file yang diperlukan. Untuk tutorial ini, nama filenya adalah chart.html, plot.js, dan index.css. Anda dapat menggunakan konvensi penamaan apa pun untuk file Anda.

Sekarang, rekatkan yang berikut ini di kepala bagian dari file HTML Anda untuk ditautkan ke jaringan pengiriman konten (CDN) Chart.js.

Di chart.html:

src=" https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js">

Selanjutnya, buat kanvas HTML untuk menahan bagan Anda dan berikan Indo. Juga, sambungkan ke file CSS (index.css) di kepala bagian dan arahkan ke file JavaScript (plot.js) Anda di tubuh bagian.

Struktur file HTML terlihat seperti ini:

 grafik

Dan di CSS:

tubuh{
 warna latar:#383735;
}
h1{
 warna:#e9f0e9;
 margin-kiri: 43%;
}
#petak{
 margin: otomatis;
 warna latar: #2e2d2d;
}

Penataan CSS di atas bukanlah konvensi yang ditetapkan. Jadi Anda dapat menata gaya Anda sesuka Anda tergantung pada struktur DOM Anda. Setelah file HTML dan CSS Anda siap, saatnya untuk memplot grafik Anda dengan JavaScript.

Bagan Garis

Untuk membuat diagram garis dengan chart.js, Anda akan mengatur grafik Tipe ke garis. Ini memberitahu perpustakaan untuk menggambar diagram garis.

Untuk mendemonstrasikan ini, dalam file JavaScript Anda:

// Dapatkan kanvas HTML dengan id-nya
plot = document.getElementById("plot");
// Contoh kumpulan data untuk sumbu X dan Y
var month = ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul"]; //Tetap pada sumbu X
var lalu lintas = [65, 59, 80, 81, 56, 55, 60] //Tetap pada sumbu Y
// Buat sebuah instance dari objek Bagan:
Bagan baru (plot, {
 ketik: 'garis', //deklarasikan tipe grafik
 data: {
 label: bulan, //data sumbu X
 kumpulan data: [{
 data: lalu lintas, //data sumbu Y
 warna latar: '#5e440f',
 borderColor: 'putih',
 isi: palsu, //Mengisi kurva di bawah garis dengan warna babckground. Itu benar secara default
 }]
 },
});

Keluaran:

Jangan ragu untuk mengubah mengisi nilai untuk benar, gunakan lebih banyak data, atau kurangi warna untuk melihat apa yang terjadi.

Seperti yang Anda juga bisa lihat, ada kotak legenda kecil di bagian atas grafik. Anda dapat menghapusnya di dalam opsional pilihan parameter.

Itu pilihan parameter juga membantu penyesuaian lain selain menghapus atau menyertakan legenda. Misalnya, Anda dapat menggunakannya untuk memaksa sumbu dimulai dari nol.

Untuk mendeklarasikan pilihan parameter, inilah tampilan bagian bagan di file JavaScript Anda:

// Buat instance objek Bagan:
Bagan baru (plot, {
 ketik: 'garis', //deklarasikan tipe grafik
 data: {
 label: bulan, //data sumbu X
 kumpulan data: [{
 data: lalu lintas, //data sumbu Y
 warna latar: '#5e440f', //Warna titik-titik
 borderColor: 'putih', //Warna garis
 isi: palsu, //Mengisi kurva di bawah garis dengan warna babckground. Itu benar secara default
 }]
 },
 //Tentukan opsi khusus:
 pilihan:{
 legenda: {tampilan: false}, //Hapus kotak legenda dengan menyetelnya ke false. Itu benar secara default.
//Tentukan pengaturan untuk timbangan. Untuk membuat sumbu Y dimulai dari nol, misalnya:
 timbangan:{
 sumbu y: [{kutu: {min: 0}}] //Anda dapat mengulangi hal yang sama untuk sumbu X jika berisi bilangan bulat.
 }
 } 
});

Keluaran:

Anda juga dapat menggunakan warna latar belakang yang berbeda untuk setiap titik. Memvariasikan warna latar belakang dengan cara ini biasanya lebih membantu dengan grafik batang.

Membuat Grafik Batang Dengan Chart.js

Di sini, Anda hanya perlu mengubah grafik Tipe ke batang. Anda tidak perlu mengatur mengisi pilihan karena bilah mewarisi warna latar belakang secara otomatis:

// Buat sebuah instance dari objek Bagan:
Bagan baru (plot, {
 ketik: 'batang', //deklarasikan tipe grafik
 data: {
 label: bulan, //data sumbu X
 kumpulan data: [{
 data: lalu lintas, //data sumbu Y
 warna latar: '#3bf70c', //Warna batang
 }]
 },
 pilihan:{
 legenda: {tampilan: false}, //Hapus kotak legenda dengan menyetelnya ke false. Itu benar secara default.
 }
});

Keluaran:

Jangan ragu untuk memaksa sumbu Y untuk memulai dari nol atau nilai apa pun seperti yang Anda lakukan untuk bagan garis.

Terkait:Metode Array JavaScript yang Harus Anda Kuasai

Untuk menggunakan warna berbeda untuk setiap batang, berikan larik warna yang cocok dengan jumlah item dalam data Anda ke dalam warna latar belakang parameter:

// Buat sebuah instance dari objek Bagan:
Bagan baru (plot, {
 ketik: 'batang', //deklarasikan tipe grafik
 data: {
 label: bulan, //data sumbu X
 kumpulan data: [{
 data: lalu lintas, //data sumbu Y
//Warna setiap batang:
 warna latar belakang: [
 "rgba (196, 190, 183)",
 "rgba (21, 227, 235)",
 "rgba (7, 150, 245)",
 "rgba (240, 5, 252)",
 "rgba (252, 5, 79)",
 "rgb (0,12,255)",
 "rgb (17, 252, 5)"],
 }]
 },
 pilihan:{
 legenda: {tampilan: false}, //Hapus kotak legenda dengan menyetelnya ke false. Itu benar secara default.
 }
});

Keluaran:

Membuat Diagram Lingkaran Dengan Chart.js

Untuk menggambar diagram lingkaran, ubah jenis diagram menjadi pai. Anda mungkin juga ingin mengatur tampilan legenda ke benar untuk melihat apa yang diwakili oleh setiap segmen kue:

// Buat instance objek Bagan:
Bagan baru (plot, {
 type: 'pie', //deklarasikan tipe grafik
 data: {
 labels: bulan, //Mendefinisikan setiap segmen
 kumpulan data: [{
 data: lalu lintas, //Menentukan ukuran segmen
 //Warna setiap segmen
 warna latar belakang: [
 "rgba (196, 190, 183)",
 "rgba (21, 227, 235)",
 "rgba (7, 150, 245)",
 "rgba (240, 5, 252)",
 "rgba (252, 5, 79)",
 "rgb (0,12,255)",
 "rgb (17, 252, 5)"],
 }]
 },
 pilihan:{
 legenda: {display: true}, //Ini benar secara default.
}
});

Keluaran:

Seperti yang Anda lakukan pada contoh di atas, Anda dapat mencoba grafik lain dengan mengubah Tipe.

Meskipun demikian, berikut adalah daftar yang didukung chart.js jenis bagan yang dapat Anda coba menggunakan konvensi pengkodean di atas:

• batang
• garis
• menyebarkan
• donat
• pai
• radar
• daerah kutub
• gelembung

Bermain-main Dengan Chart.js

Meskipun Anda hanya menguasai grafik garis, pai, dan batang dalam tutorial ini, pola kode untuk memplot grafik lain dengan chart.js mengikuti konvensi yang sama. Jadi jangan ragu untuk bermain-main dengan yang lain juga.

Dengan itu, jika Anda menginginkan lebih dari apa yang ditawarkan chart.js, Anda mungkin ingin melihat beberapa pustaka bagan JavaScript lainnya juga.

6 Kerangka JavaScript yang Layak Dipelajari

Ada banyak kerangka kerja JavaScript di luar sana untuk membantu pengembangan. Berikut adalah beberapa yang harus Anda ketahui.

Baca Selanjutnya

Tentang Penulis