国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

React-chartjs-2:縮放時(shí)保持 y 軸縮放靜態(tài)
P粉621033928
P粉621033928 2024-01-28 23:46:48
0
1
721

當(dāng)我縮放時(shí)間序列圖表時(shí),有沒有辦法禁用 y 軸的自動(dòng)縮放?

您可以在此處觀察行為:https://codesandbox.io/s/react-chartjs-2-line-zoom-pan-9cz0eh 當(dāng)您縮放時(shí),y 軸將縮放,以便數(shù)據(jù)占據(jù)所有 y 軸空間。

我的縮放插件如下所示:

plugins = Object.assign({
        "title": {
            display: true,
            text: title,
            align: "start"
        },
        "legend": {
            position: "bottom",
        },
        "zoom": {
            zoom: {
                wheel: {
                    enabled: true,
                },
                pinch: {
                    enabled: true
                },
                mode: 'x',
            },
            pan: {
                enabled: true,
                mode: 'x',

            }
        }, ect ...
          )}

然后我的插件變量存儲(chǔ)在 options 中,我像這樣返回我的圖表:

return (
        <div>
            <Chart ref={canvas} id={id ?? null} type={type} data={data} options={options} />
        </div>
    )

我在文檔中發(fā)現(xiàn),您可以為 y 軸設(shè)置最小/最大值,并且您可以使用它來獲得固定軸,但這對我來說不適用,因?yàn)槲沂孪炔恢牢绎@示的數(shù)據(jù)是什么,組件是用來顯示多個(gè)圖表的

P粉621033928
P粉621033928

全部回復(fù)(1)
P粉368878176

您可以設(shè)置 y 軸的 minmax 而無需先驗(yàn)知道實(shí)際值:

function freezeAxis(scale) {
  scale.options.min = scale.min;
  scale.options.max = scale.max;
}

這會(huì)將用戶最小值和最大值設(shè)置為當(dāng)前值,并且應(yīng)該在圖表渲染后(或至少計(jì)算其布局)后調(diào)用。

如果要接收新數(shù)據(jù)或進(jìn)行其他類型的更新,您還可以“解凍”軸:

function unfreezeAxis(scale) {
  scale.options.min = null;
  scale.options.max = null;
}

在此你的codesandbox的fork我在每次縮放和平移發(fā)生之前和之后使用了這些函數(shù) - 使用 onZoomStartonZoomComplete、onPanStartonPanComplete 用于用戶事件(捏或滾輪)以及任何編程縮放/平移調(diào)用之前和之后,它不會(huì)調(diào)用事件處理程序。

這相當(dāng)麻煩,并且應(yīng)該考慮在應(yīng)用程序的邏輯上“凍結(jié)”和可能的“解凍”。例如, 這個(gè)分支實(shí)現(xiàn)了與之前相同的效果,只是在代碼中“凍結(jié)”y 軸一次,即在廣播到插件的 afterLayout 事件中。

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板