Οπτικοποίηση δεδομένων με γραφήματα, γραφήματα και άλλα στοιχεία CSS

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

Στη σημερινή θέση, θέλουμε να σας πάμε για μια βόλτα για διάφορες προσεγγίσεις στην όμορφη και δημιουργικά εργαλεία οπτικοποίησης δεδομένων που βασίζονται εξ ολοκλήρου σε CSS / HTML. Ναί Απλά αντιγράψτε και επικολλήστε το κατόπιν προσαρμόστε το σύμφωνα με τις προτιμήσεις σας. Αυτά τα διαγράμματα μπορούν να είναι γραφήματα γραμμών CSS τα οποία εμφανίζουν δεδομένα σε οριζόντια / κάθετη μορφή, αναπτυσσόμενη λίστα για να οργανώσετε τα δεδομένα σας ή ακόμα και γραμμικά γράμματα και διαγράμματα πίτας!

Θέλεις περισσότερα? Κρατήστε κύλιση!

Οριζόντια Barchart

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

CSSplay

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

Ποσοστό Bargraph

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

Maxdesign

Ο Russ Weakley σας διδάσκει να δημιουργήσετε ένα γράφημα με βάση το ποσοστό και χρησιμοποιώντας εικόνες φόντου. Ο κωδικός και οι συνδεδεμένες εικόνες μπορούν να αντιγραφούν και να ληφθούν για χρήση στο έργο σας.

Vertical barchart

Δημιουργήστε γραφικά κατακόρυφων γραμμών χρησιμοποιώντας το CSS και την PHP δημιουργώντας μια απλή λίστα με ύψος σε εικονοστοιχεία της μεμονωμένης γραμμής, τον άξονα y της ομάδας γραμμών και την κλάση για το στυλ των συνόλων δεδομένων. Ο Eric Meyer σας διδάσκει να το μετατρέψετε σε γραμμικό γράφημα, γράφημα γραμμής, γραφικό γράφημα και ένα γράφημα 3D χρησιμοποιώντας τις ίδιες τεχνικές

Pure Γραμματοσειρά CSS

Γραφήματα γραφής παρέχουν πληροφορίες πολύ πιο γρήγορα από τους πίνακες με τους αριθμούς. Μάθετε να δημιουργείτε γραμμικό γράφημα με CSS χρησιμοποιώντας HTML, να αντικαταστήσετε το κείμενο με εικόνες και να χρησιμοποιήσετε CSS sprites και απόλυτη τοποθέτηση για να αποκτήσετε ένα γράφημα γραμμής.

Απλή γραφή

Ένα πολύ απλό γραμμικό γράφημα που χρησιμοποιεί μόνο DHTML και CSS και όπου μπορείτε να ορίσετε ένα διαφανές υπόβαθρο για το γράφημα. Αυτό το γράφημα φορτώνεται πιο γρήγορα και συνδυάζεται με το υπόλοιπο της σελίδας.

Mgraph

Αυτό το γράφημα Ajax χρησιμοποιείται για να αντιπροσωπεύει δεδομένα ενός έτους σύμφωνα με κάθε μήνα χρησιμοποιώντας μόνο CSS και XHTML και τρέχει σε Firefox και Opera

Πολλαπλές λίστες

Ο Paul Novitski σας διδάσκει να δημιουργήσετε μια λίστα πολλαπλών στηλών χρησιμοποιώντας το CSS σε αυτό το άρθρο. Συζητά πολλές τεχνικές για να επιτύχει μια λίστες πολλαπλών στηλών όπως επιπλέει τις λίστες χωρισμάτων, αρίθμηση τους με το χαρακτηριστικό HTML, CSS δημιουργούμενο περιεχόμενο, περιτύλιγμα της λίστας με XHTML, CSS κ.λπ. και τέλος προσθέτει μια μικρή εικόνα στυλ και φόντου για την επίτευξη της πολλαπλής στήλης λίστα τέλεια.

Bulletgraph

Ένα γράφημα σφαίρας συγκρίνει ένα μεμονωμένο μέτρο με ένα ή περισσότερα άλλα μέτρα και εμφανίζει το ποιοτικό εύρος των επιδόσεων. Είναι αρκετά ευέλικτοι για τοποθεσίες που οδηγούνται από δεδομένα. Μάθετε να δημιουργείτε ένα γράφημα με κουκκίδες χρησιμοποιώντας το CSS / HTML.

Στήλη bargraph

Ένα γράφημα γραμμών στήλης δημιουργείται χρησιμοποιώντας το CSS, όπου οι τιμές εμφανίζονται σε έγχρωμες κατακόρυφες ράβδους που φθάνουν σε διάφορα ύψη σύμφωνα με τις καθορισμένες τιμές. Αυτό το γράφημα μας δίνει γρήγορα μια σαφή ιδέα, διότι οι τιμές εκτυπώνονται απευθείας εδώ. Χρησιμοποιώντας τους επιλογείς CSS, τα sprites, το styling λιστών κ.λπ., μαθαίνετε να δημιουργείτε ένα γράφημα στήλης από το tutorial.

Γράφημα downtime

Το γράφημα διακοπών είχε αρχικά πρόβλημα παρουσιάζοντας μεγάλα χρονικά διαστήματα σε περιορισμένη περιοχή οθόνης και διατηρώντας διαφανή διάταξη γεγονότων που διευκρινίστηκε από το μηνιαίο υπόδειγμα ημερολογίου. Το onMouseOver () διατηρείται σε λειτουργία και χρησιμοποιούνται διαφορετικά χρώματα για διαφορετικούς τύπους συμβάντων διακοπής.

Δυναμικό ζωντανό γράφημα CSS

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

Οριζόντια μπάρα

Ένα γράφημα ράβδων δεν χρειάζεται πάντοτε πάντα. Μπορεί επίσης να δημιουργηθεί μια οριζόντια γραφική παράσταση. Σε αυτό το άρθρο δημιουργείται ένα γράφημα οριζόντιας ράβδου με διαφορετικές παραλλαγές χρώματος χρησιμοποιώντας ένα οριζόντιο γράφημα κατηγορίας και καθορίζοντας το ύψος του γραφήματος από τη σήμανση χρησιμοποιώντας το CSS.

Πολυγραφώ στον πολύγραφο

Ένα γραμμικό γράφημα που δεν χρησιμοποιεί πίνακες εικόνων δημιουργείται με CSS και DHTML που φορτώνει ταχύτερα και το φόντο μπορεί να αλλάξει ως διαφανές.

Σχεδιάγραμμα σχεδίου παραγωγής

Ένα γράφημα σχεδίου παραγωγής δημιουργείται χρησιμοποιώντας την κλάση γραφήματος ως δοχείο γραφήματος και hLine επίσης vLine για την διαγραφή γραμμών διαχωριστικών. Αυτό το γράφημα χρησιμοποιείται σε εφαρμογές intranet. Το πλάτος του γραφήματος υπολογίζεται σύμφωνα με τον εμφανιζόμενο αριθμό ημερών και ύψους χρησιμοποιώντας τον αριθμό των αλλαγών εργασίας.

Σάντουιτς γράφημα

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

Στοίβαγμα

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

Απλός γραμματόσημα

Μια γραφική παράσταση που δημιουργήθηκε χρησιμοποιώντας τη βιβλιοθήκη γραφικών CSS και PHP sans και χωρίς πολλούς υπολογισμούς που χρησιμοποιήθηκαν για τα περιθώρια. Padding καθιστώντας αρκετά εύκολο να καταλάβει την τεχνική που χρησιμοποιείται μόνο