billboard.js 3.13 dirilis: Bagan langkah zona baru! |Penulis: Jae Sung Park | – Beragampengetahuan

baru v3.13 Dirilis hari ini! Rilis ini berisi 4 fitur baru, 2 perbaikan bug, dan peningkatan alat.

Untuk informasi rilis terperinci, silakan lihat catatan rilis:
https://github.com/naver/billboard.js/releases/tag/3.13.0

Bagan rentang langkah area

Tipe rentang berguna untuk memvisualisasikan “nilai rentang” dari nilai dasar. Mulai versi ini, tipe “langkah” baru akan tersedia untuk varian.

Demo: https://naver.github.io/billboard.js/demo/#Chart.FunnelChart

import bb, {areaStepRange} from "billboard";
bb.generate({
data: {
columns: [
["data1", [70, 40, 30],
[155, 130, 115],
[160, 135, 120],
[200, 120, 110],
[95, 50, 40],
[199, 160, 125]
]],
type: areaStepRange()
}
});

Peningkatan rendering area

Untuk merender rentang tertentu dengan garis putus-putus, data.regions Gunakan opsi. Namun cara merender garis putus-putus perlu dilakukan dengan menggabungkan beberapa perintah jalur menjadi garis putus-putus.

Dari contoh tangkapan layar di atas, diperlukan beberapa perintah jalur untuk menggambar garis putus-putus.

## Multiple path command
M5,232L95,136M99,139L104,142 M109,145L114,149 ... M L M L ...
## Single path command
M4,232,136L139,192L206,23L274,164L341,108

Pendekatan ini menyebabkan beberapa masalah rendering (#1, #2), yang kami coba perbaiki secara asli.

Daripada menggunakan perintah path untuk menggambar garis putus-putus, kami menggunakan stroke-dasharray Atribut gaya.

Demo: https://naver.github.io/billboard.js/demo/#Chart.LineChartWithRegions

Dalam hal interaksi zoom, performa bingkai animasi telah ditingkatkan dari 84 md→5 md!

Dengan memperbarui ke 3.12, tidak diperlukan perubahan kode untuk mendapatkan manfaatnya.

legenda.format: Berikan id data asli

Kapan data.names Tentukan opsi yang akan membuat nama data yang ditampilkan berbeda dengan nama (id) aslinya.

{
data: {
names: {
// will make data1 and data2, displayed in different values.
data1: "Detailed Name",
data2: "Name Detailed"
},
columns: [
["data1", 71.4],
["data2", 10]
]
}
}

dalam hal ini, legend.format panggilan balik, Anda akan menerima data.names Ganti nilainya, bukan id aslinya.

data: {
names: {
// will make data1 and data2, displayed in different values.
data1: "Detailed Name",
data2: "Name Detailed"
},
}
legend: {
format: function(id) {
// id will be 'Detailed Name' and 'Name Detailed'
}
}

Mulai rilis ini, nilai “id” asli dan nama pengganti akan diberikan.

data: {
names: {
// will make data1 and data2, displayed in different values.
data1: "Detailed Name",
data2: "Name Detailed"
},
}
legend: {
format: function(id, dataId) {
// id will be 'Detailed Name' and 'Name Detailed'
// dataId will be 'data1' and 'data2'
}
}

Demo: https://naver.github.io/billboard.js/demo/#Legend.LegendFormat

panggilan balik bar.width

Sebelum, bar.width Anda dapat menentukan nilai absolut atau rasio. absolute Tidak dapat mencerminkan perubahan ukuran bagan secara dinamis ratio Dapat direfleksikan namun dengan batasan tertentu.

jalan ratio dihitung berdasarkan persamaan berikut.

x Axis tick Interval * ratio

Misalnya, jika lebar bagan adalah 500 piksel dan jumlah tick sumbu adalah 5x, maka jaraknya akan menjadi sekitar 100 piksel.

Dalam hal ini, jika bar.ratio=0.5 Setelah ditentukan, persamaannya akan menjadi sebagai berikut dan lebar bilahnya akan menjadi 49,9 piksel.

100(exact value is 99.8) * 0.5 = 49.9

Untuk memberikan kontrol lebih besar terhadap penyesuaian nilai lebar kolom, akan ditingkatkan bar.width Pilihan untuk menerima fungsi panggilan balik dengan parameter kenyamanan.

Demo: https://naver.github.io/billboard.js/demo/#BarChartOptions.BarWidth

bar: {
width: function(width, targetsNum, maxDataCount) {
// - width: chart area width
// - targetsNum: number of targets
// - maxDataCount: maximum data count among targets
}
}

Satu hal lagi, perbarui kerangka pengujian

Kami menggunakan Karma + Mocha sebagai kerangka pengujian kami, dan menjaga billboard.js tetap stabil merupakan pengalaman yang luar biasa.

Sayangnya, Karma sudah tidak digunakan lagi dan kami perlu memigrasikan beberapa kerangka pengujian modern lainnya untuk menjaga perpustakaan tetap stabil dan sesuai dengan ekosistem modern.

Setelah beberapa penelitian, kami memutuskan untuk beralih ke vitest. Kami berhasil bermigrasi dalam rilis ini dan pengujian lokal telah ditingkatkan 63%!

Isi lebih detail, silakan cek https://github.com/naver/billboard.js/pull/3866

Itu saja yang kami miliki untuk rilis ini, terima kasih atas perhatian Anda!