Sunburst
Diagram Sunburst mendukung kanal visual berikut:
color: kanal warna, mendukung beberapa dimensi atau satu metrik
label: kanal label, mendukung beberapa dimensi dan beberapa metrik
tooltip: kanal tooltip, mendukung beberapa dimensi dan beberapa metrik
Diagram Sunburst digunakan untuk menampilkan data hierarkis; ukuran setiap sektor merepresentasikan nilai numeriknya.
Skenario yang sesuai:
- Menampilkan distribusi persentase data hierarkis bertingkat
- Menonjolkan hubungan hierarkis dan proporsi
Persyaratan data:
- Minimal 1 field numerik untuk memetakan ukuran luas
- Minimal 1 field dimensi untuk pembagian hierarkis
chartType
Type: "sunburst"
Diagram Sunburst
Diagram Sunburst menampilkan hubungan proporsional pada data hierarkis.
Contoh 'sunburst'
dataset
Type: Record[]
Set data
Set data yang sudah diagregasi dan sesuai spesifikasi TidyData, digunakan untuk menentukan sumber dan struktur data diagram.
Contoh [{category:'A', value:30}, {category:'B', value:70}]
dimensions
Type: HierarchyDimension[] | undefined
Dimensi
Konfigurasi dimensi untuk menentukan struktur hierarkis data.
Contoh [{id: 'category', alias: 'Kategori'}]
id
Type: string
ID field yang sesuai dengan dimensi
alias
Type: string | undefined
Alias dimensi
timeFormat
Type: TimeFormat | undefined
Konfigurasi format tanggal dimensi
type
Type: "year" | "quarter" | "month" | "week" | "day" | "hour" | "minute" | "second"
Granularitas waktu, menentukan presisi tampilan tanggal
encoding
Type: "tooltip" | "label" | "hierarchy" | undefined
Kanal tempat dimensi dipetakan
- hierarchy: mendukung pemetaan beberapa dimensi ke kanal hierarki
- label: mendukung pemetaan beberapa dimensi ke kanal label
- tooltip: mendukung pemetaan beberapa dimensi ke kanal tooltip
Dimensi pertama langsung dipetakan ke kanal warna.
measures
Type: HierarchyMeasure[] | undefined
Metrik
Konfigurasi metrik untuk menentukan ukuran (luas) sektor.
Contoh [{id: 'value', alias: 'Nilai'}]
id
Type: string
ID metrik, harus unik
alias
Type: string | undefined
Alias metrik, boleh duplikat; jika tidak diatur, alias bernilai id
autoFormat
Type: boolean | undefined
Pemformatan angka otomatis, aktif secara default, prioritas tertinggi
Saat autoFormat=true, semua konfigurasi numFormat akan ditimpa
Saat diaktifkan, label data diagram dan tooltip otomatis memilih format yang sesuai berdasarkan nilai metrik dan locale
Aturan format: angka desimal dengan compact notation aktif, minimal 0 digit desimal, maksimal 2 digit desimal, pembulatan otomatis, menggunakan implementasi Intl.NumberFormat browser
Contoh:
- locale=zh-CN: 749740.264 → 74.45万
- locale=en-US: 749740.264 → 744.5K
numFormat
Type: NumFormat | undefined
Pemformatan angka kustom untuk metrik; otomatis diterapkan pada label dan tooltip
Catatan: Untuk memakai format kustom, autoFormat=false harus diatur secara eksplisit; jika tidak, autoFormat akan menimpa konfigurasi ini
type
Type: "number" | "percent" | "permille" | "scientific" | undefined
Jenis format angka, mendukung angka (desimal), persen (%), permil (‰), dan notasi ilmiah
ratio
Type: number | undefined
Rasio format angka, tidak boleh 0
Contoh - 100000 dikonversi menjadi 10万, ratio:10000, symbol:"万" - 100000 dikonversi menjadi 10K, ratio:1000, symbol:"K"
symbol
Type: string | undefined
Simbol format angka, misalnya %, ‰
Contoh - 100000 dikonversi menjadi 10万, ratio:10000, symbol:"万" - 100000 dikonversi menjadi 10K, ratio:1000, symbol:"K"
thousandSeparator
Type: boolean | undefined
Pemisah ribuan untuk format angka
suffix
Type: string | undefined
Sufiks format angka
prefix
Type: string | undefined
Prefiks format angka
fractionDigits
Type: number | undefined
Jumlah digit desimal untuk format angka, menggunakan minimumFractionDigits dan maximumFractionDigits dari Intl.NumberFormat browser; prioritas lebih rendah daripada significantDigits
Contoh - 1234.5678 dikonversi menjadi 1235 , fractionDigits:0 (roundingMode:halfCeil) - 1234.5678 dikonversi menjadi 1234.6 , fractionDigits:1 (roundingMode:halfCeil) - 1234.5678 dikonversi menjadi 1234.57 , fractionDigits:2 (roundingMode:halfCeil) - 1234.5678 dikonversi menjadi 1230.568 , fractionDigits:3 (roundingMode:halfCeil) - 1234.5678 dikonversi menjadi 1234.5678 , fractionDigits:4 (roundingMode:halfCeil) - 1234.5678 dikonversi menjadi 1234.56780 , fractionDigits:5 (roundingMode:halfCeil)
significantDigits
Type: number | undefined
Digit signifikan untuk format angka, menggunakan minimumSignificantDigits dan maximumSignificantDigits dari Intl.NumberFormat browser; prioritas lebih tinggi daripada fractionDigits
Contoh - 1234.5678 dikonversi menjadi 1000 , significantDigits:1 - 1234.5678 dikonversi menjadi 1200 , significantDigits:2 - 1234.5678 dikonversi menjadi 1230 , significantDigits:3 - 1234.5678 dikonversi menjadi 1234 , significantDigits:4 - 1234.5678 dikonversi menjadi 1234.6 , significantDigits:5 (roundingMode:halfCeil) - 1234.5678 dikonversi menjadi 1234.57 , significantDigits:6 (roundingMode:halfCeil) - 1234.5678 dikonversi menjadi 1234.568 , significantDigits:7 (roundingMode:halfCeil) - 1234.5678 dikonversi menjadi 1234.5678 , significantDigits:8 (roundingMode:halfCeil)
roundingPriority
Type: "morePrecision" | "lessPrecision" | undefined
Prioritas pembulatan format angka saat significantDigits dan fractionDigits sama-sama diatur; menggunakan Intl.NumberFormat browser dan mengikuti aturan roundingPriority yang sama
Contoh - 1234.5678 dikonversi menjadi 1230 , significantDigits:3 (roundingPriority:lessPrecision) - 1234.5678 dikonversi menjadi 1234.5678 , significantDigits:3 (roundingPriority:morePrecision)
roundingMode
Type: "floor" | "ceil" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | "halfEven" | undefined
Mode pembulatan format angka, menggunakan Intl.NumberFormat browser dan mengikuti aturan roundingMode yang sama
format
Type: NumFormat | undefined
type
Type: "number" | "percent" | "permille" | "scientific" | undefined
Jenis format angka, mendukung angka (desimal), persen (%), permil (‰), dan notasi ilmiah
ratio
Type: number | undefined
Rasio format angka, tidak boleh 0
Contoh - 100000 dikonversi menjadi 10万, ratio:10000, symbol:"万" - 100000 dikonversi menjadi 10K, ratio:1000, symbol:"K"
symbol
Type: string | undefined
Simbol format angka, misalnya %, ‰
Contoh - 100000 dikonversi menjadi 10万, ratio:10000, symbol:"万" - 100000 dikonversi menjadi 10K, ratio:1000, symbol:"K"
thousandSeparator
Type: boolean | undefined
Pemisah ribuan untuk format angka
suffix
Type: string | undefined
Sufiks format angka
prefix
Type: string | undefined
Prefiks format angka
fractionDigits
Type: number | undefined
Jumlah digit desimal untuk format angka, menggunakan minimumFractionDigits dan maximumFractionDigits dari Intl.NumberFormat browser; prioritas lebih rendah daripada significantDigits
Contoh - 1234.5678 dikonversi menjadi 1235 , fractionDigits:0 (roundingMode:halfCeil) - 1234.5678 dikonversi menjadi 1234.6 , fractionDigits:1 (roundingMode:halfCeil) - 1234.5678 dikonversi menjadi 1234.57 , fractionDigits:2 (roundingMode:halfCeil) - 1234.5678 dikonversi menjadi 1230.568 , fractionDigits:3 (roundingMode:halfCeil) - 1234.5678 dikonversi menjadi 1234.5678 , fractionDigits:4 (roundingMode:halfCeil) - 1234.5678 dikonversi menjadi 1234.56780 , fractionDigits:5 (roundingMode:halfCeil)
significantDigits
Type: number | undefined
Digit signifikan untuk format angka, menggunakan minimumSignificantDigits dan maximumSignificantDigits dari Intl.NumberFormat browser; prioritas lebih tinggi daripada fractionDigits
Contoh - 1234.5678 dikonversi menjadi 1000 , significantDigits:1 - 1234.5678 dikonversi menjadi 1200 , significantDigits:2 - 1234.5678 dikonversi menjadi 1230 , significantDigits:3 - 1234.5678 dikonversi menjadi 1234 , significantDigits:4 - 1234.5678 dikonversi menjadi 1234.6 , significantDigits:5 (roundingMode:halfCeil) - 1234.5678 dikonversi menjadi 1234.57 , significantDigits:6 (roundingMode:halfCeil) - 1234.5678 dikonversi menjadi 1234.568 , significantDigits:7 (roundingMode:halfCeil) - 1234.5678 dikonversi menjadi 1234.5678 , significantDigits:8 (roundingMode:halfCeil)
roundingPriority
Type: "morePrecision" | "lessPrecision" | undefined
Prioritas pembulatan format angka saat significantDigits dan fractionDigits sama-sama diatur; menggunakan Intl.NumberFormat browser dan mengikuti aturan roundingPriority yang sama
Contoh - 1234.5678 dikonversi menjadi 1230 , significantDigits:3 (roundingPriority:lessPrecision) - 1234.5678 dikonversi menjadi 1234.5678 , significantDigits:3 (roundingPriority:morePrecision)
roundingMode
Type: "floor" | "ceil" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | "halfEven" | undefined
Mode pembulatan format angka, menggunakan Intl.NumberFormat browser dan mengikuti aturan roundingMode yang sama
encoding
Type: "tooltip" | "label" | "size" | undefined
Kanal tempat metrik dipetakan
- size: metrik dipetakan ke kanal ukuran, digunakan untuk menampilkan area atau ukuran pada diagram seperti Treemap dan Sunburst.
- label: metrik dipetakan ke kanal label
- tooltip: metrik dipetakan ke kanal tooltip
parentId
Type: string | undefined
Dalam bentuk konfigurasi metrik datar, membangun grup metrik berbentuk tree. parentId menunjuk ke id grup metrik induk untuk membangun tree metrik
Ada dua cara mengonfigurasi tree metrik: Opsi 1 langsung mengonfigurasi tree metrik dengan children; Opsi 2 mengonfigurasi daftar metrik datar dengan parentId. Kedua cara ini tidak dapat digunakan bersamaan
page
Type: Page | undefined
Konfigurasi Paginasi
Digunakan untuk menentukan nama field paginasi; harus berupa dimensi
field
Type: string
Field paginasi; menentukan nama field untuk paginasi, harus berupa dimensi
currentValue
Type: string
Nilai paginasi saat ini; menentukan nilai yang digunakan untuk menentukan halaman saat ini
Contoh '2023-01-01'
backgroundColor
Type: BackgroundColor
Warna latar belakang chart
Warna latar dapat berupa string warna (misalnya 'red', 'blue'), atau nilai hex, rgb, atau rgba (misalnya '#ff0000', 'rgba(255,0,0,0.5)')
color
Type: Color | undefined
Warna
Konfigurasi warna untuk menentukan skema warna chart, termasuk daftar warna, pemetaan warna, dan gradasi warna.
colorScheme
Type: string[] | undefined
Skema warna diskret untuk menentukan warna berbagai elemen dalam chart
Contoh ['#FFCDD2,#F8BBD0,#E1BEE7,#D1C4E9,#C5CAE9,#BBDEFB,#B3E5FC,#B2EBF2,#B2DFDB,#C8E6C9,#DCEDC8,#F0F4C3,#FFF9C4,#FFECB3,#FFE0B2']
linearColorScheme
Type: string[] | undefined
Skema warna gradasi linear untuk menentukan warna berbagai elemen dalam chart
Contoh ['#FFCDD2, #F8BBD0]
colorMapping
Type: Record<string, string> | undefined
Pemetaan warna untuk memetakan nilai data ke warna tertentu
Contoh { 'profit': 'red', 'sales': 'blue', }
positiveColor
Type: string | undefined
Konfigurasi warna positif/negatif; menentukan warna untuk nilai positif dalam chart
negativeColor
Type: string | undefined
Konfigurasi warna positif/negatif; menentukan warna untuk nilai negatif dalam chart
label
Type: Label | undefined
Label
Konfigurasi label untuk menentukan label data diagram, termasuk posisi, format, dan gaya.
enable
Type: false | true
Apakah fungsi label diaktifkan
wrap
Type: boolean | undefined
Apakah label dibungkus ke baris berikutnya
showValue
Type: boolean | undefined
Apakah label menampilkan nilai metrik
Dalam skenario multi-metrik, tidak perlu khawatir konflik nilai karena semua metrik terkait plot diproses melalui foldMeasures dan digabung menjadi satu metrik yang merepresentasikan satu titik data
Catatan: label pada encoding memiliki prioritas lebih tinggi; konfigurasi ini tidak memengaruhi label pada encoding
showValuePercent
Type: boolean | undefined
Apakah label menampilkan persentase nilai metrik
Dalam skenario multi-metrik, tidak perlu khawatir konflik nilai karena semua metrik terkait plot diproses melalui foldMeasures dan digabung menjadi satu metrik yang merepresentasikan satu titik data
Catatan: label pada encoding memiliki prioritas lebih tinggi; konfigurasi ini tidak memengaruhi label pada encoding
showDimension
Type: boolean | undefined
Apakah label menampilkan label dimensi
Tampilkan semua label dimensi
Catatan: label pada encoding memiliki prioritas lebih tinggi; konfigurasi ini tidak memengaruhi label pada encoding
autoFormat
Type: boolean | undefined
Apakah nilai label diformat otomatis; saat autoFormat true, konfigurasi numFormat diabaikan
numFormat
Type: NumFormat | undefined
Konfigurasi format nilai label; digabung dengan format dalam measure, dengan prioritas format pada measure lebih tinggi. Prioritas numFormat lebih rendah daripada autoFormat
type
Type: "number" | "percent" | "permille" | "scientific" | undefined
Jenis format angka, mendukung angka (desimal), persen (%), permil (‰), dan notasi ilmiah
ratio
Type: number | undefined
Rasio format angka, tidak boleh 0
Contoh - 100000 dikonversi menjadi 10万, ratio:10000, symbol:"万" - 100000 dikonversi menjadi 10K, ratio:1000, symbol:"K"
symbol
Type: string | undefined
Simbol format angka, misalnya %, ‰
Contoh - 100000 dikonversi menjadi 10万, ratio:10000, symbol:"万" - 100000 dikonversi menjadi 10K, ratio:1000, symbol:"K"
thousandSeparator
Type: boolean | undefined
Pemisah ribuan untuk format angka
suffix
Type: string | undefined
Sufiks format angka
prefix
Type: string | undefined
Prefiks format angka
fractionDigits
Type: number | undefined
Jumlah digit desimal untuk format angka, menggunakan minimumFractionDigits dan maximumFractionDigits dari Intl.NumberFormat browser; prioritas lebih rendah daripada significantDigits
Contoh - 1234.5678 dikonversi menjadi 1235 , fractionDigits:0 (roundingMode:halfCeil) - 1234.5678 dikonversi menjadi 1234.6 , fractionDigits:1 (roundingMode:halfCeil) - 1234.5678 dikonversi menjadi 1234.57 , fractionDigits:2 (roundingMode:halfCeil) - 1234.5678 dikonversi menjadi 1230.568 , fractionDigits:3 (roundingMode:halfCeil) - 1234.5678 dikonversi menjadi 1234.5678 , fractionDigits:4 (roundingMode:halfCeil) - 1234.5678 dikonversi menjadi 1234.56780 , fractionDigits:5 (roundingMode:halfCeil)
significantDigits
Type: number | undefined
Digit signifikan untuk format angka, menggunakan minimumSignificantDigits dan maximumSignificantDigits dari Intl.NumberFormat browser; prioritas lebih tinggi daripada fractionDigits
Contoh - 1234.5678 dikonversi menjadi 1000 , significantDigits:1 - 1234.5678 dikonversi menjadi 1200 , significantDigits:2 - 1234.5678 dikonversi menjadi 1230 , significantDigits:3 - 1234.5678 dikonversi menjadi 1234 , significantDigits:4 - 1234.5678 dikonversi menjadi 1234.6 , significantDigits:5 (roundingMode:halfCeil) - 1234.5678 dikonversi menjadi 1234.57 , significantDigits:6 (roundingMode:halfCeil) - 1234.5678 dikonversi menjadi 1234.568 , significantDigits:7 (roundingMode:halfCeil) - 1234.5678 dikonversi menjadi 1234.5678 , significantDigits:8 (roundingMode:halfCeil)
roundingPriority
Type: "morePrecision" | "lessPrecision" | undefined
Prioritas pembulatan format angka saat significantDigits dan fractionDigits sama-sama diatur; menggunakan Intl.NumberFormat browser dan mengikuti aturan roundingPriority yang sama
Contoh - 1234.5678 dikonversi menjadi 1230 , significantDigits:3 (roundingPriority:lessPrecision) - 1234.5678 dikonversi menjadi 1234.5678 , significantDigits:3 (roundingPriority:morePrecision)
roundingMode
Type: "floor" | "ceil" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | "halfEven" | undefined
Mode pembulatan format angka, menggunakan Intl.NumberFormat browser dan mengikuti aturan roundingMode yang sama
labelFontSize
Type: number | undefined
Ukuran font label
labelFontWeight
Type: string | number | undefined
Ketebalan font label
labelBackgroundColor
Type: string | undefined
Warna latar label
labelStroke
Type: string | undefined
Warna stroke label
labelColor
Type: string | undefined
LabelfontWarna
labelColorSmartInvert
Type: boolean | undefined
Apakah warna font label otomatis dibalik berdasarkan warna elemen grafis
labelPosition
Type: "inside" | "outside" | undefined
Posisi label
labelOverlap
Type: boolean | undefined
Apakah fungsi anti-overlap label diaktifkan
selector
Type: Selector | Selectors | undefined
Pemfilteran label; relasi default antar selector adalah OR
field
Type: string
Field dimensi; ID item dimensi tertentu
operator
Type: "in" | "not in" | undefined
Operator
- in: Memilih item data yang nilai field dimensinya berada dalam nilai yang ditentukan
- not in: Memilih item data yang nilai field dimensinya tidak berada dalam nilai yang ditentukan
op
Type: "in" | "not in" | undefined
Operator
- in: Memilih item data yang nilai field dimensinya berada dalam nilai yang ditentukan
- not in: Memilih item data yang nilai field dimensinya tidak berada dalam nilai yang ditentukan
sama dengan operator
value
Type: string | number | (string | number)[]
Memilih nilai field dimensi; mendukung array
dynamicFilter
Type: ChartDynamicFilter | undefined
Filter dinamis (eksekusi kode yang dihasilkan AI)
Mengimplementasikan logika filter data kompleks melalui kode JavaScript yang dihasilkan AI
Kemampuan inti:
- Mendukung kondisi filter data yang kompleks secara bebas
- Menggunakan fungsi utilitas bawaan untuk manipulasi data
- Eksekusi aman di lingkungan browser (sandbox Web Worker)
Persyaratan lingkungan: hanya mendukung lingkungan browser; lingkungan Node.js akan menggunakan fallback
Catatan: selector dan dynamicFilter tidak dapat digunakan bersamaan; dynamicFilter memiliki prioritas lebih tinggi
Konfigurasi filter dinamis chart
Mengimplementasikan filter mark chart (bar, titik, dll.) melalui kode JavaScript yang dihasilkan AI
type
Type: "row-with-field"
description
Type: string | undefined
Deskripsi kebutuhan filter pengguna (bahasa natural)
Contoh "Sorot kolom dengan penjualan lebih dari 1000"
"Sorot kolom dengan margin laba tertinggi di setiap area"
code
Type: string
Kode filter JavaScript yang dihasilkan AI
- Hanya fungsi utilitas bawaan yang dapat digunakan (diakses melalui _ atau R)
- Parameter input: data (array), setiap item berisi field __row_index yang merepresentasikan nomor baris
- Harus mengembalikan array kombinasi indeks baris dan field: Array<{ __row_index: number, field: string }>
- __row_index merepresentasikan nomor baris item data asli; field merepresentasikan field yang akan disorot
- Dilarang: eval, Function, operasi asynchronous, DOM API, request jaringan
Contoh Sorot field sales pada item data dengan sales lebih dari 1000
Sorot item data dengan margin laba tertinggi di setiap area
Sorot item data yang difilter dengan beberapa kondisi
fallback
Type: Selector | Selectors | undefined
Rencana fallback saat eksekusi kode gagal atau lingkungan tidak didukung
field
Type: string
Field dimensi; ID item dimensi tertentu
operator
Type: "in" | "not in" | undefined
Operator
- in: Memilih item data yang nilai field dimensinya berada dalam nilai yang ditentukan
- not in: Memilih item data yang nilai field dimensinya tidak berada dalam nilai yang ditentukan
op
Type: "in" | "not in" | undefined
Operator
- in: Memilih item data yang nilai field dimensinya berada dalam nilai yang ditentukan
- not in: Memilih item data yang nilai field dimensinya tidak berada dalam nilai yang ditentukan
sama dengan operator
value
Type: string | number | (string | number)[]
Memilih nilai field dimensi; mendukung array
result
Type: DynamicFilterExecutionResult<RowWithFieldRes> | undefined
Hasil eksekusi filter dinamis (field runtime)
Ditulis pada fase prepare(); hanya baca saat runtime
success
Type: false | true
data
Type: T[] | undefined
error
Type: string | undefined
tooltip
Type: Tooltip | undefined
Tooltip
Konfigurasi tooltip untuk menentukan tooltip diagram, termasuk posisi, format, gaya, dan lainnya.
enable
Type: false | true
Apakah tooltip diaktifkan
theme
Type: Theme | undefined
Tema chart; tema memiliki prioritas lebih rendah dan mencakup konfigurasi umum untuk semua tipe chart serta konfigurasi khusus untuk kategori chart tertentu
Tema terang dan gelap bawaan; pengguna dapat menentukan tema kustom melalui Builder
Tema
Tema terang dan gelap bawaan; tema baru dapat dikustomisasi melalui registerTheme.
Contoh 'dark'
'light'
length
Type: number
brand
Type: brand
locale
Type: "zh-CN" | "en-US" | "ja-JP" | "de-DE" | "id-ID" | "fr-FR" | "ko-KR" | "vi-VN" | undefined
Bahasa
Konfigurasi bahasa chart; mendukung 'zh-CN' dan 'en-US'. Selain itu, metode intl.setLocale('zh-CN') dapat dipanggil untuk menentukan bahasa.