Plotly.io.to_html

Επομένως, δεν αποτελεί έκπληξη το γεγονός ότι μπορεί να χρειαστεί να μετατρέψετε μια συγκεκριμένη εικόνα Plotly σε μια συμβολοσειρά HTML.

Σε αυτό το σεμινάριο, θα μάθουμε πώς να χρησιμοποιούμε τη λειτουργική μονάδα Plotly io για να μετατρέψουμε μια εικόνα σε αναπαράσταση συμβολοσειράς HTML.

Ας βουτήξουμε.

Συνάρτηση Plotly.io.to_html().

Η συνάρτηση to_html() από τη μονάδα io του Plotly σάς επιτρέπει να μεταβιβάσετε ένα συγκεκριμένο σχήμα ως παράμετρο και να το μετατρέψετε σε μια συμβολοσειρά HTML.

Η σύνταξη της συνάρτησης εκφράζεται όπως φαίνεται παρακάτω:

Ας εξερευνήσουμε τις παραμέτρους της συνάρτησης, παρακάτω:

1. Fig – αναφέρεται στο αντικείμενο του σχήματος ή στην αναπαράσταση του σχήματος στο λεξικό.
2. Config – καθορίζει τις επιλογές διαμόρφωσης plotly.js. Περάστε τις επιλογές διαμόρφωσης ως λεξικό.
3. Auto_play – καθορίζει εάν η ακολουθία κινούμενων εικόνων θα αναπαράγεται αυτόματα κατά τη φόρτωση της σελίδας. Αυτή η παράμετρος είναι χρήσιμη εάν έχετε μια εικόνα που περιέχει κινούμενα καρέ.
4. Include_plotlyjs – αυτή η παράμετρος καθορίζει τον τρόπο με τον οποίο περιλαμβάνεται η βιβλιοθήκη plotly.js στο HTML. Οι αποδεκτές τιμές σε αυτήν την παράμετρο περιλαμβάνουν:
   • True – περιλαμβάνει τη βιβλιοθήκη plotly.js ως ετικέτα σεναρίου στο έγγραφο HTML. Αυτό θα αυξήσει το μέγεθος του αρχείου, αλλά θα επιτρέψει τη χρήση του αρχείου σε περιβάλλοντα εκτός σύνδεσης.
   • «cdn» – ο ορισμός της παραμέτρου include_plotlyjs σε «cdn» θα προσθέσει μια ετικέτα σεναρίου που δείχνει σε έναν απομακρυσμένο σύνδεσμο για τη βιβλιοθήκη plotly.js. Χρησιμοποιήστε αυτήν την επιλογή όταν βρίσκεστε σε περιβάλλον δικτύου ή περιβάλλον ευαίσθητο στο μέγεθος αρχείου.
   • «κατάλογος» – περιλαμβάνει μια ετικέτα σεναρίου που οδηγεί σε ένα εξωτερικό πακέτο plotly.min.js που βρίσκεται στον ίδιο κατάλογο με το έγγραφο HTML.
   • 'require' - ο ορισμός της τιμής που απαιτείται θα φορτώσει τη βιβλιοθήκη plotly.js χρησιμοποιώντας το require.js. Βεβαιωθείτε ότι το request.js είναι εγκατεστημένο και διαθέσιμο παγκοσμίως στο σύστημα.
   • 'False' - δεν περιλαμβάνει τη βιβλιοθήκη plotly.js. Αποφύγετε αυτήν την τιμή όταν ορίζετε την παράμετρο full_html σε True, καθώς θα καταστήσει ολόκληρο το έγγραφο άχρηστο.
5. include_mathjax – καθορίζει εάν το αρχείο πρέπει να περιλαμβάνει τη βιβλιοθήκη mathjax.js. Οι αποδεκτές τιμές είναι παρόμοιες με το include_plotlyjs εκτός από την τιμή 'require'.
6. Post_script – σας επιτρέπει να συμπεριλάβετε αποσπάσματα JavaScript που εκτελούνται μετά τη δημιουργία της πλοκής.
7. Full_html – εάν αληθεύει, η συνάρτηση θα επιστρέψει μια συμβολοσειρά που περιέχει ολόκληρο το έγγραφο HTML, ξεκινώντας με τις ετικέτες . Εάν είναι false, η συνάρτηση θα επιστρέψει μια συμβολοσειρά HTML που ξεκινά με το στοιχείο
   .
8. Animation_opts – σας επιτρέπει να καθορίσετε προσαρμοσμένες ιδιότητες κινούμενων εικόνων ως λεξικό. Αυτές οι τιμές μεταβιβάζονται στη συνέχεια στη συνάρτηση plotly.animate στο plotly.js.
9. Default_width – καθορίζει το προεπιλεγμένο πλάτος του σχήματος που προκύπτει σε pixel.
10. Default_height – καθορίζει το προεπιλεγμένο ύψος του σχήματος σε pixel.
11. Validate – καθορίζει εάν το σχήμα πρέπει να επικυρωθεί πριν μετατραπεί σε συμβολοσειρά HTML.
12. Div_id – καθορίζει μια τιμή του χαρακτηριστικού id της ετικέτας div όπου βρίσκεται η γραφική παράσταση.

Στη συνέχεια, η συνάρτηση επιστρέφει μια συμβολοσειρά αναπαράσταση του σχήματος ως συμβολοσειρά.

Παράδειγμα χρήσης

Ο παρακάτω κώδικας δείχνει πώς να χρησιμοποιήσετε τη συνάρτηση to_html για να μετατρέψετε ένα σχήμα σε αναπαράσταση συμβολοσειράς HTML.

Στο παραπάνω παράδειγμα, ξεκινάμε εισάγοντας την ενότητα Plotly express ως px. Στη συνέχεια, δημιουργούμε ένα πλαίσιο δεδομένων χρησιμοποιώντας τα δεδομένα μετοχών από το Plotly.

Τέλος, δημιουργούμε ένα διάγραμμα με πολύπλευρη περιοχή χρησιμοποιώντας τη συνάρτηση px.area. Αυτό θα πρέπει να επιστρέψει ένα σχήμα όπως φαίνεται παρακάτω:

Μπορούμε να μετατρέψουμε το παραπάνω σχήμα σε αναπαράσταση συμβολοσειράς HTML όπως φαίνεται στον παρακάτω κώδικα:

Η εκτέλεση του παραπάνω κώδικα θα πρέπει να επιστρέψει μια τεράστια συμβολοσειρά HTML όπως φαίνεται στο παρακάτω στιγμιότυπο οθόνης:

Σημειώστε ότι το έγγραφο HTML ξεκινά από το στοιχείο