首頁 > web前端 > js教程 > 主體

billboard.js elease:viewBox 調整大小!

DDD
發布: 2024-10-31 03:22:01
原創
734 人瀏覽過

新的 v3.14 版本今天發布了!此版本包含 5 個新功能、8 個錯誤修復和一系列改進。

詳細的發布信息,請查看發行說明:

  • https://github.com/naver/billboard.js/releases/tag/3.14.0

什麼是新的?

調整視圖框大小

新增了新的調整大小選項。預設調整大小將根據容器尺寸的變化進行調整。

新的 resize.auto='viewBox' 選項將使圖表調整大小並保持縱橫比,並且無需任何計算成本。

billboard.js elease: viewBox resizing!

基本上,它利用了「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

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

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

billboard.js elease: viewBox resizing!

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

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板