Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Memulai Chart.jd: Pengantar

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Getting Started With Chart.js.
Getting Started With Chart.js: Line and Bar Charts

Indonesian (Bahasa Indonesia) translation by Aditia Dwiperdana (you can also view the original English article)

Orang-orang biasanya tidak mau memeriksa data dalam jumlah besar ditampilkan dalam bentuk teks atau tabel. Sebagian besar karena membosankan, tapi terutama karena sangat susah mengolah angka saja.

Contohnya, berikut adalah tabel dari sepuluh negara yang memiliki populasi paling banyak:

Nama Negara Populasi
China
1,379,302,771
India 1,281,935,911
Amerika Serikat 326,625,791
Indonesia 260,580,739
Brazil 207,353,391
Pakistan 204,924,861
Nigeria 190,632,261
Bangladesh 157,826,578
Rusia 142,257,519
Jepang 126,451,398

Hanya dengan sepuluh negara di tabel ini, ada kemungkinan kamu dan pembaca lain akan melewati tabel tersebut sama sekali. Umumnya, orang hanya melihat satu atau dua negara yang menarik perhatian mereka. Jika data yang sama ditampilkan dalam bentuk grafik batang, hanya perlu waktu singkat untuk memahami secara kasar bagaimana kondisi populasi di negara-negara tersebut.

Terlebih lagi, akan lebih mudah untuk melihat kecenderungan atau fakta, misalnya Amerika Serikat dua kali lebih besar dari Bangladesh, dan China sepuluh kali lebih besar dari Rusia, hanya dari melihat panjang batang di grafik.

Salah satu library populer yang bisa kamu gunakan untuk membuat berbagai grafik adalah Chart.js. Pada seri ini, kamu akan belajar mengenai semua hal penting dari library ini. Chart.js dapat digunakan untuk membuat grafik yang menarik dan responsif pada Canvas HTML5.

Library ini membuat kamu bisa mencampur berbagai jenis grafik dan memetakan data berdasarkan hari-tanggal, logaritmik, dan skala khusus dengan mudah. Library ini juga memiliki animasi bawaan yang bisa diterapkan saat mengubah data atau mengupdate warna.

Mari mulai dengan instalasi, lalu kita lanjut ke konfigurasi dan beberapa aspek lainnya.

Instalasi dan Penggunaan

Kami bisa mengunduh versi terbaru dari Chart.js dari GitHub atau menggunakan link CDN untuk diinclude dalam projectmu. Kamu bisa juga menginstal library menggunakan npm atau bower dengan bantuan perintah berikut:

Library ini memiliki dua versi berbeda. Versi normal, disebut Chart.js dan Chart.min.js, dilengkapi dengan library Chart.js dan color parser. Jika kamu ingin menggunakan versi ini dan menentukan ingin menggunakan sumbu waktu pada grafik, kamu perlu menginclude library Moment.js sebelum menggunakan Chart.js.

Versi bundle, Chart.bundle.js atau Chart.bundle.min.js, sudah mencakup Moment.js. Dengan ini, kamu tidak perlu menginclude dua file terpisah. Satu hal yang perlu diingat adalah jangan menggunakan versi ini jika kamu sudah menginclude Moment.js. Hal ini bisa membuat berbagai masalah versi.

Setelah kamu tahu versi library yang akan kamu gunakan, kamu bisa menginclude library tersebut di projectmu dan mulai membuat grafik yang keren.

Membuat Grafik

Mari buat tabel populasi di bagian pengantar sebagai grafik batang. Sumbu Y akan digunakan untuk memetakan populasi, dan sumbu X akan digunakan untuk memetakan negara. Kita mulai dengan membuat canvas dengan id popChart.

Lebar dan tinggi digunakan untuk menentukan dimensi grafik. Saat membuat grafik yang responsif, aspect ratio grafik ditentukan oleh lebar dan tinggi canvas.

Berikutnya, kamu perlu membuat instance dari kelas Chart. Hal ini bisa dicapai dengan mengirim node, instance jQuery, atau 2D context dari canvas yang ingin kamu gunakan untuk menggambar grafik.

Hal yang perlu kamu lakukan sekarang adalah melempar semua parameter ke fungsi konstruktor.

Objek pada parameter kedua berisi semua informasi yang dibutuhkan oleh Chart.js untuk menggambar grafik. Kunci type digunakan untuk menentukan tipe grafik yang ingin kamu gambar. Kunci tersebut bisa berisi nilai berikut: line, bar, radar, polarArea, pie, doughnut, dan bubble. Kamu akan mempelajari semua jenis grafik dalam seri tutorial ini.

Data key berisi data yang ingin kamu petakan. Kunci backgroundColor digunakan untuk menentukan warna berbagai batang pada grafik. Jika warna latar tidak ditentukan, nilai dasar berikut akan digunakan 'rgba(0,0,0,0.1)'.

Setiap grafik juga memiliki kunci tertentu yang bisa kamu gunakan untuk mengatur penampilannya. Berikut adalah grafik yang dibuat dengan kode di atas:

Pada demo di atas, kamu bisa menggerakan kursor ke atas batang untuk melihat nilai populasi di berbagai negara. Satu hal lagi yang perlu diperhatikan adalah ukuran grafik tidak sesuai dengan dimensi yang kita tentukan, tapi masih dengan aspect ratio yang sama.

Jika kamu ingin grafik memiliki ukuran yang sama di setiap perangkat, kamu harus mengatur nilai responsive menjadi false.

Opsi Konfigurasi

Library Chart.js memberi kamu opsi untuk mengatur semua aspek dari grafik yang akan kamu buat. Contohnya, kamu bisa mengubah warna dan lebar border dari batang pada grafik di atas. Kamu juga bisa mengubah tooltip dan legenda dengan mengubah ukuran tulisan dan warnanya. Pada bagian ini kamu akan belajar tentang berbagai kunci yang digunakan untuk mengatur gaya elemen tersebut.

Library ini memiliki empat kunci global yang bisa digunakan untuk mengubah semua font pada grafik: defaultFontFamily, defaultFontSize, defaultFontStyle, dan defaultFontColor. Ukuran font ditentukan dalam ukuran pixel dan tidak mempengaruhi skala label pada radialLinear. Begitu pula, defaultFontStyle tidak mempengaruhi judul tooltip atau footer.

Grafik berikut menggunakan pengaturan global font di atas. Mengubah tampilan seperti itu bisa membantu kamu membuat grafik yang sesuai dengan gaya websitemu.

Kamu juga bisa mengubah legenda yang muncul pada grafik. Opsi konfigurasi perlu dilempar ke namespace options.legend. Kamu juga bisa menentukan opsi legenda secara global untuk semua grafik menggunakan Chart.defaults.global.legend. Posisi legenda diatur menggunakan kunci position, yang bisa menerima satu dari empat nilai berikut: top, left, bottom, dan right. Kamu juga bisa menampilkan atau menyembunyikan legenda menggunakan kunci display.

Selain legenda, kamu juga bisa mengatur tampilan label pada legenda. Opsi konfigurasinya diatur dibawah konfigurasi legenda menggunakan kunci label. Lebar kotak warna bisa diatur menggunakan kunci boxWidth. Jika tidak ada nilai ditentukan, akan digunakan nilai dasar 40.

Font family, ukuran font, warna font, dan gaya font diturunkan dari konfigurasi global. Tapi kamu bisa menentukan sendiri nilainya menggunakan fontSize, fontStyle, fontFamily, dan fontColor.

Kamu bisa mengatur bagaimana tooltip digambar untuk grafik menggunakan namespace options.tooltips. Begitu pula kamu bisa menggunakan Chart.defaults.global.tooltips untuk mengatur tampilan tooltip secara global. Untuk menentukan apakah tooltip ditampikan ke pengguna atau tidak, kamu bisa menggunakan kunci enabled. Mengatur nilainya menjadi false akan menonaktifkan tooltip. Nilai dasarnya adalah true.

Kamu juga bisa mengatur perilaku tooltip (memunculkan dan menyembunyikan) menggunakan kunci intersect. Jika diisi nilai true, yang merupakan nilai awal kunci ini, tooltip hanya akan ditampilkan saat pointer berinteraksi dengan batang pada grafik. Jika diisi nilai false, tooltip akan ditampilkan berdasarkan perilaku yang ditentukan dengan kunci mode.

Kunci mode digunakan untuk menentukan elemen yang akan ditampilkan pada tooltip. Nilai awalnya adalah nearest. Mode ini berarti saat nilai intersect adalah false, tooltip akan ditampilkan pada batang grafik yang terdekat dengan pointer mouse.

Sama seperti legenda, kamu juga bisa mengatur nilai dari berbagai properti font pada tooltip. Perbedaannya adalah bahwa kali ini nilainya harus diatur terpisah antara judul, body, dan elemen footer dari tooltip.

Contohnya, kamu bisa mengubah properti font untuk body tooltip menggunakan bodyFontFamily, bodyFontSize, bodyFontStyle, dan bodyFontColor. Judul dan footer tooltip memiliki properti tambahan bernama titleMarginBottom dan footerMarginTop. Kedua properti itu bisa digunakan untuk menambahkan jarak tambahan antara keduanya dan body dari tooltip.

Begitu pula kamu bisa menambah padding tambahan di kanan/kiri dan atas/bawah dari tooltip menggunakan properti xPadding dan yPadding.

Kamu bisa mengatur ukuran panah tooltip menggunakan kunci caretSize. Latar belakang tooltip bisa diubah menggunakan kunci backgroundColor.

Contoh di atas akan menyembunyikan caret karena caretSize diisi nilai 0. Berikut adalah demo yang menunjukkan implementasi opsi tersebut. Cobalah hover batang pada grafik untuk melihat tooltip yang sudah kita modifikasi.

Penutup

Tutorial ini menyediakan pengantar untuk fitur dasar Chart.js dan menunjukkan bagaimana untuk membuat grafik batang. Kamu juga belajar tentang berbagai opsi konfigurasi yang bisa digunakan untuk mengatur tampilan berbagai grafik.

Walaupun kita hanya menggunakan grafik batang pada tutorial ini, opsi konfigurasi bisa diterapkan untuk semua tipe grafik. Pada tutorial berikutnya kamu akan belajar tentang grafik graris dan detail tambahan dari grafik batang.

JavaScript sudah menjadi salah satu bahasa pemrograman utama untuk bekerja di web development. Walau akan perlu proses pembelajaran tersendiri, sudah tersedua banyak framework dan library yang akan bisa membantu. Jika kamu butuh materi tambahan untuk belajar atau menggunakannya dalam pekerjaan, lihatlah apa saja yang kami punya di Marketplace Envato.

Jika kamu punya pertanyaan tentang tutorial ini, beritahu kami di komentar.

Perlu diketahui bahwa data populasi didapat dari informasi sensus.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.