React-chartjs-2: Skalierung der Y-Achse beim Zoomen statisch halten

Question

Gibt es eine Möglichkeit, die automatische Skalierung der Y-Achse zu deaktivieren, wenn ich ein Zeitreihendiagramm skaliere?

Sie können das Verhalten hier beobachten: https://codesandbox.io/s/react-chartjs-2-line-zoom-pan-9cz0eh Beim Zoomen wird die Y-Achse so skaliert, dass die Daten den gesamten Platz auf der Y-Achse einnehmen.

Mein Zoom-Plugin sieht so aus:

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

Dann werden meine Plugin-Variablen in options gespeichert und ich gebe mein Diagramm wie folgt zurück:

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

Ich habe in der Dokumentation herausgefunden, dass man Min/Max-Werte für die Y-Achse festlegen und damit eine feste Achse erhalten kann, aber das funktioniert bei mir nicht, weil ich nicht im Voraus weiß, welche Daten Ich zeige eine Komponente an. Sie wird zum Anzeigen mehrerer Diagramme verwendet

Answer 1

您可以设置 y 轴的 min 和 max 而无需先验知道实际值：

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

这会将用户最小值和最大值设置为当前值，并且应该在图表渲染后（或至少计算其布局）后调用。

如果要接收新数据或进行其他类型的更新，您还可以“解冻”轴：

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

在此你的codesandbox的fork我在每次缩放和平移发生之前和之后使用了这些函数 - 使用 onZoomStart、onZoomComplete、onPanStart 和 onPanComplete 用于用户事件（捏或滚轮）以及任何编程缩放/平移调用之前和之后，它不会调用事件处理程序。

这相当麻烦，并且应该考虑在应用程序的逻辑上“冻结”和可能的“解冻”。例如， 这个分支实现了与之前相同的效果，只是在代码中“冻结”y 轴一次，即在广播到插件的 afterLayout 事件中。