新的 v3.13 版本今天發布了！此版本包含 4 個新功能、2 個錯誤修復和工具改進。
詳細發布信息，請查看發行說明：
https://github.com/naver/billboard.js/releases/tag/3.13.0
什麼是新的？
面積步長範圍圖
範圍類型對於從基線值可視化「範圍值」很有用。從這個版本開始，將為變體提供新的“步驟”類型。
示範：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()
}
});
登入後複製
區域渲染改進
要使用虛線渲染某些範圍，請使用 data.regions 選項。但渲染虛線的方式，需要將多個路徑指令組合成虛線來完成。
從上面的範例截圖來看，需要多個路徑指令來繪製虛線。
## 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
登入後複製
這種方法導致了一些渲染問題（#1、#2），我們嘗試以原生方式改進此問題。
我們不再使用路徑指令繪製虛線，而是使用 stroke-dasharray 樣式屬性來渲染。
示範：https://naver.github.io/billboard.js/demo/#Chart.LineChartWithRegions
在縮放互動上，動畫影格效能已從 84ms 提升至 5ms！
透過更新到 3.12，無需更改任何程式碼即可獲得好處。
legend.format：提供原始資料id
當指定 data.names 選項時，它會使顯示的資料名稱與原始名稱（id）不同。
{
data: {
names: {
// will make data1 and data2, displayed in different values.
data1: "Detailed Name",
data2: "Name Detailed"
},
columns: [
["data1", 71.4],
["data2", 10]
]
}
}
登入後複製
在這種情況下，legend.format回呼，將收到data.names替換後的值，而不是原始id。
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'
}
}
登入後複製
從此版本將提供原始「id」值和替換的名稱。
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'
}
}
登入後複製
示範：https://naver.github.io/billboard.js/demo/#Legend.LegendFormat
bar.width 回調
以前，bar.width 可以指定絕對值或比值。絕對不能反映圖表動態調整大小，比率可以反映但有一定限制。
路比的計算是基於以下公式。
x Axis tick Interval * ratio
登入後複製
例如，如果圖表寬度為 500px，軸刻度數為 5 x，則間隔約為 100px。
在這種情況下，如果指定 bar.ratio=0.5，則等式將如下，並且 bar 的寬度將為 49.9px。
100(exact value is 99.8) * 0.5 = 49.9
登入後複製
為了更好地控制調整欄的寬度值，將增強 bar.width 選項以接受具有方便參數的回呼函數。
示範：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
}
}
登入後複製
還有一件事，更新測試框架
我們採用了 Karma + Mocha 作為測試框架，維護 billboard.js 穩定性是很棒的經驗。
遺憾的是，Karma 宣布棄用，我們需要遷移一些其他現代測試框架，以保持庫穩定並遵循現代生態系統。
經過一番研究，我們決定轉向 vitest。我們在此版本中成功遷移，本地測試改進高達 63%！
| Packages |
Duration |
Diff over Karma |
| Karma (Mocha + Chai) |
142.382 |
- |
| Vitest (webdriverio:chrome) |
144.364*
|
+1.39% |
| Vitest (playwright:chromium) |
51.606**
|
-63.75% |
填寫更多詳情，請查看 https://github.com/naver/billboard.js/pull/3866
閉幕式
這就是我們這次發布的全部內容，感謝您的關注！
以上是billboard.js elease：新的區域步長圖表！的詳細內容。更多資訊請關注PHP中文網其他相關文章！
