React-chartjs-2：縮放時保持 y 軸縮放靜態

Question

當我縮放時間序列圖表時，有沒有辦法停用 y 軸的自動縮放？

您可以在此處觀察行為：https://codesandbox.io/s/react-chartjs-2-line-zoom-pan-9cz0eh 當您縮放時，y 軸將縮放，以便資料佔據所有 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 ...
          )}

然後我的插件變數儲存在 options 中，我像這樣返回我的圖表：

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

我在文件中發現，您可以為y 軸設定最小/最大值，並且您可以使用它來獲得固定軸，但這對我來說不適用，因為我事先不知道我顯示的資料是什麼，組件是用來顯示多個圖表的

Answer 1

您可以設定 y 軸的 min 和 max 而無需先驗知道實際值：

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

這會將使用者最小值和最大值設定為當前值，並且應該在圖表渲染後（或至少計算其佈局）後調用。

如果要接收新資料或進行其他類型的更新，您也可以「解凍」軸：

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

在此你的codesandbox的fork我在每次縮放和平移發生之前和之後使用了這些函數- 使用onZoomStart、onZoomComplete、onPanStart 和onPanComplete 用於使用者事件（捏或滾輪）以及任何程式縮放/平移呼叫之前和之後，它不會呼叫事件處理程序。

這相當麻煩，並且應該考慮在應用程式的邏輯上「凍結」和可能的「解凍」。例如， 這個分支實現了與之前相同的效果，只是在程式碼中「凍結」y 軸一次，即在廣播到插件的 afterLayout 事件中。