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:新的區域步長圖表!的詳細內容,更多請關注我的其它相關文章!
相關文章
- android 中心區域選中圖表 WheelChartAndroid
- 微信小程式折線圖表折線圖加區域圖微信小程式
- MySQL設定表自增步長MySql
- 區域分佈圖怎麼做,怎麼做區域網格分佈圖
- w10區域網設定怎麼操作_win10建立區域網的步驟Win10
- 怎麼製作區域分佈圖?區域網格分佈圖怎麼做?
- Unity 任意區域截圖建立SpriteUnity
- Mac圖片區域性擦除工具Mac
- 大型區域網一步到位的網路管理方案
- 論文研究區域圖的製作方法:ArcGIS
- win10連線區域網印表機的步驟_win10如何連線區域網印表機Win10
- 2021年全球區域服務收入及增長率(附原資料表)
- Oracle帶區域性分割槽索引的分割槽表刪除舊分割槽新增新分割槽Oracle索引
- win10怎麼建立區域網工作組 win10組建區域網工作組的基本步驟Win10
- 地圖 判斷點在區域內地圖斷點
- 革舊圖新?區塊鏈需要新的監管方式區塊鏈
- 網頁完整的長截圖怎麼截?3步搞定!網頁
- 什麼地圖軟體好用,區域位置圖怎麼做的地圖
- OSPF協議的多區域配置,圖文講解協議
- 資料庫設計之area區域表資料庫
- 網頁圖表Highcharts實踐教程之圖表區網頁
- 圖片區域性識別怎麼操作
- css去除圖片下多餘空白區域CSS
- 3.17線上|Azure 中國新區域釋出會,攜創新而來!
- 自動生成特定領域模型和圖表模型
- JVM-棧幀之區域性變數表JVM變數
- TempDB 中表變數和區域性臨時表的對比變數
- 可以繪製地圖的軟體,公司區域分佈圖怎麼做地圖
- win10區域網內怎麼傳送訊息_win10區域網發訊息方法步驟Win10
- 社交媒體資訊監控新領域:圖片–資料資訊圖
- 網頁圖表Highcharts實踐教程之外層圖表區網頁
- 新ASP.NET圖表控制元件ASP.NET控制元件
- 卷積步長卷積
- openlayers根據座標在地圖上劃區域地圖
- 百度地圖繪製多邊形區域地圖
- 基於C++程式放大區域性圖形(mfc)C++
- 場所位置圖怎麼製作,怎樣製作自己需要的區域地圖地圖
- 資料視覺化報表分享:區域管理駕駛艙視覺化