Panduan Sintaks dan Konfigurasi Grafik XY Mermaid.js

Grafik XY adalah komponen visualisasi data yang komprehensif yang digunakan untuk menampilkan grafik garis dan grafik batang pada tata letak koordinat dua dimensi standar. Diperkenalkan untuk menggantikan dan mengintegrasikan skema grafik berdiri lama, yaituxychart-betamesin rendering secara dinamis memproses dataset numerik khusus, menyesuaikan skala grid struktural responsif secara otomatis, dan mendukung tampilan beberapa seri data independen yang tumpang tindih secara bersamaan.

Struktur Sintaks Dasar

Setiap Grafik XY dimulai denganxychart-betaheader deklarasi. Diikuti dengan mengkonfigurasi array kategori sumbu X horizontal, judul sumbu Y vertikal atau batas rentang data, serta setidaknya satu seri pemetaan data eksplisit (seperti bloklineataubarblok).

Mermaid


Edit Mermaid di VPasCode
Mermaid Edit Mermaid in VPasCode 
xychart-beta
  title "Grafik Kinerja Contoh"
  x-axis [Jan, Feb, Mar, Apr]
  y-axis "Pendapatan (USD)"
  bar [4500, 5200, 6100, 5800]
Edit Mermaid in VPasCode



Edit Mermaid di VPasCode

Referensi Sintaks

Tabel di bawah ini menjelaskan definisi data utama dan kunci konfigurasi yang diperlukan untuk membuat struktur Grafik XY dengan benar di Mermaid.js.

Komponen Sintaks Format yang Diterima Deskripsi & Aturan Penggunaan
Deklarasi Kata Kunci Menginisialisasi ruang kerja grafik tata letak 2D. Harus menggunakan blok string tepatxychart-betablok string.
Judul String yang Diberi Tanda Kutip Judul global opsional yang ditampilkan di tengah tepat di atas kanvas grid grafik.
Konfigurasi Sumbu X Daftar Berkurung / Rentang Menentukan label skala horizontal. Menerima string teks kategorikal di dalam kurung[A, B, C] atau rentang titik numerik [100 --> 500].
Konfigurasi Sumbu Y String Judul / Batas Skala Mengatur parameter skala vertikal. Bisa berupa string judul sumbu saja, atau disesuaikan untuk membatasi rentang nilai bawah/atas menggunakan"Judul" 0 --> 100.
Serangkaian Plot Batang Array Numerik Menggambar dataset sebagai batang vertikal. Jumlah elemen di dalam array data harus sesuai persis dengan panjang kategori sumbu X Anda.
Serangkaian Plot Garis Array Numerik Menggambar dataset sebagai garis kontinu yang menghubungkan titik-titik data di seluruh ruang kerja kisi.

Kustomisasi Data Lanjutan (Petunjuk)

Anda dapat menyempurnakan tampilan visual ruang kerja grafik Anda dengan menyematkan blok konfigurasi frontmatter di bagian paling atas potongan kode dokumen Anda. Ini memberi Anda kendali penuh atas tata letak, termasuk warna heksadesimal khusus, ketebalan garis serangkaian plot, dan bidang visibilitas tampilan kisi.

Matriks Atribut Konfigurasi Grafik XY

Kunci Konfigurasi Properti Pilihan Nilai Hasil Visual
showLine benar | salah Mengaktifkan atau menonaktifkan tampilan garis struktural sumbu latar belakang grid di seluruh koordinat.
chartWidth Bilangan Bulat (Pixel) Menetapkan lebar tata letak kanvas batas tetap dari sistem grid.
chartHeight Bilangan Bulat (Pixel) Menetapkan tinggi tata letak kanvas batas tetap dari sistem grid.
themeVariables.xyChart Array Pemetaan Warna Menyisipkan blok warna gaya heksadesimal eksplisit (misalnya, backgroundColor, titleColor, atau slot daftar warna kustom plotColorPalette) ke dalam plot Anda.

Rancangan Dunia Nyata: Perbandingan Teknis Multi-Seri

Rancangan komprehensif ini melacak tinjauan kinerja infrastruktur. Ini menggunakan petunjuk konfigurasi khusus untuk menetapkan ukuran dimensi kanvas, menampilkan jalur garis grid latar belakang, dan menyisipkan palet warna heksadesimal eksplisit. Ini memetakan empat fase kuartalan yang berbeda, menggambarkannya sebagai grafik kombinasi visual yang digabungkan (grafik seri batang yang tumpang tindih dan grafik seri garis bersamaan).

Mermaid


Edit Mermaid di VPasCode
Mermaid Edit Mermaid in VPasCode 
---
config:
  xychart:
    chartWidth: 700
    chartHeight: 400
    showLine: true
  themeVariables:
    xychart:
      titleColor: "#0072B1"
      plotColorPalette: "#0072B1, #E06000"
---
xychart-beta
  title "Metrik Sumber Daya vs Eksekusi Q1-Q4"
  x-axis ["Kuartal 1", "Kuartal 2", "Kuartal 3", "Kuartal 4"]
  y-axis "Satuan Metrik Kinerja" 0 --> 100
  bar [45, 65, 80, 95]
  line [55, 60, 72, 88]
Edit Mermaid in VPasCode



Edit Mermaid di VPasCode

Kiat Sintaks: Saat menumpangkan beberapa plot data (seperti menjalankan data bar dataset dan sebuah line dataset di dalam kanvas tata letak yang sama), mesin rendering akan menumpuk atau menggambar mereka secara berurutan sesuai urutan penulisan dalam skrip teks. Susun blok data Anda secara sengaja untuk menghindari pemotongan visual pada garis kanvas.

Kesalahan Sintaks Umum & Kendala Sistem

Saat mengkompilasi jalur matriks dimensi, beberapa kesalahan konfigurasi halus akan mengganggu perhitungan koordinat. Pertimbangkan parameter pemecahan masalah ini:

  • Ketidaksesuaian Panjang Data: Setiap data tunggal bar atau baris array seri data *harus* berisi jumlah entri yang persis sama dengan yang ditentukan dalam sumbu-x parameter daftar. Memiliki 4 kategori pada sumbu X tetapi memberikan daftar data berisi 5 angka akan sepenuhnya mengganggu kompilasi grafik.
  • Batasan Kutipan: Saat menentukan kategori di dalam tanda kurung daftar sumbu, blok teks yang berisi spasi atau karakter tanda baca khusus harus dikelilingi dengan bersih menggunakan tanda kutip ganda (misalnya, ["Fase 1", "Fase 2"]).
  • Batas Koordinat Numerik: Saat menetapkan rentang manual pada skala sumbu (seperti 0 --> 500), Anda harus secara eksplisit menggunakan dua tanda hubung diikuti oleh simbol lebih besar (-->). Melewatkan satu tanda hubung atau memisahkan karakter operator dengan spasi akan memicu kesalahan tata letak pemrosesan.
  • Bobot Bilangan Bulat Positif: Nilai skala dipetakan ke blok ruang linier. Pastikan nilai yang dilewatkan ke seri Anda tidak mengandung elemen karakter yang tidak di-escape atau nilai kosong null di dalam array.
Scroll to Top