mxGraph
Βιβλιοθήκη διαγραμμάτων JavaScript ανοιχτού κώδικα
Δημιουργήστε αλληλεπιδραστικές εφαρμογές γραφημάτων και γραφημάτων μέσω της βιβλιοθήκης διαγραμμάτων δωρεάν JavaScript ανοιχτού κώδικα.
Το mxGraph είναι μια βιβλιοθήκη διαγραμμάτων JavaScript ανοιχτού κώδικα που παρέχει λειτουργικότητα για την απόδοση διαγραμμάτων SVG και HTML. Δεν απαιτείται λογισμικό τρίτων για τη χρήση της βιβλιοθήκης mxGraph. Το άλλο καλό είναι ότι δεν απαιτεί πρόσθετα και μπορεί να ενσωματωθεί σχεδόν σε οποιοδήποτε πλαίσιο. Το mxGraph παρέχει λειτουργίες που προορίζονται για την εμφάνιση διαδραστικών διαγραμμάτων και γραφημάτων. Το API παρέχει όλες τις συνήθως απαιτούμενες λειτουργίες για τη σχεδίαση, την αλληλεπίδραση και τη συσχέτιση ενός περιβάλλοντος με ένα διάγραμμα.
Το API χρησιμοποιεί μια πολύ κοινή αρχιτεκτονική, απαιτεί έναν διακομιστή ιστού που έχει τη δυνατότητα να χειρίζεται σελίδες HTML και ένα πρόγραμμα περιήγησης ιστού που υποστηρίζει JavaScript. Χρησιμοποιεί κυρίως ένα αρχείο JavaScript που περιέχει όλες τις λειτουργίες της βιβλιοθήκης. Αυτό το αρχείο φορτώνεται σε μια ιστοσελίδα HTML σε μια ενότητα JavaScript και εκτελείται σε ένα κοντέινερ HTML στο πρόγραμμα περιήγησης
Ξεκινώντας με το mxGraph
Ο προτεινόμενος τρόπος εγκατάστασης του mxGraph είναι μέσω npm, είναι διαθέσιμος μέσω του διαχειριστή πακέτων npm. Για να χρησιμοποιήσετε το mxGraph ως εξάρτηση, χρησιμοποιήστε το npm install.
Εγκαταστήστε το mxGraph μέσω npm
npm install mxgraph --save
Δημιουργήστε γραφήματα μέσω JavaScript API
Η βιβλιοθήκη mxGraph ανοιχτού κώδικα παρέχει λειτουργικότητα για τη δημιουργία διαγράμματος ή γραφημάτων χρησιμοποιώντας JavaScript. Υποστηρίζει επίσης την τροποποίηση σύνθετων γραφημάτων με τη δημιουργία νέων επεξεργαστών γραφημάτων ή την προσαρμογή τους. Πρώτα, πρέπει να δημιουργήσετε ένα γράφημα μέσα στο δεδομένο κοντέινερ και, στη συνέχεια, μπορείτε εύκολα να προσθέσετε κελιά στο μοντέλο για να δημιουργήσετε το γράφημα. Μπορείτε εύκολα να προσθέσετε τίτλους διαγραμμάτων και να τοποθετήσετε σημειώσεις σε πολλούς συμμετέχοντες. Η βιβλιοθήκη παρέχει επίσης πρόσθετες δυνατότητες, όπως οπτικά εφέ, έλεγχο διεπαφής χρήστη και πολλά άλλα.
Συγχώνευση δύο γραφημάτων μέσω JavaScript
Το mxGraph επιτρέπει στους προγραμματιστές υπολογιστών να συγχωνεύουν δύο γραφήματα μέσα στις δικές τους εφαρμογές JavaScript. Πρώτα απ 'όλα, πρέπει να δημιουργήσετε ένα δείγμα γραφήματος μέσα στο δεδομένο κοντέινερ. Κάντε όλα τα κελιά στρογγυλά με μια λευκή, έντονη ετικέτα. Τώρα δημιουργήστε το δεύτερο μοντέλο γραφήματος χωρίς κοντέινερ. Προσθέστε κελιά στο μοντέλο προορισμού σε ένα μόνο βήμα χρησιμοποιώντας προσαρμοσμένα αναγνωριστικά για τις κορυφές. Τώρα μπορείτε να συγχωνεύσετε το μοντέλο από το δεύτερο γράφημα στο μοντέλο του πρώτου γραφήματος.
Πλέγμα σχεδίασης χρησιμοποιώντας JavaScript
Η βιβλιοθήκη mxGraph επιτρέπει στους προγραμματιστές λογισμικού να σχεδιάζουν ένα πλέγμα δυναμικά μέσα στις δικές τους εφαρμογές JavaScript. Μπορείτε εύκολα να σχεδιάσετε ένα πλέγμα δυναμικά χρησιμοποιώντας καμβά HTML 5. Αρχικά, δημιουργήστε το γράφημα μέσα στο δεδομένο κοντέινερ και δημιουργήστε ένα πλέγμα δυναμικά που απαιτεί έναν καμβά. Πρέπει να τροποποιήσετε το φιλτράρισμα συμβάντων για να αποδεχτείτε τον καμβά ως κοντέινερ. Τώρα cανοίγει το φόντο εάν απαιτείται και ορίζει την απόσταση των γραμμών πλέγματος σε pixel. Τώρα σχεδιάζει το πραγματικό πλέγμα.