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

Memulai dengan Chart.js: Diagram berbentuk Lingkaran, Donat dan Gelembung

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Getting Started With Chart.js.
Getting Started With Chart.js: Radar and Polar Area Charts
Getting Started With Chart.js: Scales

Indonesian (Bahasa Indonesia) translation by Imam Firmansyah (you can also view the original English article)

Sampai saat ini Anda telah mempelajari empat jenis diagram yang berbeda di Chart.js. Tutorial kedua yang termasuk dalam seri diagram garis dan diagram batang. Tutorial ketiga membahas tentang Diagram Radar dan Polar Area. Dalam tutorial ini, Anda akan belajar bagaimana menggunakan Chart.js untuk membuat diagram berbentuk lingkaran, donat, dan gelembung.

Membuat Diagram Lingkaran dan Donat

Diagram lingkaran dan donat sangat berguna ketika Anda ingin menunjukkan proporsi dimana sesuatu dibagi diantara entitas yang berbeda. Sebagai Contoh, Anda dapat menggunakan diagram lingkaran untuk menunjukkan persentase laki-laki, perempuan, dan anak-anak singa di taman margasatwa, atau persentase suara yang diperoleh kandidat yang berbeda dalam pemilihan.

Diagram lingkaran hanya berguna bila Anda ingin membandingkan satu parameter atau kumpulan data tertentu. Hal penting yang perlu diingat adalah Anda tidak dapat menggunakan diagram lingkaran untuk menempatkan entitas yang nilainya nol karena sudut sektor dalam diagram lingkaran bergantung pada besarnya titik data.

Ini berarti bahwa setiap entitas yang nilainya nol sama sekali tidak akan ditampilkan pada diagram. Demikian pula, Anda tidak dapat menempatkan nilai negatif pada diagram lingkaran. Anda dapat membuat diagram lingkaran di Chart.js dengan menetapkan type menjadi berjenis pie. Demikian pula, Anda dapat membuat diagram berbentuk donat dengan menetapkan type menjadi berjenis doughnut. Berikut adalah contoh pembuatan dua diagam ini:

Mari buat diagram lingkaran yang menunjukkan data ekspor minyak dari lima negara teratas di tahun 2015. Data dalam miliar dolar AS.

Anda dapat mengontrol tampilan diagram di atas dengan menggunakan variabel kunci yang berbeda seperti cutoutPercentage, yang mendefinisikan persentase diagram yang dipotong dari tengah. Anda juga dapat menentukan sudut awal diagram dengan menggunakan variabel kunci rotation. Demikian pula, Anda juga dapat menentukan sudut yang disapu diagram sambil merencanakan data menggunakan variabel kunci circumference.

Ada dua animasi berbeda yang bisa diaktifkan saat menggambar diagram. Anda dapat menentukan apakah diagram harus memiliki animasi rotasi menggunakan variabel kunci animateRotate. Demikian pula, Anda juga dapat menentukan apakah diagram donat harus diskalakan dari pusat menggunakan variabel kunci animateScale. Nilai animateRotate diatur ke true secara default, dan nilai untuk animateScale diatur ke false secara default.

Seperti biasa, Anda bisa mengendalikan warna latar belakang, warna garis, dan lebar garis semua titik data menggunakan backgroundColor, borderColor, dan borderWidth pada masing-masing variabel kunci. Demikian pula, nilai hover dari semua properti ini dapat dikontrol dengan menggunakan variabel kunci hoverBackgroundColor, hoverBorderColor, dan hoverBorderWidth.

Berikut adalah kode untuk membuat diagram donat untuk data di atas. Menetapkan nilai untuk rotation sama dengan -Math.PI mengambil titik awal 180 derajat berlawanan arah jarum jam. Kemudian, mengatur nilai circumference ke Math.PI membuat diagram hanya membentang setengah lingkaran.

Membuat Diagram Gelembung

Diagram gelembung digunakan untuk merencanakan atau menampilkan tiga dimensi (p1, p2, p3) data pada tabel. Posisi dan ukuran gelembung menentukan nilai ketiga titik data ini. Sumbu horizontal mewakili titik data pertama (p1), sumbu vertikal mewakili titik data kedua (p2), dan luas gelembung digunakan untuk mewakili nilai titik data ketiga (p3).

Satu hal yang harus diingat adalah bahwa besarnya titik data ketiga tidak ditunjukkan oleh jari-jari gelembung tapi daerahnya. Sekarang, luas lingkaran sebanding dengan kuadrat jari-jari. Ini berarti Anda harus memastikan bahwa jari-jari gelembung yang Anda tetapkan sebanding dengan akar kuadrat dari besarnya titik data ketiga.

Anda dapat membuat diagam gelembung di Chart.js dengan menetapkan nilai variabel kunci type menjadi bubble. Berikut adalah contoh membuat diagram gelembung.

Mari kita tetapkan berat item yang berbeda disimpan di ruangan menggunakan diagram gelembung. Data untuk diagram harus dilalui dalam bentuk objek. Objek data perlu memiliki antarmuka berikut agar bisa ditetapkan dengan benar.

Salah satu perbedaan penting antara diagram gelembung dan semua diagram lainnya adalah bahwa jari-jari gelembung tidak diskalakan dengan diagram.

Misalnya, lebar batang pada diagram batang dapat meningkat atau menurun berdasarkan ukuran bagan. Hal yang sama tidak terjadi dengan diagram gelembung. Jari-jari gelembung selalu sama dengan jumlah piksel sesungguhnya yang telah Anda tentukan. Ini menjadi Masuk akal karena dalam jenis diagram ini, jari-jari sebenarnya digunakan untuk mewakili data yang sesungguhnya.

Mari membuat diagram gelembung untuk merencanakan populasi rusa di berbagai titik di hutan.

Karena jari-jari di sini sebanding dengan akar kuadrat dari besaran sebenarnya, jumlah rusa di (80, 80) adalah 100 kali lebih banyak daripada jumlah rusa pada (0, 100).

Sama seperti semua jenis diagram lainnya, Anda dapat mengatur warna latar belakang, warna garis, dan lebar garis batas titik penentu menggunakan variabel kunci backgroundColor, borderColor, dan borderWidth. Demikian pula, Anda juga dapat menentukan warna latar belakang, warna garis, dan lebar garis saat melakukan hover menggunakan variabel kunci hoverBackgroundColor, hoverBorderColor, dan hoverBorderWidth.

Anda juga dapat menentukan jari-jari tambahan yang ingin Anda tambahkan ke gelembung yang berbeda pada saat melakukan hover menggunakan variabel kunci hoverRadius. Ingat bahwa jari-jari ini ditambahkan ke nilai asli untuk menggambar gelembung yang melayang. Jika gelembung asli memiliki jari-jari 10 dan hoverRadius diatur ke 5, jari-jari gelembung pada saat melakukan hover akan sama dengan 15.

Parameter di atas akan membuat diagram gelembung berikut.

Pemikiran Akhir

Dalam tutorial ini, Anda belajar tentang tiga jenis diagram yang tersedia di Chart.js. Anda sekarang harus dapat memilih jenis diagram yang sesuai untuk merencanakan data Anda dan menetapkan nilai spesifik untuk berbagai variabel kunci untuk mengatur penampilan mereka. Pada tutorial berikutnya, Anda akan belajar bagaimana memanipulasi skala untuk jenis diagram yang berbeda.

Semoga anda menyukai tutorial ini. Jika ada pertanyaan, beri tahu saya 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.