React-chartjs-2: Pastikan penskalaan paksi-y statik semasa mengezum

Question

Adakah terdapat cara untuk melumpuhkan penskalaan automatik paksi-y apabila saya menskalakan carta siri masa?

Anda boleh memerhati gelagat di sini: https://codesandbox.io/s/react-chartjs-2-line-zoom-pan-9cz0eh Apabila anda mengezum, paksi-y berskala supaya data mengambil semua ruang paksi-y.

Pemalam zum saya kelihatan seperti ini:

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

Kemudian pembolehubah pemalam saya disimpan dalam options dan saya mengembalikan carta saya seperti ini:

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

Saya dapati dalam dokumentasi bahawa anda boleh menetapkan nilai min/maks ​​untuk paksi-y dan anda boleh menggunakannya untuk mendapatkan paksi tetap, tetapi ini tidak berfungsi untuk saya kerana saya tidak tahu terlebih dahulu data apa Saya sedang memaparkan, komponen Ia digunakan untuk memaparkan berbilang carta

Answer 1

Anda boleh menetapkan min 和 max paksi-y tanpa mengetahui nilai sebenar a priori:

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

Ini akan menetapkan nilai minimum dan maksimum pengguna kepada nilai semasa, dan harus dipanggil selepas carta telah dipaparkan (atau sekurang-kurangnya susun aturnya telah dikira).

Anda juga boleh "menyahbekukan" paksi jika anda ingin menerima data baharu atau membuat jenis kemas kini lain:

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

Dalam garpu kotak kod anda ini Saya menggunakan fungsi ini sebelum dan selepas setiap kejadian zum dan sorot - menggunakan onZoomStart、onZoomComplete、onPanStart 和 onPanComplete untuk acara pengguna (cubit atau roda) dan sebelum dan selepas sebarang panggilan zum/pan terprogram, ia tidak Pengendali acara akan dipanggil.

Ini agak menyusahkan dan harus dipertimbangkan untuk "membekukan" dan kemungkinan "menyahbeku" logik aplikasi. Sebagai contoh, cawangan melaksanakan kesan yang sama seperti sebelumnya, kecuali ia "membekukan" paksi-y sekali dalam kod, dalam acara afterLayout yang disiarkan ke pemalam.