billboard.js elease: saiz semula kotak paparan!

Keluaran v3.14 baharu keluar hari ini! Keluaran ini disertakan dengan 5 ciri baharu, 8 pembetulan pepijat dan banyak penambahbaikan.

Untuk maklumat keluaran terperinci, sila semak nota keluaran:

• https://github.com/naver/billboard.js/releases/tag/3.14.0

Apa yang Baharu?

mengubah saiz kotak pandangan

Pilihan saiz semula baharu ditambah. Saiz semula lalai akan mengubah saiz berdasarkan perubahan dimensi bekasnya.

Pilihan resize.auto='viewBox' baharu akan menjadikan carta mengubah saiz mengekalkan nisbah bidang dan tanpa sebarang kos pengiraan.

Pada asasnya, ia menggunakan gelagat atribut "viewBox", dan apa yang sebenarnya dilakukannya ialah meregangkan port pandangan SVG.

Demo: https://naver.github.io/billboard.js/demo/#ChartOptions.resizeViewBox

Jika keperluan penggunaan sepadan, pasti disyorkan.

axis.evalTextSize

Apabila carta dimulakan untuk dipaparkan, secara dalaman akan mengira saiz teks tanda paksi untuk mengira ruang yang diperlukan untuk kawasan paksi.

Secara amnya, proses ini tidak perlu dipertimbangkan sama sekali, tetapi dalam kes apabila saiz teks tanda paksi berubah selepas permulaan ini, pengiraan akan dibuat untuk dipaparkan secara tidak betul, kerana saiz teks tandakan yang digunakan secara dalaman adalah tidak sah selepas perubahan.

Untuk menambah baik dalam kes penggunaan ini, akan menyediakan pilihan axis.evalTextSize baharu, di mana boleh memilih cara untuk mendapatkan pengiraan saiz tanda paksi.

axis: {
    // 1: default, which will memoize evaluated axis text size
    evalTextSize: true,

    // 2: will evaluate the dimension of axis text size every time.
    evalTextSize: false,

    // 3: customize dimension evaluator
    evalTextSize: function(text) {
        ...
        return {width, height):
   }
}

interaksi.onout

Tingkah laku "lalai" berada jauh dari kawasan carta menyahfokus keadaan yang dipilih pada masa ini. Ini bermakna, keadaan petua alat yang ditunjukkan, garis grid terfokus dll.

Pilihan baharu akan mengekalkan keadaan pemilihan terakhir, walaupun berada jauh dari kawasan carta, untuk mengekalkan keadaan pilihan terakhir.

Secara teknikal, pilihan akan menghidupkan atau mematikan interaksi lalai untuk acara "onout".

interaction: {
    onout: false
}

rendering malas paksa

Pilihan render.lazy akan membuat untuk membuat apabila elemen bekas menjadi kelihatan. Berguna untuk keadaan di mana elemen carta perlu dimulakan kemudian.

Penentuan akan ditetapkan secara automatik apabila elemen bekas tidak kelihatan. Dan tidak ada cara untuk memaksa untuk membuat dalam keadaan itu, kerana memulakan pada keadaan tersembunyi boleh membuat untuk membuat menjadi salah dan tidak mempunyai makna secara umum.

Tetapi, terdapat juga kes khas untuk melakukannya. Untuk memenuhi keperluan ini, apabila render.lazy=false eksplisit ditetapkan, akan dimulakan tanpa mengira keadaan keterlihatan elemen kontena.

axis: {
    // 1: default, which will memoize evaluated axis text size
    evalTextSize: true,

    // 2: will evaluate the dimension of axis text size every time.
    evalTextSize: false,

    // 3: customize dimension evaluator
    evalTextSize: function(text) {
        ...
        return {width, height):
   }
}

Keadaan keterlihatan kepada panggilan balik acara item legenda

Peningkatan bermaklumat kecil ditambahkan untuk fungsi panggil balik acara item legenda.

Panggil balik acara hanya memberikan nilai id legenda semasa sahaja. Jika perlu lakukan beberapa tugas berdasarkan keterlihatan legenda, ia perlu dilaksanakan sendiri.

Ia tidak sukar, tetapi pastinya menyusahkan. Untuk menyingkirkan ini, sekarang akan melepasi keadaan "kelihatan" item legenda.

Berdasarkan hujah ini, boleh melaksanakan tugas berdasarkan keadaan keterlihatan.

interaction: {
    onout: false
}

Penutup

Itu sahaja yang kami ada untuk keluaran ini dan mungkin pelaksanaan ciri terakhir untuk tahun ini.

Terima kasih sentiasa, dan nantikan kemas kini akan datang!

Atas ialah kandungan terperinci billboard.js elease: saiz semula kotak paparan!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!