#ColumnPercent

Diagram kolom persentase cocok untuk menampilkan hubungan proporsi antar kategori. Sumbu Y menampilkan proporsi data dalam bentuk persentase.

Skenario yang sesuai:

• Membandingkan proporsi antar kategori

• Analisis komposisi data multidimensi

• Tren perubahan proporsi pada deret waktu :::

:::warning{title=Warning} Kebutuhan data:

• Minimal 1 field metrik

• Dimensi pertama ditempatkan pada sumbu X; dimensi lainnya digabung dengan nama metrik (jika ada beberapa metrik) dan ditampilkan sebagai item legenda.

- Semua metrik otomatis digabungkan menjadi satu metrik

Fitur yang aktif secara default:

• Legenda, sumbu, label persentase, tooltip, dan perhitungan persentase aktif secara default

Diagram kolom persentase

Diagram kolom persentase, menampilkan proporsi data setiap kategori dalam bentuk persentase.

Dataset yang sudah diagregasi dan sesuai dengan spesifikasi TidyData, digunakan untuk menentukan sumber data dan struktur diagram. Dataset input pengguna tidak perlu diproses terlebih dahulu. VSeed memiliki kemampuan reshape data yang kuat dan akan melakukan reshape data secara otomatis; data diagram kolom pada akhirnya akan diubah menjadi 2 dimensi dan 1 metrik.

Dimensi pertama pada diagram kolom dipetakan ke sumbu X. Dimensi lainnya akan digabung dengan nama metrik ketika ada beberapa metrik, lalu ditampilkan sebagai item legenda.

ID field yang sesuai dengan dimensi

Alias dimensi

Konfigurasi format tanggal dimensi

Granularitas waktu, menentukan presisi tampilan tanggal

Kanal tempat dimensi dipetakan

- xAxis: mendukung pemetaan beberapa dimensi ke sumbu X

- color: mendukung pemetaan beberapa dimensi ke kanal warna

- detail: mendukung pemetaan beberapa dimensi ke kanal detail

- 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

Semua metrik pada diagram kolom otomatis digabung menjadi satu metrik dan dipetakan ke sumbu Y. Saat ada beberapa metrik, nama metrik akan digabung dengan dimensi lain dan ditampilkan sebagai item legenda.

ID metrik, harus unik

Alias measure, boleh duplikat; jika tidak diatur, alias default adalah ID

Pemformatan angka otomatis, aktif secara default, prioritas tertinggi

Saat autoFormat=true, konfigurasi ini menimpa semua konfigurasi numFormat

Jika aktif, label data chart dan tooltip akan otomatis memilih format yang sesuai berdasarkan nilai measure 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

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

Tipe format angka, mendukung: number (desimal), percent (%), permille (‰), notasi ilmiah

Rasio format angka, tidak boleh 0

Simbol format angka, misalnya %, ‰

Thousands separator for numeric formatting

Sufiks format angka

Prefiks format angka

Decimal places for numeric formatting, using the browser's Intl.NumberFormat minimumFractionDigits and maximumFractionDigits; lower priority than significantDigits.

Significant digits for numeric formatting, using the browser's Intl.NumberFormat minimumSignificantDigits and maximumSignificantDigits; higher priority than fractionDigits.

Rounding priority when both significantDigits and fractionDigits are set; uses the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's roundingPriority.

Rounding mode for numeric formatting, using the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's roundingMode.

Tipe format angka, mendukung: number (desimal), percent (%), permille (‰), notasi ilmiah

Rasio format angka, tidak boleh 0

Simbol format angka, misalnya %, ‰

Thousands separator for numeric formatting

Sufiks format angka

Prefiks format angka

Decimal places for numeric formatting, using the browser's Intl.NumberFormat minimumFractionDigits and maximumFractionDigits; lower priority than significantDigits.

Significant digits for numeric formatting, using the browser's Intl.NumberFormat minimumSignificantDigits and maximumSignificantDigits; higher priority than fractionDigits.

Rounding priority when both significantDigits and fractionDigits are set; uses the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's roundingPriority.

Rounding mode for numeric formatting, using the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's roundingMode.

Channel tempat measure dipetakan

- yAxis: metrik yang dipetakan ke sumbu Y

- detail: measure yang dipetakan ke channel detail

- color: measure yang dipetakan ke kanal warna

- label: measure yang dipetakan ke kanal label

- tooltip: measure yang dipetakan ke kanal tooltip

Membangun grup metrik berbentuk tree dari konfigurasi metrik datar. parentId menunjuk ke id grup metrik induk dan digunakan untuk membangun tree metrik.

Konfigurasi paginasi, digunakan untuk menentukan nama field paginasi, dan harus berupa dimensi.

Field pagination; menentukan nama field untuk pagination dan harus berupa dimensi..

Nilai pagination saat ini; menentukan nilai untuk menentukan halaman saat ini..

Warna latar belakang chart. Warna latar belakang dapat berupa string warna dan secara default transparan, misalnya 'red' atau 'blue'. Nilai hex, rgb, atau rgba seperti '#ff0000' dan 'rgba(255,0,0,0.5)' juga didukung.

Konfigurasi warna untuk menentukan skema warna chart, termasuk daftar warna, mapping warna, dan gradien warna.

Skema warna diskret untuk menentukan warna berbagai elemen dalam chart.

Skema warna gradien linear untuk menentukan warna berbagai elemen dalam chart.

Mapping warna yang digunakan untuk memetakan nilai data ke warna tertentu.

Konfigurasi warna positif/negatif; menentukan warna untuk nilai positif di chart..

Konfigurasi warna positif/negatif; menentukan warna untuk nilai negatif di chart..

Konfigurasi label untuk menentukan label data dalam chart, termasuk posisi, format, dan gaya.

Apakah fungsi label diaktifkan..

Apakah label pindah ke baris berikutnya..

Apakah label menampilkan nilai measure..

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.

Apakah label menampilkan nilai measure. as percentages.

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.

Apakah label menampilkan label dimensi..

Displays all dimension labels.

Catatan: label pada encoding memiliki prioritas lebih tinggi; konfigurasi ini tidak memengaruhi label pada encoding.

Apakah nilai label diformat otomatis; saat autoFormat true, konfigurasi numFormat diabaikan..

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.

Tipe format angka, mendukung: number (desimal), percent (%), permille (‰), notasi ilmiah

Rasio format angka, tidak boleh 0

Simbol format angka, misalnya %, ‰

Thousands separator for numeric formatting

Sufiks format angka

Prefiks format angka

Decimal places for numeric formatting, using the browser's Intl.NumberFormat minimumFractionDigits and maximumFractionDigits; lower priority than significantDigits.

Significant digits for numeric formatting, using the browser's Intl.NumberFormat minimumSignificantDigits and maximumSignificantDigits; higher priority than fractionDigits.

Rounding priority when both significantDigits and fractionDigits are set; uses the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's roundingPriority.

Rounding mode for numeric formatting, using the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's roundingMode.

orderBy: 'profit',

or

Warna latar belakang label

Warna stroke label

Warna font label

Apakah warna font label otomatis dibalik berdasarkan warna elemen.

Posisi label

Apakah penanganan tumpang tindih label diaktifkan.

Label selection; conditions between selectors default to OR.

return _.flatten(

Operator

- in: Memilih item data ketika nilai field dimensi berada di dalam value

- not in: Memilih item data ketika nilai field dimensi tidak berada di dalam value

Operator

- in: Memilih item data ketika nilai field dimensi berada di dalam value

- not in: Memilih item data ketika nilai field dimensi tidak berada di dalam value

sama dengan operator

Nilai field dimensi yang dipilih; mendukung array.

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.

Deskripsi kebutuhan filter pengguna (bahasa alami).

Kode filter JavaScript yang dihasilkan AI.

- Hanya boleh memakai fungsi utilitas bawaan (diakses melalui _ atau R)

- Parameter input: data (array), tiap item berisi field __row_index yang mewakili nomor baris

- Harus mengembalikan array kombinasi indeks baris dan field: Array<{ __row_index: number, field: string }>

- __row_index mewakili nomor baris item data asli, field mewakili field yang disorot

- Dilarang: eval, Function, operasi asinkron, DOM API, permintaan jaringan

field: 'sales'

return _.flatten(

Operator

- in: Memilih item data ketika nilai field dimensi berada di dalam value

- not in: Memilih item data ketika nilai field dimensi tidak berada di dalam value

Operator

- in: Memilih item data ketika nilai field dimensi berada di dalam value

- not in: Memilih item data ketika nilai field dimensi tidak berada di dalam value

sama dengan operator

Nilai field dimensi yang dipilih; mendukung array.

Hasil eksekusi filter dinamis (field runtime)

Ditulis pada fase prepare(); hanya-baca saat runtime

Konfigurasi legend untuk menentukan legend chart, termasuk posisi, format, dan style.

Apakah fitur legend diaktifkan.

Apakah border legend diaktifkan..

legend font color

Pagination icon color.

Pagination icon disabled/grayed-out color.

Ukuran font legenda.

legend font color

Ketebalan font legenda.

Bentuk legenda

Posisi legend

Maximum number of columns or rows when there are many legend items.

If position is horizontal (bottom, bottomLeft, bottomRight, bl, br, top, topLeft, topRight, tl, tr), maxSize controls the number of columns shown.

If position is vertical (left, leftTop, leftBottom, lt, lb, right, rightTop, rightBottom, rt, rb), maxSize controls the number of rows shown.

Konfigurasi tooltip untuk menentukan tooltip chart, termasuk posisi, format, dan style.

Brush selection

- rect: Rectangular selection; selection can be made in both X and Y directions simultaneously.

Apakah tooltip diaktifkan

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.

Define the style of data points that are selected.

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

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

Apakah area brush dibersihkan setelah brushing berakhir

Opasitas titik data yang tidak dipilih, rentang 0-1

Menentukan style titik data yang terkena brush

Style for data NOT selected by the brush.

Menentukan style titik data di luar seleksi.

Category axis (X-axis) configuration, used to define the chart's X-axis, including position, format, style, etc.

Lebar stroke

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

Style for data NOT selected by the brush.

Opasitas titik data di luar pilihan brush, rentang 0-1

Category axis (X-axis) configuration, used to define the chart's X-axis, including position, format, style, etc.

Lebar stroke

Axis label, auto-hide interval; if the interval between two text labels is less than autoHideGap, the overlapping label is automatically hidden. Only effective for category axes.

When autoHide is disabled, use sampling, configured on minGap

Apakah animasi chart bar/column diaktifkan

Bar/column chart animation parameters

Apakah sumbu ditampilkan terbalik; hanya berlaku untuk sumbu numerik.

Efek masuk diagram batang/kolom, mendukung animasi pertumbuhan

- 100000 dikonversi menjadi 10万, ratio:10000, symbol:"万"

Ketebalan font label

Jenis format angka, mendukung: decimal, percent (%), permille (‰), notasi ilmiah.

Rasio format angka, tidak boleh 0.

Bar/column chart update animation configuration

Efek pembaruan diagram batang/kolom, mendukung animasi pertumbuhan dan masuk

- 100000 dikonversi menjadi 10万, ratio:10000, symbol:"万"

Ketebalan font label

Jenis format angka, mendukung: decimal, percent (%), permille (‰), notasi ilmiah.

Rasio format angka, tidak boleh 0.

- 1234.5678 dikonversi menjadi 1234.57, fractionDigits:2 (roundingMode:halfCeil)

Tick size

- 1234.5678 dikonversi menjadi 1230, significantDigits:3

- 1234.5678 dikonversi menjadi 1234.57, fractionDigits:2 (roundingMode:halfCeil)

- 1234.5678 dikonversi menjadi 1230, significantDigits:3 (roundingPriority:lessPrecision)

- 100000 dikonversi menjadi 10万, ratio:10000, symbol:"万"

Ketebalan font label

Jenis format angka, mendukung: decimal, percent (%), permille (‰), notasi ilmiah.

Rasio format angka, tidak boleh 0.

Bar/column chart atmosphere animation configuration

atmosphereanimationeasefunction

atmosphereanimationcolor

Atmosphere animation effect; supports ripple, fade, and breathe

Konfigurasi sumbu kategori sumbu X, digunakan untuk mendefinisikan sumbu X chart, termasuk posisi, format, gaya, dan pengaturan terkait.

Warna garis sumbu

Konfigurasi animasi sumbu X

Konfigurasi sumbu numerik (sumbu Y), digunakan untuk mendefinisikan sumbu Y diagram, termasuk posisi, format, gaya, dan lainnya.

Axis label auto-hide. If two labels overlap, with spacing smaller than autoHideGap, the overlapping label is hidden automatically. Only applies to category axes.

Axis label auto-hide gap. If the gap between two labels is smaller than autoHideGap, the overlapping label is hidden automatically. Only applies to category axes.

Y-axis, numeric axis, Y-axis configuration; defines the Y-axis of the chart, including its position, format, style, etc.

When autoHide is disabled, use sampling and configure it through minGap.

Axis label auto-rotation. When label width exceeds axis length, labels are rotated automatically. Only applies to category axes.

Axis label auto-rotation angle range. Used when auto-rotation is enabled. Only applies to category axes.

Axis label auto-limit. When label width exceeds axis length, overflow is shown with ellipsis and the full label is visible on hover. Only applies to category axes.

Maximum length for axis label auto-limit. When label text exceeds this length, overflow is shown with ellipsis and the full label is visible on hover. Only applies to category axes.

- orderBy:'date'

Urutan kustom yang akan langsung diterapkan ke sumbu kategori

Format angka untuk sumbu numerik. Hanya efektif untuk sumbu numerik. Prioritas lebih rendah daripada autoFormat.

Ukuran font label

orderBy: 'profit',

Sudut rotasi label

Garis sumbu X

or

}

- 100000 dikonversi menjadi 10万, ratio:10000, symbol:"万"

Tanda skala sumbu X

Sufiks format angka

Urutan sortir; dapat berupa 'asc' atau 'desc'

Legend sorting configuration; supports sorting based on dimensions or measures, as well as custom sorting orders; the sort array follows the order from left to right or top to bottom.

sortLegend: {

Judul sumbu X

- 1234.5678 dikonversi menjadi 1234.6, significantDigits:5 (roundingMode:halfCeil)

Teks judul. Secara default mengikuti konfigurasi field.

- orderBy:'profit'

Custom sorting order; this order will be directly applied to the legend. Ascending follows left-to-right or top-to-bottom; descending follows right-to-left or bottom-to-top.

Rectangle graphic element style

Includes built-in light and dark themes. Custom themes can be added via registerTheme.

selector = [{ profit: 100 }, { profit: 200 }]

selector = 100

Tipe garis grid

Konfigurasi animasi sumbu X

value: [100, 300]

}

Konfigurasi sumbu numerik sumbu Y, digunakan untuk mendefinisikan sumbu Y chart, termasuk posisi, format, gaya, dan pengaturan terkait.

Warna garis sumbu

Axis line width

X-axis ticks

Apakah menggunakan sumbu logaritmik; hanya berlaku untuk sumbu numerik

Base of the logarithmic axis; only applies to numeric axes

Apakah interval tick sumbu disesuaikan otomatis agar label tick lebih mudah dibaca. Opsi ini dinonaktifkan saat min dan max dikonfigurasi, dan hanya berlaku untuk sumbu numerik.

Konfigurasi animasi sumbu X

Konfigurasi sumbu numerik (sumbu Y), digunakan untuk mendefinisikan sumbu Y diagram, termasuk posisi, format, gaya, dan lainnya.

Apakah label tick sumbu numerik diformat otomatis. Hanya berlaku untuk sumbu numerik. Saat autoFormat true, numFormat diabaikan.

Format angka untuk sumbu numerik. Hanya berlaku untuk sumbu numerik dan prioritasnya lebih rendah daripada autoFormat.

Jenis format angka, mendukung: decimal, percent (%), permille (‰), notasi ilmiah

Rasio format angka, tidak boleh 0

Simbol format angka, mis. %, ‰

Thousands separator for numeric formatting

Sufiks format angka

Simbol format angka, misalnya %, ‰

Decimal places for numeric formatting, using the browser's Intl.NumberFormat minimumFractionDigits and maximumFractionDigits; lower priority than significantDigits.

Significant digits for numeric formatting, using the browser's Intl.NumberFormat minimumSignificantDigits and maximumSignificantDigits; higher priority than fractionDigits.

Rounding priority when both significantDigits and fractionDigits are set; uses the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's roundingPriority.

Rounding mode for numeric formatting, using the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's roundingMode.

- orderBy:'date'

Urutan kustom yang akan langsung diterapkan ke sumbu kategori

Format angka untuk sumbu numerik. Hanya efektif untuk sumbu numerik. Prioritas lebih rendah daripada autoFormat.

Ukuran font label

Ketebalan font label

Sudut rotasi label

Garis sumbu X

- orderBy:'date'

}

orderBy: 'profit',

Tanda skala sumbu X

Sufiks format angka

Urutan sortir; dapat berupa 'asc' atau 'desc'

Legend sorting configuration; supports sorting based on dimensions or measures, as well as custom sorting orders; the sort array follows the order from left to right or top to bottom.

sortLegend: {

Judul sumbu X

- 1234.5678 dikonversi menjadi 1234.6, significantDigits:5 (roundingMode:halfCeil)

Teks judul. Secara default mengikuti konfigurasi field.

- orderBy:'profit'

Custom sorting order; this order will be directly applied to the legend. Ascending follows left-to-right or top-to-bottom; descending follows right-to-left or bottom-to-top.

Rectangle graphic element style

Includes built-in light and dark themes. Custom themes can be added via registerTheme.

selector = [{ profit: 100 }, { profit: 200 }]

selector = 100

Tipe garis grid

selector = [{ profit: 100 }, { profit: 200 }]

value: [100, 300]

}

Solusi fallback saat eksekusi kode gagal atau lingkungan tidak didukung.

selector = {

const maxItems = _.map(grouped, group =>

_.map(maxItems, item => [

Operator

Apakah menampilkan label area persegi panjang crosshair

- Supports arbitrarily complex data filtering conditions

Radius sudut tumpukan chart kolom

Maximum column width. It can be a pixel value or a percentage string.

Konfigurasi pengurutan sumbu X; mendukung pengurutan berdasarkan dimensi atau measure serta urutan kustom

Konfigurasi pengurutan sumbu kategori; mendukung pengurutan berdasarkan dimensi atau measure serta urutan kustom

])

Sorot item data dengan tingkat profit tertinggi di setiap wilayah

- __row_index menunjukkan nomor baris item data asli, dan field menunjukkan field yang akan di-highlight.

return _.map(filtered, item => ({

Chart dynamic filter configuration

])

Sorot item data dengan tingkat profit tertinggi di setiap wilayah

Custom sort order. The order is applied directly to the legend. Ascending order goes left-to-right or top-to-bottom; descending order goes right-to-left or bottom-to-top.

Tema diagram. Tema adalah konfigurasi fitur berprioritas lebih rendah yang mencakup pengaturan umum untuk semua jenis diagram dan pengaturan bersama dalam satu kategori diagram. Tema bawaan mencakup light dan dark, dan pengguna dapat menyesuaikan tema melalui Builder.

Operator

- not in: Memilih item data yang nilai field dimensinya TIDAK berada dalam daftar nilai.

Gaya mark persegi untuk diagram kolom, termasuk warna, batas, dan sudut membulat.

Mendukung gaya global atau gaya bersyarat

Filter data

Jika selector dikonfigurasi, tersedia selector numerik, data lokal, dimensi bersyarat, dan metrik bersyarat

Jika selector tidak dikonfigurasi, gaya berlaku secara global.

Selector data

Jika selector dikonfigurasi, tersedia selector numerik, data lokal, dimensi bersyarat, dan metrik bersyarat

Jika selector tidak dikonfigurasi, gaya berlaku secara global.

Field dimensi; ID item dalam dimensions

Operator

• in: Memilih item data yang nilai field dimensinya ada di value

• not in: Memilih item data yang nilai field dimensinya tidak ada di value

Operator

• in: Memilih item data yang nilai field dimensinya ada di value

• not in: Memilih item data yang nilai field dimensinya tidak ada di value

Sama seperti operator

Pilih nilai field dimensi pada item data; mendukung array

Filter dinamis (eksekusi kode yang dihasilkan AI)

Mengimplementasikan logika filter data kompleks melalui kode JavaScript yang dihasilkan AI.

Cocok untuk Top N, analisis statistik, kondisi kompleks, dan skenario lain yang sulit diungkapkan dengan selector statis.

Kemampuan utama:

• Mendukung kondisi filter data yang kompleks secara bebas

• Menggunakan fungsi utilitas bawaan untuk operasi data

• Dieksekusi secara aman di lingkungan browser (sandbox Web Worker)

Persyaratan lingkungan: hanya browser yang didukung; lingkungan Node.js menggunakan fallback.

Catatan: selector dan dynamicFilter tidak dapat digunakan bersamaan; dynamicFilter memiliki prioritas lebih tinggi.

Konfigurasi filter dinamis chart

Memfilter mark chart (batang, titik, dll.) melalui kode JavaScript yang dihasilkan AI

Deskripsi kebutuhan filter pengguna (bahasa alami)

Kode filter JavaScript yang dihasilkan AI

• Hanya fungsi utilitas bawaan yang boleh digunakan (diakses melalui _ atau R)

• Parameter input: data (array), setiap item memiliki field __row_index sebagai nomor baris

• Harus mengembalikan array kombinasi indeks baris dan field: Array<{ __row_index: number, field: string }>

• __row_index adalah nomor baris item data asli, field adalah field yang akan disorot

• Dilarang: eval, Function, operasi asinkron, DOM API, permintaan jaringan

Solusi fallback saat eksekusi kode gagal atau lingkungan tidak didukung

Field dimensi; ID item dalam dimensions

Operator

• in: Memilih item data yang nilai field dimensinya ada di value

• not in: Memilih item data yang nilai field dimensinya tidak ada di value

Operator

• in: Memilih item data yang nilai field dimensinya ada di value

• not in: Memilih item data yang nilai field dimensinya tidak ada di value

Sama seperti operator

Pilih nilai field dimensi pada item data; mendukung array

Hasil eksekusi filter dinamis (field runtime)

Ditulis pada fase prepare() dan hanya-baca saat runtime

Apakah elemen batang (persegi) terlihat

Warna elemen batang (persegi)

Opasitas warna elemen batang (persegi)

Warna batas elemen batang (persegi)

Lebar batas elemen batang (persegi)

Gaya batas elemen batang (persegi)

Radius sudut elemen batang (persegi)

Opasitas stroke elemen batang (persegi)

Konfigurasi titik anotasi; berdasarkan data yang dipilih, menentukan posisi, format, gaya, dan lainnya.

Selector titik anotasi, digunakan untuk memilih titik data.

Field dimensi; ID item dalam dimensions

Operator

• in: Memilih item data yang nilai field dimensinya ada di value

• not in: Memilih item data yang nilai field dimensinya tidak ada di value

Operator

• in: Memilih item data yang nilai field dimensinya ada di value

• not in: Memilih item data yang nilai field dimensinya tidak ada di value

Sama seperti operator

Pilih nilai field dimensi pada item data; mendukung array

Menentukan id metrik tempat titik anotasi berada. Pada skenario multi-measure, dapat digabung dengan selector untuk menemukan titik anotasi target secara unik.

Filter dinamis (eksekusi kode yang dihasilkan AI)

Mengimplementasikan logika filter data kompleks melalui kode JavaScript yang dihasilkan AI.

Cocok untuk Top N, analisis statistik, kondisi kompleks, dan skenario lain yang sulit diungkapkan dengan selector statis.

Kemampuan utama:

• Mendukung kondisi filter data yang kompleks secara bebas

• Menggunakan fungsi utilitas bawaan untuk operasi data

• Dieksekusi secara aman di lingkungan browser (sandbox Web Worker)

Persyaratan lingkungan: hanya browser yang didukung; lingkungan Node.js menggunakan fallback.

Catatan: selector dan dynamicFilter tidak dapat digunakan bersamaan; dynamicFilter memiliki prioritas lebih tinggi.

Konfigurasi filter dinamis chart

Memfilter mark chart (batang, titik, dll.) melalui kode JavaScript yang dihasilkan AI

Deskripsi kebutuhan filter pengguna (bahasa alami)

Kode filter JavaScript yang dihasilkan AI

• Hanya fungsi utilitas bawaan yang boleh digunakan (diakses melalui _ atau R)

• Parameter input: data (array), setiap item memiliki field __row_index sebagai nomor baris

• Harus mengembalikan array kombinasi indeks baris dan field: Array<{ __row_index: number, field: string }>

• __row_index adalah nomor baris item data asli, field adalah field yang akan disorot

• Dilarang: eval, Function, operasi asinkron, DOM API, permintaan jaringan

Solusi fallback saat eksekusi kode gagal atau lingkungan tidak didukung

Field dimensi; ID item dalam dimensions

Operator

• in: Memilih item data yang nilai field dimensinya ada di value

• not in: Memilih item data yang nilai field dimensinya tidak ada di value

Operator

• in: Memilih item data yang nilai field dimensinya ada di value

• not in: Memilih item data yang nilai field dimensinya tidak ada di value

Sama seperti operator

Pilih nilai field dimensi pada item data; mendukung array

Hasil eksekusi filter dinamis (field runtime)

Ditulis pada fase prepare() dan hanya-baca saat runtime

Konten teks

Warna teks

Ukuran font teks

Ketebalan font teks

Perataan teks, biasanya tidak perlu diatur

Disarankan menggunakan right agar teks berada di sisi kiri garis anotasi

right: teks berada di kiri garis referensi, tepi kanannya sejajar dengan garis anotasi vertikal

left: teks berada di kanan garis referensi, tepi kirinya sejajar dengan garis anotasi vertikal

center: teks berada di tengah garis referensi

Perataan vertikal teks. Biasanya gunakan top agar teks tampil di bawah titik anotasi dan tetap berada dalam area chart yang terlihat

Disarankan menggunakan top agar teks dapat ditampilkan lengkap

top: teks berada di bawah titik anotasi

middle: teks sejajar dengan pusat titik anotasi

bottom: teks berada di atas titik anotasi

Apakah latar belakang terlihat

Warna latar belakang

Warna batas latar belakang

Lebar batas latar belakang

Radius sudut latar belakang

Padding latar belakang

Jarak offset seluruh titik anotasi pada arah Y dalam piksel. Jika titik berada di atas chart, disarankan nilai positif; jika di bawah, nilai negatif.

Nilai negatif menggeser seluruh komponen ke atas, misalnya -10 berarti naik 10 piksel

Nilai positif menggesernya ke bawah, misalnya 10 berarti turun 10 piksel

Jarak offset seluruh titik anotasi pada arah X dalam piksel. Jika berada di sisi kiri chart, disarankan nilai positif; jika di kanan, nilai negatif.

Nilai negatif menggeser seluruh komponen ke kiri, misalnya -10 berarti ke kiri 10 piksel

Nilai positif menggesernya ke kanan, misalnya 10 berarti ke kanan 10 piksel

Konfigurasi garis anotasi vertikal.

Nilai X tetap untuk garis anotasi vertikal; jika sumbu kategori berada pada arah X, masukkan nilai dimensi, jika sumbu numerik masukkan nilai konkret

Filter dinamis (eksekusi kode yang dihasilkan AI)

Kode filter JavaScript yang dihasilkan AI

• Hanya fungsi utilitas bawaan yang boleh digunakan (diakses melalui _ atau R)

• Parameter input: data (array)

• Harus mengembalikan satu nilai angka atau string: number | string

• Skenario penggunaan: nilai dinamis yang dibutuhkan garis anotasi (horizontal/vertikal)

• Dilarang: eval, Function, operasi asinkron, DOM API, permintaan jaringan

Deskripsi kebutuhan nilai dinamis (bahasa alami)

Filter dinamis (eksekusi kode yang dihasilkan AI)

Kode filter JavaScript yang dihasilkan AI

• Hanya fungsi utilitas bawaan yang boleh digunakan (diakses melalui _ atau R)

• Parameter input: data (array)

• Harus mengembalikan satu nilai angka atau string: number | string

• Skenario penggunaan: nilai dinamis yang dibutuhkan garis anotasi (horizontal/vertikal)

• Dilarang: eval, Function, operasi asinkron, DOM API, permintaan jaringan

Nilai fallback saat eksekusi kode gagal atau lingkungan tidak didukung

Hasil eksekusi filter dinamis (field runtime)

Ditulis pada fase prepare() dan hanya-baca saat runtime

Konten teks

Posisi teks

Posisi label garis anotasi relatif terhadap garis.

Warna teks

Ukuran font teks

Ketebalan font teks

Perataan teks, biasanya tidak perlu diatur

Disarankan menggunakan right agar teks berada di sisi kiri garis anotasi

right: teks berada di kiri garis referensi, tepi kanannya sejajar dengan garis anotasi vertikal

left: teks berada di kanan garis referensi, tepi kirinya sejajar dengan garis anotasi vertikal

center: teks berada di tengah garis referensi

Perataan vertikal teks, biasanya tidak perlu diatur

Disarankan menggunakan top agar teks lengkap tetap berada dalam area chart yang terlihat

top: teks berada di bawah garis referensi dan sejajar dengan ujung garis anotasi vertikal

middle: teks berada di tengah garis referensi

bottom: teks berada di atas garis referensi

Apakah garis terlihat

Warna garis

Lebar garis

Gaya garis

Apakah latar belakang terlihat

Warna latar belakang

Warna batas latar belakang

Lebar batas latar belakang

Radius sudut latar belakang

Padding latar belakang

Konfigurasi garis anotasi horizontal.

Nilai Y tetap untuk garis anotasi horizontal; jika sumbu kategori berada pada arah Y, masukkan nilai dimensi, jika sumbu numerik masukkan nilai konkret

Filter dinamis (eksekusi kode yang dihasilkan AI)

Kode filter JavaScript yang dihasilkan AI

• Hanya fungsi utilitas bawaan yang boleh digunakan (diakses melalui _ atau R)

• Parameter input: data (array)

• Harus mengembalikan satu nilai angka atau string: number | string

• Skenario penggunaan: nilai dinamis yang dibutuhkan garis anotasi (horizontal/vertikal)

• Dilarang: eval, Function, operasi asinkron, DOM API, permintaan jaringan

Deskripsi kebutuhan filter pengguna (bahasa alami).

Filter dinamis (eksekusi kode yang dihasilkan AI)

Kode filter JavaScript yang dihasilkan AI

• Hanya fungsi utilitas bawaan yang boleh digunakan (diakses melalui _ atau R)

• Parameter input: data (array)

• Harus mengembalikan satu nilai angka atau string: number | string

• Skenario penggunaan: nilai dinamis yang dibutuhkan garis anotasi (horizontal/vertikal)

• Dilarang: eval, Function, operasi asinkron, DOM API, permintaan jaringan

Nilai fallback saat eksekusi kode gagal atau lingkungan tidak didukung

Hasil eksekusi filter dinamis (field runtime)

Ditulis pada fase prepare() dan hanya-baca saat runtime

Konten teks

Posisi teks

Posisi label garis anotasi relatif terhadap garis.

Warna teks

Ukuran font teks

Ketebalan font teks

Perataan teks, biasanya tidak perlu diatur

Disarankan menggunakan right agar teks berada di sisi kiri garis anotasi

right: teks berada di kiri garis referensi, tepi kanannya sejajar dengan garis anotasi vertikal

left: teks berada di kanan garis referensi, tepi kirinya sejajar dengan garis anotasi vertikal

center: teks berada di tengah garis referensi

Perataan vertikal teks, biasanya tidak perlu diatur

Disarankan menggunakan top agar teks lengkap tetap berada dalam area chart yang terlihat

top: teks berada di bawah garis referensi dan sejajar dengan garis anotasi horizontal

middle: teks berada di tengah garis referensi

bottom: teks berada di atas garis referensi

Apakah latar belakang terlihat

Warna latar belakang

Warna batas latar belakang

Lebar batas latar belakang

Radius sudut latar belakang

Padding latar belakang

Apakah garis terlihat

Warna garis

Lebar garis

Gaya garis

Konfigurasi garis pemisah; bagian di atas dan di bawah nilai anotasi dapat diberi warna berbeda.

Warna utama untuk bagian yang lebih besar dari nilai anotasi

Warna utama untuk bagian yang lebih kecil dari nilai anotasi

Konfigurasi area anotasi; berdasarkan data yang dipilih, menentukan posisi dan gaya area anotasi.

Selector area anotasi.

Field dimensi; ID item dalam dimensions

Operator

• in: Memilih item data yang nilai field dimensinya ada di value

• not in: Memilih item data yang nilai field dimensinya tidak ada di value

Operator

• in: Memilih item data yang nilai field dimensinya ada di value

• not in: Memilih item data yang nilai field dimensinya tidak ada di value

Sama seperti operator

Pilih nilai field dimensi pada item data; mendukung array

Konten teks

Posisi teks

Warna teks

Ukuran font teks

Ketebalan font teks

Perataan teks, biasanya tidak perlu diatur

center: teks berada di tengah area anotasi

left: teks berada di sisi kiri area anotasi

right: teks berada di sisi kanan area anotasi

Perataan vertikal teks, biasanya tidak perlu diatur

top: teks berada di bagian atas area anotasi

middle: teks berada di tengah area anotasi

bottom: teks berada di bagian bawah area anotasi

Apakah latar belakang terlihat

Warna latar belakang

Warna batas latar belakang

Lebar batas latar belakang

Radius sudut latar belakang

Padding latar belakang

Warna area anotasi

Opasitas area anotasi

Warna batas area anotasi

Lebar batas area anotasi

Radius sudut area anotasi

Pola garis putus batas area anotasi

Padding luar

Saat fungsi pivot chart atau kombinasi measure diaktifkan, apakah mengaktifkan fungsi linkage dimensi.

Saat hover pada nilai dimensi tertentu, data dengan nilai dimensi yang sama di chart lain akan ikut di-highlight.

Konfigurasi linkage dimensi chart pivot

Apakah mengaktifkan linkage dimensi chart pivot

Apakah menampilkan informasi Tooltip untuk subchart yang sesuai dengan semua dimensi

Apakah menampilkan label yang sesuai dengan crosshair

Konfigurasi bahasa chart. Mendukung dua bahasa, 'zh-CN' dan 'en-US'. Bahasa juga dapat diatur dengan memanggil intl.setLocale('zh-CN')