Grafik pie adalah grafik statistik berbentuk lingkaran yang digunakan untuk menampilkan proporsi numerik dengan membagi data menjadi potongan-potongan. Dalam Mermaid.js, Anda dapat membuat pemecahan data yang bersih dan responsif secara otomatis tanpa harus bersusah payah dengan perpustakaan grafik yang rumit atau alat desain vektor. Mesin rendering menangani semua penugasan warna dan perhitungan persentase secara dinamis.
Struktur Sintaks Dasar
Setiap grafik pie dimulai dengan pie deklarasi. Anda dapat secara opsional menyertakan judul, diikuti oleh entri data di mana label kategori dibungkus dengan tanda petik dan dipasangkan dengan nilai numerik positif.
pie
title Grafik Pie Contoh
"Kategori A" : 45
"Kategori B" : 30
"Kategori C" : 25
Referensi Sintaks
Tabel di bawah ini menjelaskan opsi struktural inti yang digunakan untuk membuat peta grafik pie di Mermaid.js.
| Komponen | Deskripsi | Contoh Sintaks |
|---|---|---|
| Deklarasi | Menginisialisasi mesin rendering grafik pie. | pie |
| Bendera Tampilkan Data | Sebuah modifikasi opsional yang ditambahkan tepat setelahpieuntuk menampilkan angka aktual bersamaan dengan persentase yang dihitung. |
pie showData |
| Judul | Sebuah judul opsional yang dicetak dengan jelas di atas pusat tata letak diagram. | title Sumber Pendapatan Q3 |
| Label Entri Data | Nama kategori, yang harus selalu dikelilingi tanda petik ganda. | "Pencarian Organik" |
| Pemisah Data | Karakter titik dua yang memisahkan string label Anda dari nilai matematisnya. | : |
| Nilai Data | Sebuah angka positif. Mendukung jumlah absolut atau bobot desimal langsung hingga dua tempat desimal. | 54.25 |
Rancangan Dunia Nyata: Sumber Lalu Lintas Situs Web
Rancangan ini menunjukkan pemecahan dasbor pemasaran dan analitik klasik. Ini menggunakan parameter showData untuk secara eksplisit menampilkan metrik lalu lintas mentah langsung di dalam legenda, sementara grafik menampilkan proporsi tata letak.
pie showData title Saluran Lalu Lintas Inti
"Pencarian Organik" : 3540
"Lalu Lintas Langsung" : 2410
"Media Sosial" : 1850
"Situs Rujukan" : 920
"Kampanye Email" : 680
Kiat Sintaks: Secara default, Mermaid hanya menampilkan persentase yang dihitung relatif (misalnya, 35%) di atas setiap bagian grafik. Menambahkan kata kunci showData secara langsung setelah pie mengubah label untuk menampilkan persentase di grafik dan nilai mentah yang tepat di dalam daftar legenda yang menyertainya.
Konsep Lanjutan: Arahkan & Format
Untuk halaman dokumentasi dengan kepadatan tinggi, Anda dapat menerapkan arahan konfigurasi inline di bagian atas potongan kode Anda untuk menyesuaikan perilaku gaya, mengubah offset penempatan teks, atau mengubah gaya garis struktural.
---
config:
pie:
textPosition: 0.6
themeVariables:
pieOuterStrokeWidth: "3px"
---
pie title Alokasi Anggaran Operasional
"Pengembangan Produk" : 40.5
"Pemasaran & Pertumbuhan" : 25.25
"Operasi Pelanggan" : 20.0
"Bea Administrasi" : 14.25
Kesalahan Umum Sintaks
Meskipun grafik pie memiliki salah satu sintaks paling sederhana di Mermaid, beberapa kesalahan format akan menyebabkan kegagalan pemrosesan tata letak. Hindari kesalahan umum ini:
- Angka Negatif: Mesin rendering hanya menerima nilai numerik positif. Melewatkan nilai negatif atau nol akan melanggar batas pemrosesan matematis.
- Persyaratan Kutipan: Label kategori data harus selalu menggunakan tanda petik ganda. Tanda petik tunggal atau tanda petik yang hilang akan gagal dibangun dengan benar.
- Batasan Presisi Desimal: Meskipun Mermaid menangani desimal titik mengambang yang presisi dengan lancar, secara bawaan ia melacak parameter hingga dua tempat desimal. Pembulatan nilai terlebih dahulu mempertahankan konsistensi yang ketat.
- Kepadatan Potongan: Untuk komunikasi visual yang bersih, merupakan praktik terbaik untuk membatasi grafik Anda hingga 6–8 potongan. Jika dataset Anda memiliki lebih banyak elemen, kelompokkan node-node kecil bersama di bawah kategori ‘Lainnya’ agar desain Anda tetap mudah dibaca.