React-chartjs-2: ズーム時に y 軸のスケーリングを静的に保つ
P粉621033928
P粉621033928 2024-01-28 23:46:48
0
1
443

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

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

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

リーリー

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

リーリー

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

P粉621033928
P粉621033928

全員に返信(1)
P粉368878176

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

これは、

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

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

リーリー

ここ

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

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

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

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!