新的 v3.14 版本今天發布了!此版本包含 5 個新功能、8 個錯誤修復和一系列改進。
詳細的發布信息,請查看發行說明:
- https://github.com/naver/billboard.js/releases/tag/3.14.0
新增了新的調整大小選項。預設調整大小將根據容器尺寸的變化進行調整。
新的 resize.auto='viewBox' 選項將使圖表調整大小並保持縱橫比,並且無需任何計算成本。
基本上,它利用了「viewBox」屬性行為,它實際上做的是拉伸 SVG 視口。
示範:https://naver.github.io/billboard.js/demo/#ChartOptions.resizeViewBox
如果使用要求符合,強烈建議。
圖表初始化渲染時,內部會計算軸刻度文字大小,以計算軸區域所需的空間。
一般情況下,根本不需要考慮這個過程,但是在初始化之後軸刻度文字大小發生變化的情況下,計算將導致渲染不正確,因為內部使用的刻度文字大小無效變更後。
為了改進此用例,將提供新的 axis.evalTextSize 選項,其中可以選擇獲取軸刻度大小計算的方式。
axis: { // 1: default, which will memoize evaluated axis text size evalTextSize: true, // 2: will evaluate the dimension of axis text size every time. evalTextSize: false, // 3: customize dimension evaluator evalTextSize: function(text) { ... return {width, height): } }
離開圖表區域的「預設」行為是使目前選定的狀態散焦。這意味著工具提示、聚焦網格線等的顯示狀態
新選項將保持上次選擇狀態,即使遠離圖表區域,也能保持上次選擇狀態。
從技術上講,該選項將開啟或關閉「onout」事件的預設交互作用。
interaction: { onout: false }
render.lazy 選項將在容器元素變得可見時進行渲染。對於稍後需要初始化圖表元素的情況很有用。
當容器元素不可見時,將自動設定該確定。並且沒有辦法強制在這種情況下渲染,因為在隱藏狀態上初始化可能會導致渲染錯誤,並且通常沒有任何意義。
但是,也有特殊情況可以這樣做。為了滿足這些必要性,當明確設定 render.lazy=false 時,無論容器元素可見性狀態如何,都會初始化。
axis: { // 1: default, which will memoize evaluated axis text size evalTextSize: true, // 2: will evaluate the dimension of axis text size every time. evalTextSize: false, // 3: customize dimension evaluator evalTextSize: function(text) { ... return {width, height): } }
為圖例項目的事件回呼函數加入了小資訊增強。
事件回呼僅提供目前圖例 id 值。如果需要根據圖例可見性執行一些任務,則需要您自己實作。
這並不難,但絕對是麻煩的事。為了擺脫這個問題,現在將傳遞圖例項目的「可見」狀態。
基於這個參數,可以根據可見性狀態執行任務。
interaction: { onout: false }
這就是我們這個版本的全部內容,也可能是今年最後的功能實作。
始終感謝,敬請關注即將推出的更新!
以上是billboard.js elease:viewBox 調整大小!的詳細內容。更多資訊請關注PHP中文網其他相關文章!