React-chartjs-2: Pastikan penskalaan paksi-y statik semasa mengezum
P粉621033928
P粉621033928 2024-01-28 23:46:48
0
1
484

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

P粉621033928
P粉621033928

membalas semua(1)
P粉368878176

Anda boleh menetapkan minmax 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 onZoomStartonZoomCompleteonPanStartonPanComplete 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.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan