當(dāng)我縮放時(shí)間序列圖表時(shí),有沒(méi)有辦法停用 y 軸的自動(dòng)縮放?
您可以在此處觀察行為:https://codesandbox.io/s/react-chartjs-2-line-zoom-pan-9cz0eh 當(dāng)您縮放時(shí),y 軸將縮放,以便資料佔(zhàn)據(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 ... )}
然後我的插件變數(shù)儲(chǔ)存在 options
中,我像這樣返回我的圖表:
return ( <div> <Chart ref={canvas} id={id ?? null} type={type} data={data} options={options} /> </div> )
我在文件中發(fā)現(xiàn),您可以為y 軸設(shè)定最小/最大值,並且您可以使用它來(lái)獲得固定軸,但這對(duì)我來(lái)說(shuō)不適用,因?yàn)槲沂孪炔恢牢绎@示的資料是什麼,組件是用來(lái)顯示多個(gè)圖表的
您可以設(shè)定 y 軸的 min
和 max
而無(wú)需先驗(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)用。
如果要接收新資料或進(jìn)行其他類型的更新,您也可以「解凍」軸:
function unfreezeAxis(scale) { scale.options.min = null; scale.options.max = null; }
在此你的codesandbox的fork我在每次縮放和平移發(fā)生之前和之後使用了這些函數(shù)- 使用onZoomStart
、onZoomComplete
、onPanStart
和onPanComplete
用於使用者事件(捏或滾輪)以及任何程式縮放/平移呼叫之前和之後,它不會(huì)呼叫事件處理程序。
這相當(dāng)麻煩,並且應(yīng)該考慮在應(yīng)用程式的邏輯上「凍結(jié)」和可能的「解凍」。例如, 這個(gè)分支實(shí)現(xiàn)了與之前相同的效果,只是在程式碼中「凍結(jié)」y 軸一次,即在廣播到插件的 afterLayout
事件中。