billboardjs elease：新的區域步長圖表！

新的 v3.13 版本今天釋出了！此版本包含 4 個新功能、2 個錯誤修復和工具改進。詳細釋出資訊請檢視發行說明：https://github.com/naver/billboard.js/releases/tag/3.13.0 什麼是新的？ 面積步長範圍圖範圍型別對於從基線值視覺化“範圍值”很有用。從這個版本開始，將為變體提供新的“步驟”型別。演示：https://naver.github.io/billboard.js/demo/#chart.funnelchartimport 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 commandm5,232l95,136m99,139l104,142 m109,145l114,149 ... m l m l ...## single path commandm4,232,136l139,192l206,23l274,164l341,108登入後複製這種方法導致了一些渲染問題（#1，#2），我們嘗試以原生方式改進這個問題。我們不再使用路徑命令繪製虛線，而是使用stroke-dasharray 樣式屬性進行渲染。之前：路徑命令/之後：行程-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.barwidthbar: { 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%！套餐持續時間業力差異業力（摩卡+柴）142.382-vitest（webdriverio：chrome）144.364*+1.39%vitest（劇作家：chromium）51.606**-63.75%填寫更多詳情，請檢視 https://github.com/naver/billboard.js/pull/3866 閉幕式這就是我們本次釋出的全部內容，感謝您的關注！ 以上就是billboardjs elease：新的區域步長圖表！的詳細內容，更多請關注我的其它相關文章！