[ASP.NET] Το Highcharts συνδυάζει Asp.net για την υλοποίηση δυναμικών παραδειγμάτων εμφάνισης γραφημάτων αποθεμάτων δεδομένων

Η συγκεκριμένη αγορά εφαρμογών για αυτό το παράδειγμα είναι ότι πρέπει να διαβάζω τακτικά την τιμή ενός εμπορεύματος από τη βάση δεδομένων και στη συνέχεια να την εμφανίζω στην ιστοσελίδα ως γράφημα, παρόμοιο με το διάγραμμα τάσης τιμών των μέσων διαπραγμάτευσης σε μετοχές.

Χρησιμοποιώ asp.net, σε συνδυασμό με την εφαρμογή της προσθήκης Highcharts στο jQuery, η προσθήκη μπορεί να υποστηρίξει πολλούς τύπους γραφικών, αλλά είναι στατικά και τα παραδείγματα που παρέχονται πρέπει να μεταμορφωθούν, οι ενδιαφερόμενοι φίλοι μπορούν να μεταβούν στον επίσημο ιστότοπο Highcharts για να δουν (http://www.highcharts.com/), ο οποίος παρέχει πολλές επιδείξεις, για να είμαι ειλικρινής, για να συνειδητοποιήσω τις ανάγκες μου, θα πρέπει να χρησιμοποιήσω το Highstock, Ωστόσο, αφού εξετάσω το παράδειγμα δυναμικής ενημέρωσης των Highcharts, μπορώ επίσης να συνειδητοποιήσω ότι η διεπαφή των απαιτήσεών μου είναι πιο συνοπτική, επομένως αυτό το άρθρο χρησιμοποιεί το μοντέλο δυναμικής ενημέρωσης στα Highcharts και ο τύπος γραφικών είναι spline. Ο τελικός χάρτης εφέ έχει ως εξής (η τιμή του Pinqijin ενημερώνεται κάθε 10 δευτερόλεπτα και ένας πόντος προστίθεται στο γραμμικό γράφημα κάθε 10 δευτερόλεπτα):

Επίτευξη συγκέντρωσης βημάτων:

Δημιουργήστε έναν νέο ιστότοπο με το VS και δημιουργήστε μια σελίδα asp.net DynamicUpdate.aspx, ο κώδικας σελίδας έχει ως εξής:

Highcharts Η ιδιότητα renderTo υποδεικνύει κοντέινερ εμφάνισης,

συμβάντα αντιπροσωπεύει το συμβάν που πρέπει να εγγραφεί το κοντέινερ, όπου φόρτωση σημαίνει ότι συμβαίνει μετά την ολοκλήρωση της φόρτωσης, εδώ ορίζεται ένα χρονόμετρο JS στο φορτίο, το οποίο συμβαίνει μία φορά κάθε 10 δευτερόλεπτα και ο κωδικός σε αυτό είναι να ζητήσει το πιο πρόσφατο GOLD από το αρχείο dataupdate.ashx του φακέλου ajaxhandler στον ίδιο ριζικό κατάλογο με τη σελίδα DynamicUpdate.aspx μέσω ajax στο jQuery Τα δεδομένα τιμών της ποικιλίας, εδώ είναι ο λόγος που προσθέτω randomCode + "=" + oldrandomCode στη διεύθυνση URL ajax επειδή η προσθήκη ενός τυχαίου αριθμού μπορεί να αποφύγει την προσωρινή αποθήκευση και το flag=1 είναι επειδή το αρχείο dataupdate.ashx μου θέλει να δέχεται πολλαπλά αιτήματα από διαφορετικά ajax, επομένως χρησιμοποιήστε το flag για να το διακρίνετε

Το xAxis αντιπροσωπεύει τη συλλογή χαρακτηριστικών που ορίζονται για τον άξονα x του κοντέινερ, ο τύπος αντιπροσωπεύει τον εμφανιζόμενο τύπο κειμένου, προαιρετικός, εδώ συμπληρώνω τον τύπο ώρας, εδώ σημειώστε ότι η προεπιλογή για την παρουσία είναι ώρα GMT, μπορείτε επίσης να χρησιμοποιήσετε την ώρα UTC, αλλά γενικά χρησιμοποιούμε ώρα Πεκίνου, (GMT ή UTC) + 8 ώρες = ώρα Πεκίνου, οπότε όταν χρησιμοποιούμε ajax για να πάρουμε την ώρα είναι ώρα Πεκίνου, θα πρέπει να αφαιρέσουμε 8 ώρες από την ώρα (εδώ θέλω επίσης να μοιραστώ μια εμπειρία, Πώς να μετατρέψετε την ώρα διακομιστή σε ώρα js που μπορεί να χρησιμοποιηθεί με τη μέθοδο .getTime(), δηλαδή να αφαιρέσετε τον χρόνο διακομιστή από το 1970-1-1, να μετατρέψετε τις υπόλοιπες ημέρες σε χιλιοστά του δευτερολέπτου και, στη συνέχεια, να εκχωρήσετε μια τιμή στον πρόσφατα αρχικοποιημένο χρόνο μέσω της μεθόδου setTime στο js, διαπίστωσα ότι το αποτέλεσμα που προκύπτει από το getTime() είναι λανθασμένο για την προετοιμασία ενός χρόνου js απευθείας στο js με τη μορφή νέας ημερομηνίας (έτος, μήνας, ημέρα, ώρα, λεπτό, δευτερόλεπτο, χιλιοστό του δευτερολέπτου) με getTime(), Όσο για το γιατί αφαιρείται το 1970-1-1, είναι επειδή ο ορισμός της μεθόδου getTime() είναι να λάβετε τον αριθμό των χιλιοστών του δευτερολέπτου από την τρέχουσα ώρα από το 1970-1-1), όταν ο άξονας x δεν εμφανίζεται ως χρόνος ή πρέπει να τον ορίσετε μόνοι σας, μπορεί επίσης να οριστεί από το χαρακτηριστικό κατηγοριών, το tickPixelInterval αντιπροσωπεύει την πυκνότητα του άξονα x και οι ετικέτες χρησιμοποιούνται για τη μορφοποίηση της μορφής εμφάνισης του άξονα x

Το yAxis αντιπροσωπεύει μια συλλογή χαρακτηριστικών που ορίζονται για τον άξονα y του κοντέινερ, το οποίο είναι περίπου το ίδιο με τα χαρακτηριστικά του άξονα x, αλλά στα Highcharts δεν είναι δυνατό να οριστεί η σταθερή τιμή του άξονα y μέσω κατηγοριών, ο άξονας y των Highcharts δημιουργείται αυτόματα με βάση τα δεδομένα του σημείου συντεταγμένων, τα οποία εξαρτώνται από το δευτερεύον χαρακτηριστικό δεδομένων του χαρακτηριστικού σειράς, για παράδειγμα, όταν εκχωρείτε μια τιμή σε δεδομένα Η μέγιστη τιμή είναι 300 και η ελάχιστη τιμή είναι 100. Στη συνέχεια, η εμφάνιση του άξονα y θα είναι μεταξύ 100 και 300 ή μπορείτε επίσης να ορίσετε το μέγιστο ή το ελάχιστο χαρακτηριστικό του yAxis

Η σειρά αντιπροσωπεύει τη συλλογή όλων των καμπυλών που εμφανίζονται στο κοντέινερ, εδώ δείχνω μόνο μία καμπύλη, το όνομα αντιπροσωπεύει το όνομα της καμπύλης, τα δεδομένα αντιπροσωπεύουν τη συλλογή μιας σειράς σημείων συντεταγμένων της καμπύλης, το x είναι μπροστά, το y είναι πίσω, είναι ένας πίνακας js, σε αυτήν την περίπτωση, επειδή ο άξονας x δείχνει χρόνο, επομένως η ιδιότητα x του αντικειμένου πίνακα πρέπει να οριστεί σε χρόνο, αλλά στα Highcharts δεν εκχωρείται απευθείας χρόνος στον άξονα x, Αντίθετα, ο αριθμός των χιλιοστών του δευτερολέπτου μεταξύ 1970-1-1 και ενός συγκεκριμένου χρόνου εκχωρείται στον άξονα x για να αναπαραστήσει αυτόν τον χρόνο, επομένως πρέπει να χρησιμοποιηθεί η μέθοδος getTime(), η μορφή του σημείου συντεταγμένων του άξονα y πρέπει να είναι y = μικρός αριθμός * ακέραιος αριθμός, και δεν κατάλαβα γιατί το Highcharts έπρεπε να το κάνει αυτό, επειδή τα δεδομένα τιμής της ποικιλίας σε αυτό το παράδειγμα είναι γενικά περίπου τα ίδια, επομένως έπρεπε να διαιρέσω με το 200 κατά τη λήψη των δεδομένων και στη συνέχεια να πολλαπλασιάσω με το 200 όταν εκχωρώ μια τιμή στον άξονα y.

<%= jsonstr %> στον κώδικα σελίδας είναι τα αρχικά δεδομένα που πρέπει να πάρω από τον διακομιστή για να αρχικοποιήσω το γράφημα, τη δημιουργία cs της σελίδας

Μεταξύ αυτών, ο πίνακας TabMerPrice είναι ο πίνακας πληροφοριών τιμής ποικιλίας, ο χρόνος TMPTime, η τιμή TMPPrice, το χρονικό διάστημα TMPTime είναι δέκα δευτερόλεπτα, χρησιμοποιώ μια εργασία βάσης δεδομένων για να δημιουργήσω την εγγραφή του πίνακα, η οποία συμβαίνει μία φορά κάθε δέκα δευτερόλεπτα

Το AddHours(-8) είναι η μετατροπή της ώρας σε ώρα Πεκίνου και η μορφή δεδομένων που δημιουργείται είναι η μορφή json

Ο κώδικας dataupdate.ashx μοιάζει με αυτό:

Αυτή είναι η πρόχειρη εφαρμογή της συνάθροισης βημάτων, η οποία μπορεί να πραγματοποιήσει την εμφάνιση σε πραγματικό χρόνο δεδομένων από την πλευρά του διακομιστή με ένα γράφημα παρόμοιο με τη μορφή αποθέματος

HighCharts演示.zip (48.69 KB, Αριθμός λήψεων: 1)