ไลบรารีไดอะแกรม JavaScript โอเพ่นซอร์ส

เริ่มต้นใช้งาน mxGraph

วิธีที่แนะนำในการติดตั้ง mxGraph คือผ่าน npm ซึ่งมีให้ใช้งานผ่านตัวจัดการแพ็คเกจ npm หากต้องการใช้ mxGraph เป็นการพึ่งพา ให้ใช้การติดตั้ง npm

npm install mxgraph --save

สร้างกราฟผ่าน JavaScript API

ไลบรารี mxGraph แบบโอเพนซอร์สมีฟังก์ชันสำหรับการสร้างไดอะแกรมหรือกราฟโดยใช้ JavaScript นอกจากนี้ยังรองรับการแก้ไขกราฟที่ซับซ้อนด้วยการสร้างตัวแก้ไขกราฟใหม่หรือปรับแต่งกราฟเหล่านั้น ขั้นแรก คุณต้องสร้างกราฟภายในคอนเทนเนอร์ที่กำหนด จากนั้นคุณสามารถเพิ่มเซลล์ลงในแบบจำลองเพื่อสร้างกราฟได้อย่างง่ายดาย คุณสามารถเพิ่มชื่อไดอะแกรมและจดบันทึกบนผู้เข้าร่วมหลายคนได้อย่างง่ายดาย ไลบรารียังมีคุณสมบัติเพิ่มเติม เช่น เอฟเฟ็กต์ภาพ การควบคุมอินเทอร์เฟซผู้ใช้ และอื่นๆ

การรวมสองกราฟผ่าน JavaScript

mxGraph ช่วยให้โปรแกรมเมอร์คอมพิวเตอร์รวมกราฟสองกราฟภายในแอปพลิเคชัน JavaScript ของตนเองได้ ก่อนอื่น คุณต้องสร้างกราฟตัวอย่างภายในคอนเทนเนอร์ที่กำหนด โปรดทำให้เซลล์ทั้งหมดเป็นวงกลมด้วยฉลากสีขาวที่เป็นตัวหนา ตอนนี้ โปรดสร้างโมเดลกราฟที่สองโดยไม่มีคอนเทนเนอร์ เพิ่มเซลล์ไปยังโมเดลเป้าหมายในขั้นตอนเดียวโดยใช้รหัสที่กำหนดเองสำหรับจุดยอด ตอนนี้คุณสามารถรวมโมเดลจากกราฟที่สองเข้ากับโมเดลของกราฟแรกได้

การวาดเส้นตารางโดยใช้ JavaScript

ไลบรารี mxGraph ช่วยให้นักพัฒนาซอฟต์แวร์สามารถวาดเส้นตารางแบบไดนามิกภายในแอปพลิเคชัน JavaScript ของตนเองได้ คุณสามารถวาดเส้นตารางแบบไดนามิกได้อย่างง่ายดายโดยใช้ผ้าใบ HTML 5 ขั้นแรก โปรดสร้างกราฟภายในคอนเทนเนอร์ที่กำหนด และสร้างกริดแบบไดนามิกที่ต้องใช้ผ้าใบ คุณต้องแก้ไขการกรองเหตุการณ์เพื่อยอมรับแคนวาสเป็นคอนเทนเนอร์ ตอนนี้คเรียนรู้พื้นหลังหากจำเป็น และกำหนดระยะห่างของเส้นกริดเป็นพิกเซล ตอนนี้ดึงตารางจริง