時系列グラフをスケールするときに Y 軸の自動スケールを無効にする方法はありますか?
ここで動作を観察できます: https://codesandbox.io/s/react-chartjs-2-line-zoom-pan-9cz0eh ズームすると、データがすべての Y 軸スペースを占めるように Y 軸が拡大縮小されます。
私のズームプラグインは次のようになります:
リーリー 次に、プラグイン変数が options
に保存され、次のようなグラフが返されます:
ドキュメントで、y 軸の最小値/最大値を設定でき、それを使用して固定軸を取得できることがわかりましたが、事前にわからないため機能しません表示しているデータ、コンポーネントは複数のグラフを表示するために使用されます
実際の値を事前に知らなくても、y 軸の
これは、min
とmax
を設定できます。 リーリーユーザー の最小値と最大値を 現在の 値に設定し、グラフがレンダリングされた後 (または少なくともそのレイアウトが計算された後) に呼び出す必要があります。 )。
新しいデータを受信したり、他の種類の更新を行いたい場合は、軸を「凍結解除」することもできます。リーリー
ここコードサンドボックスのフォーク 各ズームとパンの前後にこれらの関数を使用しました - onZoomStart
これは非常に面倒なので、アプリケーションのロジックを「凍結」し、場合によっては「凍結解除」することを検討する必要があります。たとえば、
このブランチは前と同じ効果を実現しますが、コード内でプラグインにブロードキャストされる、
onZoomComplete、
onPanStart## を使用しました。 # とonPanComplete
はユーザー イベント (ピンチまたはホイール) に使用され、プログラムによるズーム/パン呼び出しの前後では、イベント ハンドラーは呼び出されません。afterLayout イベントで y 軸を 1 回「フリーズ」します。