React-chartjs-2 : Gardez la mise à l'échelle de l'axe Y statique lors du zoom

Question

Existe-t-il un moyen de désactiver la mise à l'échelle automatique de l'axe Y lorsque je mets à l'échelle un graphique de série chronologique ?

Vous pouvez observer le comportement ici : https://codesandbox.io/s/react-chartjs-2-line-zoom-pan-9cz0eh Lorsque vous effectuez un zoom, l'axe Y est mis à l'échelle de sorte que les données occupent tout l'espace de l'axe Y.

Mon plugin zoom ressemble à ceci :

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 ...
          )}

Ensuite, mes variables de plugin sont stockées dans options et je renvoie mon graphique comme ceci :

return (
        <div>
            <Chart ref={canvas} id={id ?? null} type={type} data={data} options={options} />
        </div>
    )

J'ai trouvé dans la documentation que vous pouvez définir des valeurs min/max pour l'axe y et que vous pouvez l'utiliser pour obtenir un axe fixe, mais cela ne fonctionne pas pour moi car je ne sais pas à l'avance quelles données J'affiche, composant Il est utilisé pour afficher plusieurs graphiques

Answer 1

Vous pouvez définir le min 和 max de l'axe y sans connaître a priori la valeur réelle :

function freezeAxis(scale) {
  scale.options.min = scale.min;
  scale.options.max = scale.max;
}

Cela définira les valeurs minimale et maximale de utilisateur sur les valeurs actuelles, et devra être appelé une fois le graphique rendu (ou au moins sa mise en page calculée).

Vous pouvez également "dégeler" un axe si vous souhaitez recevoir de nouvelles données ou effectuer d'autres types de mises à jour :

function unfreezeAxis(scale) {
  scale.options.min = null;
  scale.options.max = null;
}

Dans ce fork de votre codesandbox J'ai utilisé ces fonctions avant et après chaque occurrence de zoom et de panoramique - en utilisant onZoomStart、onZoomComplete、onPanStart 和 onPanComplete pour les événements utilisateur (pincement ou molette) et avant et après tout appel programmatique de zoom/panoramique, ce n'est pas le cas. Le gestionnaire d'événements sera appelé.

C'est assez fastidieux et doit être pris en compte pour le "gel" et l'éventuel "dégel" de la logique de l'application. Par exemple, la branche implémente le même effet que précédemment, sauf qu'elle "gèle" l'axe y une fois dans le code, lors de l'événement afterLayout diffusé au plugin.