Sebelumnya, saya menggunakan React + Antdesign untuk mengimplementasikan grafik waktu yang sederhana, tetapi kemudian saya memiliki persyaratan yang lebih kompleks dan membutuhkan tampilan 2.000 tugas pada saat yang sama, yang melibatkan masalah kinerja. Demo yang pada dasarnya memenuhi kebutuhan berikut, tetapi mekanisme rendering React telah menyebabkan masalah kinerja besar. sangat macet. Setelah memikirkannya, saya memutuskan untuk menggunakan soundtrack asli JS+CSS+HTML untuk mengimplementasikannya, karena kinerja di bawah soundtrack asli JS adalah yang terbaik. Mari kita bicara tentang persyaratan versi baru:
Tugas ditampilkan dalam struktur pohon di sebelah kiri, dapat dilipat
Sisi kanan menunjukkan lamanya waktu yang dibutuhkan tugas untuk berjalan
Perlu menggunakan baris untuk menghubungkan hubungan antar tugas
Anda dapat memperbesar hak untuk melihat status tugas terperinci
Saat memperbesar, grafik tetap dalam proporsi tertentu ke kedua ujungnya dengan mouse sebagai pusat. Deskripsi teks di dalamnya tidak terpengaruh saat memperbesar.
Saat menskalakan grafik, itu berarti bahwa waktu yang dibutuhkan untuk tugas dan koordinat perlu berubah sesuai dengan proporsi pembesaran gambar.
Ketika mouse bergerak pada bagan waktu, garis tampaknya meminta waktu dan informasi saat ini.
Kesulitan implementasi
Zoom tikus, zoom sumbu x
Zoom mouse menghasilkan penskalaan sumbu x dari bagan waktu. Penskalaan Bagan Waktu memberikan tiga ide di sini:
Lakukan intersepsi data, mencegat data sebelum dan sesudah sesuai dengan algoritma tertentu, dan kemudian buat ulang seluruh halaman
Gunakan skala CSS3 untuk mengukur DOM dari bagan waktu
Perubahan aktual dari lebar DOM chart waktu, panjang tugas berjalan, panjang garis penghubung, dan waktu yang diharapkan yang diperlukan untuk tugas yang berjalan semuanya ditampilkan dalam persentase.
Keuntungan dan Kerugian dari Tiga Gagasan:
Keuntungan: Tidak perlu mengoperasikan atribut CSS DOM, dan lebih nyaman untuk menagihnya kembali di antara mereka. Kerugian: Untuk menggunakan Dom Redraw, ia mengkonsumsi kinerja yang parah dan sangat lambat saat render dengan sejumlah besar tugas.
Keuntungan: Cukup ubah CSS DOM, muat dengan cepat dan proses lebih banyak. Kekurangan: Komputasi itu merepotkan.
Keuntungan: Pemuatan cepat dan sangat halus. Kerugian: Akan ada kesalahan tertentu saat menggunakan perhitungan persentase, dan Anda akan melihatnya ketika Anda memperbesar sampai batas tertentu. (Semua masalah dipertimbangkan, saya menggunakan tipe ketiga)
// Fungsi yang menghitung persentase lebar // waktu akhir: waktu akhir tugas // starttime: waktu mulai tugas // maxTime: nilai maksimum semua tugas // mintime: nilai minimum dari semua tugas waktu mulai // waktu: semua urutan waktu mulai tugas dan waktu akhir tugas // Tugas_width: panjang tugas, panjang saluran koneksi horizontal, nilai kiri saluran koneksi vertikal const widthfun = fungsi (endtime, starttime, maxTime, mintime) {const task_width = ((((startTime, mintime) {const task_width = ((((maxtime Nomor (endTime) - angka (startTime)) / ((maxTime || time [time.length - 1]) - (mintime || time [0])) * (body_width - Tree_box_dom.offsetWidth)) / DOM.Offset Widths )* 100;Zoom mouse, menjaga mouse sebagai pusat, memperbesar di kedua sisi
Mari kita taruh diagram proses inferensi terlebih dahulu:
// Penjelasan gambar di atas // DOM = elemen DOM dari grafik waktu // doml1, domel2 = dom.scrollleft; // domel1 mewakili dom.scrollleft sebelumnya; // domel2 mewakili dom.scrollleft; // skala saat ini; mewakili arus skala pembesaran // scale1 mewakili pembesaran terakhir // tree_dom.offsetwidth mewakili lebar pohon di sebelah kiri // clientx1 mewakili jarak dari sisi kiri posisi mouse terakhir kali terakhir kali terakhir kali terakhir kali terakhir kali terakhir kali terakhir kali terakhir kali terakhir kali terakhir kali terakhir = E.ClientX - Tree_dom.OffsetWidth // ClientX2 mewakili jarak dari posisi mouse saat ini ke grafik waktu // penskalaan dengan mouse sebagai pusat, rumusnya adalah: doml2 = domel1 (skala/skala1) + clientx1 (skala/ skala1) - e.clientx + tree_dom.offsetwidth // Formula Penjelasan: // 1. Skala/skala1 mewakili rasio penskalaan waktu ini kecuali untuk rasio penskalaan yang sebelumnya, menunjukkan rasio penskalaan saat ini // Lebar dari Volume kiri juga akan skala selama penskalaan kedua, sehingga lebar di sebelah kiri harus dikalikan dengan skala penskalaan // lebar di sisi kiri jarak posisi mouse dari bagan waktu juga akan ditingkatkan saat memperbesar, jadi Anda juga harus berlipat ganda dengan skala penskalaan // jarak aktual di sisi kiri jarak posisi mouse dari bagan waktu di ujung sama dengan penskalaan panjang gulir kiri // kode halaman time_box_parent.scrollleft = (time_box_parent. scrollleft + e.clientx - Tree_box_dom.offsetWidth) * (skala_x / scale_x1) - E.Clien tx + Tree_box_dom.offsetWidth;
Gunakan koneksi untuk mewakili hubungan antar tugas
rencana:
Saat digunakan, CSS3 + JS + HTML5 digambar dengan elemen semu.
Bungkus gambar sudut kanan dengan DOM dan atur posisi dan tinggi badan mereka.
Menggambar dengan label
Pro dan kontra:
Keuntungan: Tidak ada tag tambahan yang ditambahkan, yang bermanfaat untuk rendering. Kerugian: Tugas induk menghasilkan banyak tugas anak, dan sulit untuk menambahkan kelas semu dan mengatur tinggi dan lebar kelas semu.
Keuntungan: Nyaman, cukup hitung ketinggian tugas anak dari tugas orang tua. Kekurangan: Ketika ada terlalu banyak tugas, akan ada banyak gambar, yang akan sangat mempengaruhi kinerja.
Keuntungan: Tinggi dan posisi setiap elemen dikontrol secara individual, dengan kemampuan terkontrol tinggi dan warna umpan balik dapat ditambahkan. Kerugian: Menambahkan lebih banyak elemen, yang berdampak pada rendering (saya menggunakan tipe ketiga, yang merupakan metode bodoh. Seorang pria besar dengan metode yang lebih baik dapat memberikan saran, terima kasih)
Ide Implementasi:
Gunakan variabel untuk merekam kedalaman hierarki dari setiap tugas. Gunakan variabel yang terakumulasi untuk mendapatkan ketinggian garis vertikal dan nilai atas garis horizontal dalam proporsi tertentu. (Gunakan fungsi persentase lebar di atas)
Unit Waktu: Hari, Jam, Menit, Kedua
Ini relatif sederhana, ide implementasi:
Karena skala waktu 4 demo ini adalah skala, tentukan apakah perbedaan antara cap waktu minimum dan cap waktu maksimum dibagi dengan 4, apakah masih ada satu hari (60 * 60 * 24, dikonversi menjadi detik), turun Pesan dari besar ke kecil dapatkan unit waktu.