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축을 "고정"한다는 점을 제외하면 이전과 동일한 효과를 구현합니다.