billboard.js elease：viewBox 調整大小！

新的 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.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

離開圖表區域的「預設」行為是使目前選定的狀態散焦。這意味著工具提示、聚焦網格線等的顯示狀態

新選項將保持上次選擇狀態，即使遠離圖表區域，也能保持上次選擇狀態。

從技術上講，該選項將開啟或關閉「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中文網其他相關文章！