Προγραμματισμός

Γνώση Υπολογιστών >> Προγραμματισμός >  >> JavaScript Προγραμματισμός

Πώς να γράφημα με jQuery

Μπορείτε να χρησιμοποιήσετε μία από τις πολλές jQuery plug- ins για να δημιουργήσει γρήγορα χάρτες και γραφήματα με τη χρήση JavaScript και jQuery . Αξιολογήσει τις διάφορες βιβλιοθήκες και να επιλέξετε την καλύτερη αντιστοιχία για τις ανάγκες σας . Γράψτε το HTML " " ετικέτα να περιλαμβάνει τις βιβλιοθήκες , και το " " ετικέτα να περιλαμβάνει τα δεδομένα και τον κώδικα για τη δημιουργία του γραφήματος . Δοκιμάστε το πρόγραμμα HTML για να βεβαιωθείτε ότι λειτουργεί σωστά . Οδηγίες
Η 1

Κατεβάστε το plug-in από το χώρο υποδοχής του . Αποσυμπιέστε το plug -in σε ένα κατάλογο που μπορεί να προσπελαστεί από το πρόγραμμα JavaScript που θα το χρησιμοποιήσει . 2

Δημιουργήστε ένα νέο αρχείο HTML 5 χρησιμοποιώντας ένα πρόγραμμα επεξεργασίας HTML ή Σημειωματάριο . Προσθέστε το " " ετικέτα , να καθορίσετε έναν τίτλο χρησιμοποιώντας το παράθυρο " " ετικέτα και το jQuery προσθέσετε και την εκτίμηση plug -in βιβλιοθήκες χρησιμοποιώντας το " <script> " tag : < br > <p> <html> <head> <title> jQuery Γραφήματα < /title> < script src = " lib /flot /jquery.flot.min.js " > < /script > < /head> εικόνων <br> 3 <p> Προσθήκη " <body> " ? tag και ένα άδειο " <div> " ετικέτα με ένα " id" , όπου θέλετε το γράφημα για να εμφανιστούν . Επιλέξτε το " <div> " tag χρησιμοποιώντας jQuery με Εισάγετε τον κώδικα JavaScript για να εμφανίσετε ένα γράφημα ή διάγραμμα " ( " # id " ) $ . " : <br> <p> <body> < Div id = " mychart " style = "width : 600px ? ύψος : 300px " . > < /div > <script> $ (document ) έτοιμο ( λειτουργία () { var datapoints = [ [ 1,27964 ] , [ 2,33435 ] , [ 3,43165 ], [ 4,50359 ], [ 5,54861 ​​], [ 6,82197 ], [ 7,99516 ], [ 8,166065 ], [ 9,129773 ] ] ? $ . οικόπεδο ( $ ( " # mychart " ) , [ { δεδομένα: datapoints , bars : { show : true } } ] ) } ) ? < /script > < /body> < /html > <br> < br > 4 <p> Αποθηκεύστε το αρχείο HTML . Ανοίξτε σε ένα πρόγραμμα περιήγησης στο Web για να βεβαιωθείτε ότι το γράφημα σωστά . <br> Η <br> εικόνων <div class="grad2"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3314932315682382" crossorigin="anonymous"></script> <!-- 221021-2 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3314932315682382" data-ad-slot="8094203668" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <div class="grad3"></div> </div> <div class="fanyedads"> <ul> <li>Τελευταίο άρθρο: <a class='LinkPrevArticle' href='http://www.221021.com/Programming/javascript-programming/90795.html' >Λειτουργίες JavaScript για να Αποδοχή Named Παράμετροι </a> <li>Επόμενο άρθρο: <a class='LinkNextArticle' href='http://www.221021.com/Programming/javascript-programming/90797.html' >Πώς να περιηγηθείτε Από jQuery Modal Παράθυρο στην ερώτηση Another Page </a> </ul> </div> </div> <div class="woqinimaderwr24"> <div class="dibud23"> <div class="biaotidas51"> <div class="biaotidas511"><h3>Συναφής σύστασή</h3></div> <div class="butudasda"></div> </div> </div> <div class="dibud24"> <div class="dibud241"> <ul class="dsa31das"> <li><a href="http://www.221021.com/Programming/javascript-programming/90904.html" target="_blank">Πώς να καλέσετε ένα iFrame Μέσα από μια μορφή </a></li> <li><a href="http://www.221021.com/Programming/javascript-programming/91013.html" target="_blank">Πώς να περάσει μια Ακέραιος σε λειτουργία το JavaScript </a></li> <li><a href="http://www.221021.com/Programming/javascript-programming/91245.html" target="_blank">Light Box Tutorial </a></li> <li><a href="http://www.221021.com/Programming/javascript-programming/90824.html" target="_blank">Πώς να κάνει ένα Google Map Overlay </a></li> <li><a href="http://www.221021.com/Programming/javascript-programming/91156.html" target="_blank">Τι είναι το Adobe ExtendScript Toolkit </a></li> </ul> </div> <div class="dibud242"> <div class="biaotidasoidasf3h4"> <h4>Τελευταία άρθρα</h4> <div class="nibushihenzaiyi"></div> </div> <ul class="thydghaodennrend"> <li><a href="http://www.221021.com/Programming/javascript-programming/91129.html" target="_blank">Πώς να υπολογίσετε το Java Script </a></li> <li><a href="http://www.221021.com/Programming/javascript-programming/91055.html" target="_blank">Πώς να αλλάξετε τον πίνακα χρώματα φόντου με Javascript </a></li> <li><a href="http://www.221021.com/Programming/javascript-programming/90977.html" target="_blank">Πώς να πάρει Int τιμές σε jQuery </a></li> <li><a href="http://www.221021.com/Programming/javascript-programming/91085.html" target="_blank">Πληροφορίες σχετικά με τον προγραμματισμό της Palm OS </a></li> </ul> </div> </div> </div> <div class="dibudaohnagdsaw"> <div class="das342sd"><p>Πνευματικά δικαιώματα © <a href="http://www.221021.com/" target="_blank" >Γνώση Υπολογιστών</a> Όλα τα δικαιώματα κατοχυρωμένα </p></div> </div> </div> </body> </html>