Heatmap
- Konfigurasi field yang direkomendasikan: 1 metrik, 2 dimensi
- Mendukung reshape data: minimal 1 metrik, 0 dimensi
Heatmap mendukung kanal visual berikut:
xAxis : kanal sumbu X, mendukung beberapa dimensi, memetakan nilai dimensi ke sumbu X
yAxis : kanal sumbu Y, mendukung beberapa dimensi, memetakan nilai dimensi ke sumbu Y
detail : kanal detail, mendukung beberapa dimensi, digunakan untuk menampilkan data dengan granularitas lebih halus dalam seri warna yang sama
color : kanal warna, mendukung satu metrik, memetakan nilai metrik ke warna
tooltip: kanal tooltip, mendukung beberapa dimensi dan beberapa metrik, ditampilkan saat kursor berada di atas titik data
label : kanal label, mendukung beberapa dimensi dan beberapa metrik, menampilkan label data pada titik data
Heatmap menampilkan distribusi dan intensitas data melalui kedalaman warna dalam matriks dua dimensi.
Skenario yang berlaku:
- Menampilkan kepadatan dan intensitas data dua dimensi berskala besar
- Analisis keterkaitan antara kategori dan nilai numerik
- Perbandingan silang antara deret waktu dan kategori
Kebutuhan data:
- Setidaknya 2 field dimensi untuk menentukan baris dan kolom heatmap
- Setidaknya 1 field numerik (metrik), digunakan untuk memetakan kedalaman warna
- Ketika beberapa metrik didukung, biasanya satu metrik dipilih untuk pemetaan warna
Fitur yang aktif secara default:
- Legenda, sumbu, label data, tooltip, dan penskalaan numerik aktif secara default
chartType
Type: "heatmap"
Heatmap
Heatmap menampilkan distribusi dan intensitas data melalui kedalaman warna dalam matriks dua dimensi.
Contoh 'heatmap'
dataset
Type: Record[]
Dataset
Dataset yang telah diagregasi dan sesuai spesifikasi TidyData, digunakan untuk menentukan sumber serta struktur data diagram. Dataset masukan pengguna tidak perlu diproses lagi; VSeed memiliki kemampuan reshape data yang kuat dan akan melakukan reshape secara otomatis. Data heatmap akhirnya dikonversi menjadi 2 dimensi dan 1 metrik.
Contoh [{month:'Jan', value:100}, {month:'Feb', value:150}, {month:'Mar', value:120}]
dimensions
Type: HeatmapDimension[] | undefined
Dimensi
Pada heatmap, dimensi pertama dipetakan ke sumbu sudut; dimensi lainnya digabungkan dengan nama metrik (jika ada beberapa metrik) dan ditampilkan sebagai item legenda.
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: "xAxis" | "tooltip" | "label" | "row" | "column" | "yAxis" | undefined
Kanal tempat dimensi dipetakan
- xAxis: mendukung pemetaan beberapa dimensi ke sumbu X
- yAxis: mendukung pemetaan beberapa dimensi ke sumbu Y
- tooltip: mendukung pemetaan beberapa dimensi ke kanal tooltip
- label: mendukung pemetaan beberapa dimensi ke kanal label
- row: mendukung pemetaan beberapa dimensi ke kanal baris
- column: mendukung pemetaan beberapa dimensi ke kanal kolom
measures
Type: HeatmapMeasure[] | undefined
Metrik
Metrik pada heatmap otomatis digabungkan menjadi satu metrik dan dipetakan ke sumbu radius. Jika ada beberapa metrik, nama metrik akan digabungkan dengan dimensi lainnya dan ditampilkan sebagai item legenda.
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, konfigurasi ini menimpa semua konfigurasi numFormat
Jika aktif, label data diagram dan tooltip akan otomatis memilih format yang sesuai berdasarkan nilai metrik dan locale.
Aturan format: angka desimal dengan notasi ringkas aktif, minimum 0 digit desimal, maksimum 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 measure; otomatis diterapkan ke label dan tooltip.
Catatan: Untuk memakai format kustom, Anda harus menetapkan autoFormat=false secara eksplisit; jika tidak, autoFormat akan menimpa konfigurasi ini
type
Type: "number" | "percent" | "permille" | "scientific" | undefined
Jenis format angka, mendukung: decimal, percent (%), permille (‰), 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, mis. %, ‰
Contoh - 100000 dikonversi menjadi 10万, ratio:10000, symbol:"万" - 100000 dikonversi menjadi 10K, ratio:1000, symbol:"K"
thousandSeparator
Type: boolean | undefined
Thousands separator for numeric formatting
suffix
Type: string | undefined
Sufiks format angka
prefix
Type: string | undefined
Simbol format angka, mis. %, ‰
fractionDigits
Type: number | undefined
Decimal places for numeric formatting, using the browser's Intl.NumberFormat minimumFractionDigits and maximumFractionDigits; lower priority than 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
Significant digits for numeric formatting, using the browser's Intl.NumberFormat minimumSignificantDigits and maximumSignificantDigits; higher priority than 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
Rounding priority when both significantDigits and fractionDigits are set; uses the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's roundingPriority.
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
Rounding mode for numeric formatting, using the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's roundingMode.
format
Type: NumFormat | undefined
type
Type: "number" | "percent" | "permille" | "scientific" | undefined
Jenis format angka, mendukung: decimal, percent (%), permille (‰), 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, mis. %, ‰
Contoh - 100000 dikonversi menjadi 10万, ratio:10000, symbol:"万" - 100000 dikonversi menjadi 10K, ratio:1000, symbol:"K"
thousandSeparator
Type: boolean | undefined
Thousands separator for numeric formatting
suffix
Type: string | undefined
Sufiks format angka
prefix
Type: string | undefined
Simbol format angka, misalnya %, ‰
fractionDigits
Type: number | undefined
Decimal places for numeric formatting, using the browser's Intl.NumberFormat minimumFractionDigits and maximumFractionDigits; lower priority than 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
Significant digits for numeric formatting, using the browser's Intl.NumberFormat minimumSignificantDigits and maximumSignificantDigits; higher priority than 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
Rounding priority when both significantDigits and fractionDigits are set; uses the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's roundingPriority.
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
Rounding mode for numeric formatting, using the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's roundingMode.
encoding
Type: "color" | "tooltip" | "label" | undefined
Channel tempat metrik dipetakan
- color: metrik yang dipetakan ke kanal warna
- label: metrik yang dipetakan ke kanal label
- tooltip: metrik yang dipetakan ke kanal tooltip
parentId
Type: string | undefined
Membangun grup metrik berbentuk tree dari konfigurasi metrik datar. parentId menunjuk ke id grup metrik induk dan digunakan untuk membangun tree metrik.
Ada dua cara mengonfigurasi pohon metrik: opsi 1 adalah langsung mengonfigurasi pohon metrik dengan children; opsi 2 adalah mengonfigurasi daftar metrik datar dengan parentId. Kedua cara ini tidak dapat digunakan bersamaan.
page
Type: Page | undefined
Konfigurasi pagination
field
Type: string
Field pagination; menentukan nama field untuk pagination dan harus berupa dimensi..
currentValue
Type: string
Nilai pagination saat ini; menentukan nilai untuk menentukan halaman saat ini..
Contoh '2023-01-01'
backgroundColor
Type: BackgroundColor
Warna latar belakang chart
Warna latar belakang dapat berupa string warna (mis. 'red', 'blue'), atau nilai hex, rgb, maupun rgba (mis. '#ff0000', 'rgba(255,0,0,0.5)')
color
Type: Color | undefined
Color
Konfigurasi warna untuk menentukan skema warna chart, termasuk daftar warna, mapping warna, dan gradien 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 gradien linear untuk menentukan warna berbagai elemen dalam chart.
Contoh ['#FFCDD2, #F8BBD0]
colorMapping
Type: Record<string, string> | undefined
Mapping warna yang digunakan 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 di chart..
negativeColor
Type: string | undefined
Konfigurasi warna positif/negatif; menentukan warna untuk nilai negatif di chart..
label
Type: Label | undefined
Konfigurasi label heatmap, digunakan untuk mendefinisikan label data diagram. Inversi warna label otomatis aktif untuk memastikan keterbacaan.
enable
Type: false | true
Apakah fungsi label diaktifkan..
wrap
Type: boolean | undefined
Apakah label pindah ke baris berikutnya..
showValue
Type: boolean | undefined
Apakah label menampilkan nilai metrik.
Dalam skenario multi-metrik, tidak perlu khawatir terjadi konflik nilai, karena semua metrik yang terkait dengan plot melewati proses foldMeasures dan digabung menjadi satu metrik yang mewakili 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 terjadi konflik nilai, karena semua metrik yang terkait dengan plot melewati proses foldMeasures dan digabung menjadi satu metrik yang mewakili 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..
Displays all dimension labels.
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 untuk nilai label; digabungkan dengan format di measure, dan format di measure memiliki prioritas lebih tinggi. numFormat memiliki prioritas lebih rendah daripada autoFormat.
type
Type: "number" | "percent" | "permille" | "scientific" | undefined
Jenis format angka, mendukung: decimal, percent (%), permille (‰), 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
Thousands separator for numeric formatting
suffix
Type: string | undefined
Sufiks format angka
prefix
Type: string | undefined
Simbol format angka, misalnya %, ‰
fractionDigits
Type: number | undefined
Decimal places for numeric formatting, using the browser's Intl.NumberFormat minimumFractionDigits and maximumFractionDigits; lower priority than 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
Significant digits for numeric formatting, using the browser's Intl.NumberFormat minimumSignificantDigits and maximumSignificantDigits; higher priority than 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
Rounding priority when both significantDigits and fractionDigits are set; uses the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's roundingPriority.
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
Rounding mode for numeric formatting, using the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's roundingMode.
labelFontSize
Type: number | undefined
Ukuran font label
labelFontWeight
Type: string | number | undefined
Ketebalan font label
labelBackgroundColor
Type: string | undefined
Warna latar belakang label
labelStroke
Type: string | undefined
Warna stroke label
labelColor
Type: string | undefined
Warna font label
labelColorSmartInvert
Type: boolean | undefined
Apakah warna font label otomatis dibalik berdasarkan warna elemen.
labelPosition
Type: "inside" | "outside" | undefined
Posisi label
labelOverlap
Type: boolean | undefined
Apakah penanganan tumpang tindih label diaktifkan.
selector
Type: Selector | Selectors | undefined
Label selection; conditions between selectors default to OR.
field
Type: string
Field dimensi; ID item dalam dimensions.
operator
Type: "in" | "not in" | undefined
Operator
- in: Memilih item data yang nilai field dimensinya berada dalam daftar nilai.
- not in: Memilih item data yang nilai field dimensinya TIDAK berada dalam daftar nilai.
op
Type: "in" | "not in" | undefined
Operator
- in: Memilih item data yang nilai field dimensinya berada dalam daftar nilai.
- not in: Memilih item data yang nilai field dimensinya TIDAK berada dalam daftar nilai.
sama dengan operator
value
Type: string | number | (string | number)[]
Pilih nilai field dimensi; mendukung array
dynamicFilter
Type: ChartDynamicFilter | undefined
Filter dinamis (eksekusi kode yang dihasilkan AI)
- in: Memilih item data ketika nilai field dimensi berada di dalam value
Core Capabilities:
- Mendukung kondisi filter data kompleks apa pun
- Menggunakan fungsi utilitas bawaan untuk operasi data
- Dieksekusi aman di lingkungan browser (sandbox Web Worker)
Environment Requirements: Supports browser environment only; Node.js environment will use fallback.
Catatan: selector dan dynamicFilter tidak dapat digunakan bersamaan; dynamicFilter memiliki prioritas lebih tinggi..
Konfigurasi filter dinamis chart.
Memfilter marker chart (bar, titik, dll.) melalui kode JavaScript yang dihasilkan AI.
type
Type: "row-with-field"
description
Type: string | undefined
Deskripsi kebutuhan filter pengguna (bahasa alami).
Contoh - Supports any complex data filtering conditions
- Uses built-in utility functions for data operations
code
Type: string
Kode filter JavaScript yang dihasilkan AI.
- Mendukung kondisi filter data kompleks apa pun
- Menggunakan fungsi utilitas bawaan untuk operasi data
- Dieksekusi aman di lingkungan browser (sandbox Web Worker)
- __row_index menunjukkan nomor baris item data asli, dan field menunjukkan field yang akan di-highlight.
- Dilarang: eval, Function, operasi asinkron, DOM API, permintaan jaringan.
Contoh return _.map(filtered, item => ({
const maxItems = _.map(grouped, group =>
const profitRate = item.profit / item.sales;
fallback
Type: Selector | Selectors | undefined
Fallback strategy when code execution fails or the environment is not supported.
field
Type: string
Field dimensi; ID item dalam dimensions.
operator
Type: "in" | "not in" | undefined
Operator
- in: Memilih item data yang nilai field dimensinya berada dalam daftar nilai.
- not in: Memilih item data yang nilai field dimensinya TIDAK berada dalam daftar nilai.
op
Type: "in" | "not in" | undefined
Operator
- in: Memilih item data yang nilai field dimensinya berada dalam daftar nilai.
- not in: Memilih item data yang nilai field dimensinya TIDAK berada dalam daftar nilai.
sama dengan operator
value
Type: string | number | (string | number)[]
Pilih 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
legend
Type: ColorLegend | undefined
legend
Konfigurasi legenda warna heatmap, digunakan untuk mendefinisikan legenda chart, termasuk posisi, format, gaya, dan lainnya.
position
Type: "left" | "leftTop" | "leftBottom" | "lt" | "lb" | "top" | "topLeft" | "topRight" | "tl" | "tr" | "right" | "rightTop" | "rightBottom" | "rt" | "rb" | "bottom" | "bottomLeft" | "bottomRight" | "bl" | "br" | undefined
Posisi legend
Contoh position: 'rightTop'
enable
Type: boolean | undefined
Apakah fitur legend diaktifkan.
Contoh enable: true
labelColor
Type: string | undefined
legend font color
labelFontColor
Type: string | undefined
legend font color
labelFontSize
Type: number | undefined
Ukuran font legenda.
Contoh labelFontSize: 10
labelFontWeight
Type: string | number | undefined
Ketebalan font legenda.
Contoh labelFontWeight: 400
railBackgroundColor
Type: string | undefined
handlerBorderColor
Type: string | undefined
tooltip
Type: Tooltip | undefined
Informasi tooltip
Konfigurasi tooltip heatmap, digunakan untuk mendefinisikan tooltip chart, termasuk posisi, format, gaya, dan lainnya.
enable
Type: false | true
Apakah tooltip diaktifkan
brush
Type: Brush | undefined
Menentukan bentuk dan arah kotak seleksi.
- polygon: seleksi poligonal, memungkinkan menggambar poligon bebas dengan mengklik beberapa titik
- y: Y-axis brush; selects only in the Y-axis direction, unrestricted on the X-axis.
enable
Type: boolean | undefined
Define the style of data points that are selected.
brushType
Type: "rect" | "x" | "y" | "polygon" | undefined
brushtype
Opacity
Opasitas titik data yang dipilih, rentang 0-1
- polygon: seleksi brush poligon; klik beberapa titik untuk menggambar poligon apa pun sebagai seleksi
- x: seleksi brush hanya dalam arah sumbu X; arah sumbu Y tidak dibatasi
- y: seleksi brush arah sumbu Y saja; arah sumbu X tidak dibatasi
brushMode
Type: "single" | "multiple" | undefined
Opasitas titik data yang dipilih, rentang 0-1
Style for unselected data items
Menentukan style titik data di luar area brush yang dipilih
- multiple: mode multi-pilih; beberapa area brush dapat ada bersamaan
removeOnClick
Type: boolean | undefined
Apakah area brush dibersihkan setelah brushing berakhir
inBrushStyle
Type: { opacity?: number; stroke?: string; lineWidth?: number; } | undefined
Opasitas titik data yang tidak dipilih, rentang 0-1
Menentukan style titik data yang terkena brush
opacity
Type: number | undefined
Style for data NOT selected by the brush.
Menentukan style titik data di luar seleksi.
stroke
Type: string | undefined
Category axis (X-axis) configuration, used to define the chart's X-axis, including position, format, style, etc.
lineWidth
Type: number | undefined
Lebar stroke
outOfBrushStyle
Type: { opacity?: number; stroke?: string; lineWidth?: number; } | undefined
X-axis, category axis, X-axis configuration; defines the X-axis of the chart, including its position, format, style, etc.
Menentukan style titik data di luar brush selection
opacity
Type: number | undefined
Style for data NOT selected by the brush.
Opasitas titik data di luar pilihan brush, rentang 0-1
stroke
Type: string | undefined
Category axis (X-axis) configuration, used to define the chart's X-axis, including position, format, style, etc.
lineWidth
Type: number | undefined
Lebar stroke
theme
Type: Theme | undefined
Tema chart. Tema adalah konfigurasi fungsi berprioritas rendah yang mencakup konfigurasi umum untuk semua tipe chart dan konfigurasi chart bersama untuk satu tipe chart.
Tersedia dua tema bawaan, light dan dark. Pengguna dapat menyesuaikan tema melalui Builder.
const maxItems = _.map(grouped, group =>
_.map(maxItems, item => [
Contoh 'dark'
'light'
'customThemeName'
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
language
Konfigurasi bahasa chart. Mendukung 'zh-CN' dan 'en-US'. Anda juga dapat memanggil intl.setLocale('zh-CN') untuk mengatur bahasa.