Lewati ke konten utama

Mermaid 11.15.0

Contekan diagram lingkaran Mermaid

Diagram lingkaran membandingkan beberapa bagian positif dari satu total. Gunakan diagram batang untuk banyak kategori atau nilai berdekatan, dan diagram kuadran untuk dua dimensi independen.

Buat dengan Pembuat diagram lingkaran →

Mulai cepat

Nilai adalah bobot, bukan persentase yang harus berjumlah 100. Mermaid menghitung proporsi dari total.

Mermaid
Buka di editor → 
pie showData
  title Upaya dokumentasi
  "Penulisan" : 48
  "Peninjauan" : 32
  "Penerbitan" : 20

Memuat…

Referensi sintaks

Referensi sintaks
SintaksArti
pie / pie showDataDeklarasikan diagram lingkaran; showData menambahkan nilai asli pada legenda.
title TextTambahkan judul opsional.
"Label" : 12.75Gunakan label dalam tanda kutip dan bobot positif. Presisi yang didokumentasikan adalah dua angka desimal.
config.pie.textPosition: 0.75Posisikan teks secara radial: 0 di pusat, 1 di tepi luar.
themeVariables.pieOuterStrokeWidth: "2px"Atur lebar garis tepi luar bagan.
themeVariables.pie1…pie12Atur warna irisan palet menggunakan tema base.
pieTitleTextSize / pieTitleTextColor / pieSectionTextSize / pieSectionTextColorVariabel tema untuk judul dan label irisan.
pieLegendTextSize / pieLegendTextColor / pieStrokeColor / pieStrokeWidth / pieOuterStrokeColor / pieOpacityVariabel tema untuk teks legenda, garis irisan, garis tepi luar, dan opasitas.
%% / accTitle: / accDescr:Tambahkan komentar dan deskripsi aksesibel.

Desimal dan proporsi

Gunakan nilai positif dan titik sebagai pemisah desimal meskipun bahasa Anda biasanya memakai koma. showData menampilkan bobot masukan pada legenda; persentase irisan dibulatkan ke bilangan bulat. Pada Mermaid 11.15, irisan di bawah 1% disembunyikan, tetapi legenda tetap ada.

Mermaid
Buka di editor → 
pie showData
  title Jam penyuntingan
  "Penyusunan draf" : 12.75
  "Pemeriksaan fakta" : 6.25
  "Koreksi akhir" : 3.50

Memuat…

Label dan legenda ringkas

Gunakan nama kategori singkat agar legenda mudah dibaca. Tanpa showData, legenda memuat nama sementara teks irisan tetap menunjukkan proporsi. Hindari terlalu banyak kategori kecil.

Mermaid
Buka di editor → 
pie
  title Hasil peninjauan
  "Diterima" : 18
  "Direvisi" : 7
  "Ditunda" : 3

Memuat…

Geser teks irisan ke dalam

textPosition adalah rasio radial, bukan jarak piksel. Nilai kecil menggeser label ke pusat. Irisan sangat sempit masih dapat bertumpuk; sederhanakan data sebelum menyesuaikan tampilan.

Mermaid
Buka di editor → 
---
config:
  pie:
    textPosition: 0.6
---
pie showData
  title Pembagian peninjauan
  "Teknis" : 60
  "Editorial" : 40

Memuat…

Warna irisan dan garis tepi luar

Gunakan tema base sebelum menyesuaikan pie1 hingga pie12. Atur pieOuterStrokeWidth sebagai panjang CSS. Sesuaikan warna teks dan garis dengan latar. Warna tidak membuat irisan bernilai berdekatan lebih mudah dibandingkan.

Mermaid
Buka di editor → 
---
config:
  theme: base
  themeVariables:
    pie1: "#d3e5ff"
    pie2: "#50e3c2"
    pie3: "#f5f5f5"
    pieOuterStrokeWidth: "2px"
    pieSectionTextColor: "#171717"
---
pie showData
  title Alokasi pekerjaan
  "Riset" : 45
  "Penulisan" : 35
  "Peninjauan" : 20

Memuat…

Kesalahan umum

Menggunakan bobot negatif

Nilai negatif ditolak. Gunakan nilai positif karena diagram lingkaran tidak dapat menunjukkan kerugian bersih.

Sintaks tidak valid — contoh perbaikan di bawah

pie
  "Peninjauan" : -2

Menggunakan koma sebagai pemisah desimal

Tulis 12.75, bukan 12,75. Bulatkan data ke dua angka desimal sesuai notasi yang didokumentasikan.

Keterbatasan

  • Gunakan bobot positif untuk irisan terlihat. Nol diterima tetapi tidak menggambar irisan; nilai negatif ditolak.
  • Nilai sumber mendukung dua angka desimal sesuai dokumentasi, tetapi persentase dibulatkan. Irisan di bawah 1% disembunyikan.
  • Banyak kategori dan nilai berdekatan sulit dibandingkan; gunakan diagram batang.

Pertanyaan yang sering diajukan

Apakah jumlah nilai harus 100?
Tidak. Mermaid membagi setiap bobot positif dengan total untuk menghitung proporsi.
Apa yang diubah oleh showData?
Opsi ini menambahkan nilai masukan pada legenda tanpa mengubah bobot atau geometri bagan.
Bagaimana cara mengganti warna irisan?
Gunakan tema base dan atur pie1 hingga pie12 di themeVariables.