Advertisement
  1. Code
  2. JavaScript
Code

Memulai Dengan Chart.js: Skala (Scale)

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Getting Started With Chart.js.
Getting Started With Chart.js: Pie, Doughnut, and Bubble Charts

Indonesian (Bahasa Indonesia) translation by Kurniawan Sugi Purwanto (you can also view the original English article)

Di empat tutorial terbaru, Anda telah belajar sangat banyak tentang Chart.js. Setelah membaca empat tutorial pertama, Anda akan mampu mengubahsuai tooltip dan label, mengubah font, dan membuat tipe-tipe grafik yang berbeda. Salah satu aspek Chart.js yang belum dibahas dalam seri ini adalah scale (skala).

Skala sudah banyak berubah sejak pustaka versi 1.0 dan sekarang jauh lebih kuat. Dalam tutorial ini, Anda akan belajar bagaimana memanipulasi skala dan mengendalikan penampilannya dengan menggunakan opsi-opsi berbeda yang disediakan oleh library.

Mengubah Garis Kisi-Kisi

Semua opsi konfigurasi untuk garis kisi-kisi ditempatkan di bawah opsi scale dalam kunci gridLines. Kunci ini mendefinisikan opsi untuk mengubahsuai garis kisi-kisi yang tegak lurus terhadap sumbu. Mari mengubah garis kisi-kisi diagram garis yang Anda buat di tutorial diagram garis dan batang.

Anda bisa menampilkan atau menyembunyikan garis kisi-kisi dengan menggunakan kunci display. Nilai awalnya adalah true, jadi garis kisi-kisi ditampilkan secara default. Warna garis kisi-kisi bisa ditentukan dengan kunci color. Jika Anda ingin kisi-kisinya terbuat dari garis putus-putus, bukan garis lurus, Anda bisa memberikan nilai untuk panjang dan jarak garis putus-putus sebagai nilai kunci borderDash. Anda bisa mengatur lebar dan warna garis untuk indeks nol (zero index) pertama dengan menggunakan kunci zeroLineWidth dan zeroLineColor secara berurutan.

Sampai titik ini untuk semua diagram/grafik, skalanya tidak memiliki teks penjelasan apapun yang membuat pemirsa tahu apa yang diwakili oleh sumbu tertentu. Hal ini bisa membuat diagramnya tidak begitu bermanfaat. Sebagai contoh, jika Anda melihat suatu plot kecepatan mobil dan tidak bisa menemukan unit yang kecepatannya diplot pada sumbu-y, diagramnya tidak bermanfaat.

Anda bisa menampilkan atau menyembunyikan label skala pada diagram dengan menggunakan kunci display. Secara default label skala disembunyikan. Teks yang seharusnya muncul pada skala tersebut bisa ditetapkan dengan menggunakan kunci labelString. Anda juga bisa mengontrol warna, keluarga, ukuran, dan gaya font dengan kunci fontColor, fontFamily, fontSize, dan fontStyle.

Berikut adalah grafik kecepatan mobil tua yang sama dengan seperangkat penetapan opsi grafik yang berbeda.

Ada satu kunci lagi yang disebut offsetGridLines. Ketika diatur ke true, kunci itu akan menggeser label ke tengah garis kisi-kisi. Umumnya ini bermanfaat ketika membuat grafik batang.

Mengonfigurasi Skala Linear

Skala linear digunakan untuk membuat grafik data numerik. Skala-skala ini bisa dibuat di sumbu x atau y. Dalam banyak keadaan, Chart.js secara otomatis mendeteksi nilai minimal dan maksimalskalanya. Meskipun demikian hal ini bisa mengakibatkan sejumlah kebingungan.

Katakan saja Anda ingin memplot nilai siswa dalam satu kelas. Jika nilai maksimal ujian adalah 200 tetapi tidak ada siswa yang nilainya lebih dari 180, skalanya kemungkinan besar maksimal adalah 180. Dalam hal itu, pembaca tidak akan pernah tahu bahwa apakah nilai maksimalnya 180 atau 200.

Chart.js memiliki berbagai opsi internal yang memungkinkan Anda mengontrol kunci-kunci berbeda untuk skala. Anda bisa menetapkan nilai minimal dan maksimal untuk skala dengan menggunakan kunci min dan max. Ukuran langkah skala bisa dikendalikan dengan menggunakan properti stepSize. Dengan cara ini Anda bisa menentukan berapa banyak garis kisi-kisi yang harus digambar pada grafik. Cara lain untuk menentukan batas jumlah garis kisi-kisi dan tanda centang yang ditunjukkan pada grafik adalah dengan menggunakan kunci maxTicksLimit.

Berikut adalah kode untuk menetapkan nilai skala minimal dan maksimal untuk skala horisontal pada grafik batang dari tutorial sebelumnya di seri ini.

Hampir sama dengan skala linear, Anda juga bisa membuat skala logaritma untuk memplot nilai di grafik Anda. Dalam hal ini, interpolasi logaritmis digunakan untuk menentukan posisi suatu titik pada sumbu. Skala-skala ini juga bisa ditempatkan di sumbu-x dan sumbu-y.

Mengonfigurasi Skala Linear Radial

Tipe skala ini digunakan untuk jenis grafik radar dan polar area. Tidak seperti skala linear biasa, yang ini melapisi area grafik dan tidak diposisikan pada sumbu.

Ada banyak kunci yang secara spesifik menyasar skala-skala radial. Sebagai contoh Anda bisa menggunakan kunci lineArc untuk menetapkan apakah garis kisi-kisi harus melingkar atau lurus. Nilai defaultnya adalah false untuk grafik radar dan true untuk grafik polar area.

Anda bisa mengendalikan penampilan garis yang dipancarkan dari tengah grafik ke label titiknya dengan menggunakan kunci angleLines. Kunci ini menerima objek sebagai nilainya. Objek bisa berisi kunci untuk mengontrol warna dan lebar angle lines. Anda bisa menyembunyikan angle lines dengan mengatur nilai kunci display ke false. Warna dan lebar angle lines bisa dikendalikan dengan menggunakan kunci color dan lineWidth.

Penampilan label-label titik bisa dikendalikan dengan menggunakan kunci pointLabels. Sama seperti angle lines, kunci ini juga menerima objek sebagai nilainya. Silakan diperhatikan bahwa opsi-opsi tersebut hanya berdampak ketika nilai lineArc diset ke false. Warna, keluarga, ukuran, dan gaya font bisa ditetapkan dengan menggunakan kunci fontColor, fontFamily, fontSize, dan fontStyle.

Anda juga bisa menetapkan nilai minimal dan maksimal untuk skala dengan menggunakan kunci min dan max. Step size dan jumlah maksimal tanda pada skala dapat diatur dengan menggunakan kunci stepSize dan maxTicksLimit. Opsi-opsi ini berada di bawah kunci ticks. Beberapa kunci lain yang ada di dalam ticks adalah showLabelBackdropbackdropColorbackdropPaddingX, dan backDropPaddingY. Anda bisa menggunakannya untuk menyembunyikan atau menampilkan latar belakang di balik label tanda dan mengontrol lebar, panjang, dan warnanya.

Anda juga bisa menggunakan kunci gridLines yang kita gunakan untuk menentukan warna dan lebar garis kisi-kisi pada grafik radar. Berikut adalah beberapa opsi untuk membuat grafik radar dengan skala yang dimodifikasi.

Mengonfigurasi Skala Waktu

Anda bisa menggunakan skala waktu untuk menampilkan waktu dan tanggal di suatu grafik. Sebagaimana disebutkan di tutorial perkenalan Chart.js, Anda harus memasukkan Moment.js dalam proyek Anda untuk menampilkan waktu? Satu pembatasan ketika menggunakan skala waktu adalah hanya bisa ditampilkan di sumbu-x saja. Semua opsi konfigurasi skala waktu terletak di bawah sub-opsi time.

Untuk membuat suatu skala waktu, Anda harus mengeset nilai kunci type ke time di bawah sub-opsi xAxes. Setelah itu Anda bisa mengeset nilai kunci-kunci yang berbeda di bawah time. Unit yang harus digunakan untuk menggambar tick diset dengan menggunakan kunci unit.

Step unit ini bisa ditentukan dengan menggunakan kunci unitStepSize. Format yang harus digunakan untuk ditampilkannya label ditentukan dengan sub-opsi displayFormats. Anda bisa membaca lebih banyak tentang format string yang dibolehkan di website Moment.js.

Format yang digunakan untuk menampilkan waktu di tooltip bisa ditetapkan dengan menggunakan kunci tooltipFormat.

Anda juga bisa membulatkan waktu sebelum memplotnya di grafik dengan menggunakan kunci round. Berhati-hatilah ketika mengeset nilai untuk round. Katakan saja Anda mengeset nilainya ke hour dan ada dua waktu yang harus diplot ke grafik. Jika waktunya sekarang adalah 5:30 pagi dan yang lain adalah 5:50 pagi, keduanya akan diplot ke tanda tick 5:00 pagi. Dengan mengatur nilainya ke minute plotnya adalah pada tanda 5:30 dan 5:50 secara berurutan.

Grafik baris yang diplot di awal tutorial bisa diplot dengan menggunakan skala waktu dengan bantuan kode berikut.

Pemikiran Akhir

Tutorial ini membantu Anda mempelajari tentang berbagai jenis skala di Chart.js. Anda sekarang bisa dengan mudah mengendalikan warna, nilai minimal dan maksimal, jumlah tanda tick, dan faktor-faktor lainnya.

Setelah membaca semua dari lima tutorial dalam seri ini, sekarang Anda akan mampu membuat semua jenis grafik yang ada di Chart.js. Saya harap Anda menyukai tutorial dan seri ini.

Jika Anda mencari sumber-sumber daya tambahan untuk dipelajari atau digunakan di pekerjaan Anda, pelajari yang kami miliki di Envato marketplace. Jika Anda ada pertanyaan apa saja, beritahu saya di komentar. Pernahkah Anda menggunakan pustaka ini di proyek Anda sendiri? Silakan membagikan beberapa tips di komentar.

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.