React-chartjs-2: ズーム時に y 軸のスケーリングを静的に保つ

Question

時系列グラフをスケールするときに Y 軸の自動スケールを無効にする方法はありますか?

ここで動作を観察できます: https://codesandbox.io/s/react-chartjs-2-line-zoom-pan-9cz0eh ズームすると、データがすべての Y 軸スペースを占めるように Y 軸が拡大縮小されます。

私のズームプラグインは次のようになります:

リーリー

次に、プラグイン変数が options に保存され、次のようなグラフが返されます:

リーリー

ドキュメントで、y 軸の最小値/最大値を設定でき、それを使用して固定軸を取得できることがわかりましたが、事前にわからないため機能しません表示しているデータ、コンポーネントは複数のグラフを表示するために使用されます

Answer 1

実際の値を事前に知らなくても、y 軸の min と max を設定できます。 リーリー

これは、

ユーザー の最小値と最大値を 現在の 値に設定し、グラフがレンダリングされた後 (または少なくともそのレイアウトが計算された後) に呼び出す必要があります。 ）。

新しいデータを受信したり、他の種類の更新を行いたい場合は、軸を「凍結解除」することもできます。

リーリー

ここ

コードサンドボックスのフォーク 各ズームとパンの前後にこれらの関数を使用しました - onZoomStart、onZoomComplete、onPanStart## を使用しました。 # と onPanComplete はユーザー イベント (ピンチまたはホイール) に使用され、プログラムによるズーム/パン呼び出しの前後では、イベント ハンドラーは呼び出されません。 これは非常に面倒なので、アプリケーションのロジックを「凍結」し、場合によっては「凍結解除」することを検討する必要があります。たとえば、

このブランチは前と同じ効果を実現しますが、コード内でプラグインにブロードキャストされる

afterLayout イベントで y 軸を 1 回「フリーズ」します。