ก่อนหน้านี้ฉันใช้ React + Antdesign เพื่อใช้แผนภูมิเวลาที่เรียบง่าย แต่ต่อมาฉันมีข้อกำหนดที่ซับซ้อนมากขึ้นและต้องมีการแสดงผล 2,000 งานในเวลาเดียวกันซึ่งเกี่ยวข้องกับปัญหาประสิทธิภาพ การสาธิตที่ตอบสนองความต้องการดังต่อไปนี้ แต่กลไกการแสดงผลของ React ทำให้เกิดปัญหาที่สำคัญ ติดอยู่. หลังจากคิดเกี่ยวกับเรื่องนี้ฉันตัดสินใจที่จะใช้ซาวด์แทร็กดั้งเดิม JS+CSS+HTML เพื่อนำไปใช้เพราะประสิทธิภาพภายใต้ซาวด์แทร็กดั้งเดิม JS นั้นดีที่สุด มาพูดคุยเกี่ยวกับข้อกำหนดของเวอร์ชันใหม่:
งานจะแสดงในโครงสร้างต้นไม้ทางด้านซ้ายพับเก็บได้
ด้านขวาแสดงระยะเวลาที่งานใช้ในการทำงาน
ต้องใช้สายเพื่อเชื่อมโยงความสัมพันธ์ระหว่างงาน
คุณสามารถซูมด้านขวาเพื่อดูสถานะงานโดยละเอียด
เมื่อซูมกราฟิกยังคงอยู่ในสัดส่วนที่แน่นอนของทั้งสองข้างด้วยเมาส์เป็นศูนย์กลาง
เมื่อปรับขนาดกราฟหมายความว่าเวลาที่ใช้สำหรับงานและพิกัดจำเป็นต้องเปลี่ยนตามสัดส่วนของการขยายภาพ
เมื่อเมาส์เคลื่อนที่บนแผนภูมิเวลาเส้นจะปรากฏขึ้นเพื่อแจ้งเวลาและข้อมูลปัจจุบัน
ปัญหาในการดำเนินการ
การซูมเมาส์, ซูมแกน x
การซูมเมาส์สร้างการปรับขนาดของแกน x ของแผนภูมิเวลา การปรับขนาดแผนภูมิเวลาให้สามแนวคิดที่นี่:
ทำสกัดกั้นข้อมูลสกัดกั้นข้อมูลก่อนและหลังตามอัลกอริทึมที่แน่นอนจากนั้นแสดงหน้าใหม่อีกครั้ง
ใช้ scalex ของ CSS3 เพื่อปรับขนาด DOM ของแผนภูมิเวลา
การเปลี่ยนแปลงที่แท้จริงของความกว้างของแผนภูมิเวลา DOM ความยาวของงานที่ทำงานความยาวของเส้นเชื่อมต่อและเวลาที่คาดหวังสำหรับการทำงานของงานทั้งหมดจะแสดงเป็นเปอร์เซ็นต์
ข้อดีและข้อเสียของสามแนวคิด:
ข้อดี: ไม่จำเป็นต้องใช้แอตทริบิวต์ CSS ของ DOM และสะดวกกว่าที่จะแสดงใหม่ระหว่างพวกเขาอีกครั้ง ข้อเสีย: สำหรับการใช้ DOM Redraw มันใช้ประสิทธิภาพที่รุนแรงและช้ามากเมื่อแสดงผลด้วยงานจำนวนมาก
ข้อดี: เพียงแค่เปลี่ยน CSS ของ DOM โหลดอย่างรวดเร็วและดำเนินการมากขึ้น ข้อเสีย: การคำนวณเป็นปัญหา
ข้อดี: การโหลดอย่างรวดเร็วและราบรื่นมาก ข้อเสีย: จะมีข้อผิดพลาดบางอย่างเมื่อใช้การคำนวณเปอร์เซ็นต์และคุณจะเห็นพวกเขาเมื่อคุณซูมเข้าในระดับหนึ่ง (ทุกเรื่องได้รับการพิจารณาฉันใช้ประเภทที่สาม)
// ฟังก์ชั่นที่คำนวณเปอร์เซ็นต์ความกว้าง // endtime: เวลาสิ้นสุดของงาน // starttime: เวลาเริ่มต้นของงาน // maxtime: ค่าสูงสุดของงานทั้งหมด // mintime: ค่าต่ำสุดของงานทั้งหมดเริ่มเวลา // เวลา: คำสั่งซื้อจากน้อยไปมากของเวลาเริ่มต้นและเวลาสิ้นสุด // task_width: ความยาวของงาน, ความยาวของเส้นการเชื่อมต่อแนวนอน, ค่าซ้ายของสายการเชื่อมต่อแนวตั้ง const widthfun = ฟังก์ชั่น (endtime, starttime, maxtime, mintime) {const task_width = ((((((((((((((((((((((((((((((((((((((((((( หมายเลข (endtime) - หมายเลข (starttime)) / ((maxtime || time [time.length - 1]) - (mintime || เวลา [0])) * (body_width - tree_box_dom.offsetWidth)) / dom.offset ความกว้าง )* 100;การซูมเมาส์ให้เมาส์เป็นศูนย์กลางซูมเข้าทั้งสองด้าน
มาวางแผนภาพกระบวนการอนุมานก่อน:
// คำอธิบายของรูปด้านบน // dom = องค์ประกอบ DOM ของแผนภูมิเวลา // doml1, domel2 = dom.scrollleft; // domel1 หมายถึง dom.scrollleft ก่อนหน้า แสดงถึงกระแสของกระแสไฟฟ้า // scale1 หมายถึงการขยายของครั้งสุดท้าย // tree_dom.offsetWidth แสดงถึงความกว้างของต้นไม้ทางซ้าย // clientx1 แสดงระยะห่างจากด้านซ้ายของตำแหน่งเมาส์ของครั้งสุดท้าย = e.clientx - tree_dom.offsetWidth // clientx2 หมายถึงระยะทางจากตำแหน่งเมาส์ปัจจุบันไปยังแผนภูมิเวลา // การปรับสเกลด้วยเมาส์เป็นศูนย์กลางสูตรคือ: doml2 = domel1 (scale/scale1) + clientx1 (สเกล/มาตราส่วน/ Scale1) - e.clientx + tree_dom.offsetWidth // สูตรคำอธิบาย: // 1. scale/scale1 หมายถึงอัตราส่วนการปรับสเกลของเวลานี้ยกเว้นอัตราส่วนการปรับสเกลของหนึ่งก่อนหน้านี้ระบุอัตราส่วนการปรับสเกลปัจจุบัน // ความกว้างของความกว้างของ ระดับเสียงซ้ายจะเพิ่มขึ้นในระหว่างการปรับสเกลที่สองดังนั้นความกว้างทางด้านซ้ายจะต้องคูณด้วยสเกลสเกล // ความกว้างทางด้านซ้ายของระยะทางตำแหน่งเมาส์จากแผนภูมิเวลาจะถูกปรับขนาดเมื่อซูมดังนั้นคุณ ควรคูณด้วยสเกลสเกล // ระยะทางที่แท้จริงที่ด้านซ้ายของระยะทางตำแหน่งเมาส์จากแผนภูมิเวลาที่ปลายเท่ากับการปรับความยาวของความยาวของการเลื่อนด้านซ้าย // รหัสหน้า time_box_parent.scrollleft = (time_box_parent scrollleft + e.clientx - tree_box_dom.offsetWidth) * (scale_x / scale_x1) - e.clien tx + tree_box_dom.offsetWidth;
ใช้การเชื่อมต่อเพื่อแสดงความสัมพันธ์ระหว่างงาน
วางแผน:
เมื่อใช้แล้ว CSS3 + JS + HTML5 จะถูกวาดด้วยองค์ประกอบหลอก
ห่อรูปภาพมุมขวาด้วย DOM และตั้งตำแหน่งและความสูง
วาดด้วยป้ายกำกับ
ข้อดีและข้อเสีย:
ข้อดี: ไม่มีการเพิ่มแท็กพิเศษซึ่งเป็นประโยชน์สำหรับการแสดงผล ข้อเสีย: งานหลักสร้างงานเด็กหลายงานและเป็นการยากที่จะเพิ่มคลาสหลอกและตั้งค่าความสูงและความกว้างของคลาสหลอก
ข้อดี: สะดวกเพียงแค่คำนวณความสูงของงานเด็กจากงานหลัก ข้อเสีย: เมื่อมีงานมากเกินไปจะมีรูปภาพมากมายซึ่งจะส่งผลกระทบอย่างมากต่อประสิทธิภาพการทำงาน
ข้อดี: ความสูงและตำแหน่งของแต่ละองค์ประกอบได้รับการควบคุมเป็นรายบุคคลด้วยการควบคุมความสามารถในการควบคุมและสีตอบกลับสูง ข้อเสีย: เพิ่มองค์ประกอบเพิ่มเติมซึ่งมีผลกระทบต่อการเรนเดอร์ (ฉันใช้ประเภทที่สามซึ่งเป็นวิธีที่โง่เขลาชายร่างใหญ่ที่มีวิธีการที่ดีกว่าสามารถให้คำแนะนำขอบคุณ)
แนวคิดการใช้งาน:
ใช้ตัวแปรเพื่อบันทึกความลึกของลำดับชั้นของแต่ละงาน ใช้ตัวแปรสะสมเพื่อให้ได้ความสูงของเส้นแนวตั้งและค่าสูงสุดของเส้นแนวนอนในสัดส่วนที่แน่นอน (ใช้ฟังก์ชันเปอร์เซ็นต์ความกว้างด้านบน)
หน่วยเวลา: วัน, ชั่วโมง, นาที, วินาที
นี่เป็นแนวคิดการนำไปใช้ค่อนข้างง่าย:
เนื่องจากสเกลเวลา 4 ของการสาธิตนี้เป็นสเกลให้พิจารณาว่าความแตกต่างระหว่างการประทับเวลาขั้นต่ำและการประทับเวลาสูงสุดนั้นแบ่งออกเป็น 4 ไม่ว่าจะมีวันเดียว (60 * 60 * 24 แปลงเป็นวินาที) สั่งซื้อจากขนาดใหญ่ถึงเล็กรับหน่วยเวลา