Σύντομη κριτική βιβλιοθήκες javascriptγια σχεδίαση

Highcharts

Το Highcharts είναι μια καθαρή βιβλιοθήκη γραφημάτων HTML5/JavaScript που προσφέρει διαισθητικά διαδραστικά γραφήματα για τον ιστότοπο ή την εφαρμογή Ιστού σας. HighchartsΠρος το παρόν υποστηρίζει τύπους γραμμών, spline, area, areapline, στήλης, bar, pie, scatter, γωνιακοί μετρητές, rangerange, areaplinerange, εύρος στήλης, συννεφάκι, διάγραμμα πλαισίου, ράβδοι σφάλματος, χωνί, καταρράκτη και πολικοί γραφήματα.

Διαγράμματα Google

Διαγράμματα Google - Προσφέρει μια ποικιλία γραφημάτων σχεδιασμένων για λύσεις οπτικοποίησης δεδομένων. Αυτά τα γραφήματα βασίζονται σε καθαρή τεχνολογία HTML5/SVG (αποδέχεται VML για παλαιότερες εκδόσεις του IE), επομένως δεν απαιτούνται πρόσθετα. Όλα είναι διαδραστικά και πολλά από αυτά είναι πανοραμικά και επεκτάσιμα. Η προσθήκη αυτών των γραφημάτων σε μια σελίδα μπορεί να γίνει με μερικά εύκολα βήματα.

CanvasJS

CanvasJS - εύκολη στη χρήση βιβλιοθήκη HTML5 και JavaScript Χαρτογράφηση, χτισμένο πάνω στο στοιχείο Καμβάς. Τα γραφήματα μπορούν να εμφανίζονται σε διάφορες συσκευές, συμπεριλαμβανομένου κινητές συσκευές, iPad, Android, Τηλέφωνο με Windows, Microsoft Surface, στο επιτραπέζιους υπολογιστέςκαι τα λοιπά. Αυτό σας επιτρέπει να δημιουργείτε λειτουργικά γραφικά που λειτουργούν σε όλες τις συσκευές χωρίς να διακυβεύεται η δυνατότητα συντήρησης ή η λειτουργικότητα της εφαρμογής Ιστού σας. CanvasJSέρχεται με όμορφα θέματα και φορτώνει 10 φορές πιο γρήγορα από το κανονικό φλας και τα γραφήματα SVG - με αποτέλεσμα γραφήματα που είναι ελαφριά και όμορφα.

ChartJS

Chart JS - Ελαφρύ, αντικειμενοστραφή βιβλιοθήκη γραφημάτων από την πλευρά του πελάτη.

RGraph

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

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

Υπάρχουν διάφοροι τρόποι για να προσθέσετε ένα γράφημα ή ένα γράφημα σε μια ιστοσελίδα. Το πρώτο, που πιθανότατα έχετε ήδη σκεφτεί, είναι να το σχεδιάσετε σε οποιοδήποτε επεξεργαστής γραφικών. Αλλά αυτή δεν είναι η πιο βολική και γρήγορη επιλογή. Είναι πολύ πιο εύκολο και γρήγορο να φτιάξετε ένα γράφημα σε JavaScript, όπου το μόνο που έχετε να κάνετε είναι να ορίσετε τις απαραίτητες παραμέτρους, να το δείτε και να το τοποθετήσετε στη σελίδα.

Σε αυτό το άρθρο, θα σας πούμε για 10 υπηρεσίες και εργαλεία, το οποίο θα βοηθήσει στη δημιουργία γραφημάτων και γραφημάτων σε JavaScript. Θα βρείτε άλλους τρόπους δημιουργίας στην επικεφαλίδα "".

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

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

Αυτή η υπηρεσία σάς επιτρέπει να δημιουργήσετε εξαιρετικά οπτικά χαρακτηριστικά. Εισαγάγετε την εξίσωση, για παράδειγμα 2*sin(4*x)^(x+4), πατήστε "Enter" και η συνάρτηση είναι έτοιμη. Μετά από αυτό, πρέπει απλώς να αντιγράψετε το url και να το επικολλήσετε στη σελίδα σας.

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

στόλος
Βιβλιοθήκη γραφημάτων jQuery από την Google. Δεν μπορείτε να γράψετε τίποτα περισσότερο για αυτό, όλα είναι ήδη ξεκάθαρα (: Ωστόσο, σημειώνουμε ότι η υπηρεσία προσφέρει μεγάλο ποσόόμορφα παραδείγματα με ευέλικτη και εύκολη προσαρμογή.

Σας επιτρέπει να δημιουργείτε γραφήματα και πίνακες ιστογραμμάτων δεδομένων. Για να δημιουργήσετε, πρέπει να εισαγάγετε τα απαραίτητα δεδομένα και να κάνετε κλικ στο κουμπί "Υπολογισμός". Στη συνέχεια, αντιγράψτε τον κώδικα και κατεβάστε ένα μικρό σενάριο. Εάν θέλετε, όλα τα δεδομένα μπορούν να εισαχθούν στον ίδιο τον κωδικό.

Η υπηρεσία παρέχει 6 τύπους διαγραμμάτων ( διάγραμμα πίτας, γράφημα γραμμών, δυναμικό γράφημα και 3 είδη ιστογραμμάτων). Υπάρχει μια περιγραφή των ρυθμίσεων, των παραμέτρων και λεπτομερή παραδείγματαόλων των ειδών τα διαγράμματα.

Ραφαήλ
Η Raphaël είναι μια μικρή βιβλιοθήκη JavaScript που απλοποιεί πολύ τη δουλειά της δημιουργίας γραφημάτων και γραφημάτων. Αυτό είναι το πιο ισχυρό εργαλείο από όλα που παρουσιάζονται σε αυτήν την ανασκόπηση. Θα είναι πιο εύκολο για εσάς να δείτε μόνοι σας τις δυνατότητες της βιβλιοθήκης παρά να διαβάσετε την περιγραφή για τις δυνατότητές της.

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

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

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

Η έκδοση στόλου του κορμού υποστηρίζει γραφήματα πίτας.

Δυνατότητα κλιμάκωσης του στόλου.

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

Sparklines

Περιορισμοί: Πίτα, Γραμμή, Μπάρα, Συνδυασμός

Το Sparklines είναι το αγαπημένο μου μίνι εργαλείο γραφικών. Πραγματικά εξαιρετικό για γραφήματα στυλ γραμμής εργαλείων (σκέψου τη γραμμή εργαλείων Google Analyticsτην επόμενη φορά που θα συνδεθείτε). Επειδή είναι τόσο μικροσκοπικά, μπορούν να συμπεριληφθούν σε μια συμβολοσειρά (όπως στο παραπάνω παράδειγμα). Μια άλλη ωραία ιδέα που μπορεί να χρησιμοποιηθεί σε όλα τα πρόσθετα γραφικών είναι οι δυνατότητες αυτο-ενημέρωσης. Το demo Mouse-Speed ​​σας δείχνει τη δύναμη της ζωντανής χάρτας στα καλύτερά της.

Διάγραμμα ερωτήματος 0.21

Περιορισμοί: Περιοχή, Γραμμή, Μπάρα και συνδυασμοί αυτών

Το jQuery Chart 0.21 δεν είναι το πιο όμορφο πρόσθετο γραφήματος, θα πρέπει να αναφέρεται εκεί. Είναι αρκετά βασικό στη λειτουργικότητά του όσον αφορά τα γραφήματα που μπορεί να χειριστεί, ωστόσο μπορεί να είναι ευέλικτο εάν μπορείτε να αφιερώσετε λίγο χρόνο και προσπάθεια σε αυτό.

Η προσθήκη τιμών σε ένα γράφημα είναι σχετικά απλή:

ChartAdd(( "label" : "Leads", "type" : "Line", "color" : "#008800", "values" : ["100","124","222","44"," 123","23","99"] ));

jQchart

Περιορισμοί: Μπαρ, Γραμμή

Το jQchart είναι περίεργο, έχουν ενσωματωμένα τρανζίστορ κινουμένων σχεδίων και λειτουργίες μεταφοράς και απόθεσης στο γράφημα, ωστόσο είναι λίγο άβολο - και φαινομενικά άσκοπο. Δημιουργεί ωραία γραφήματα εάν ρυθμίσετε σωστά το CSS, αλλά υπάρχει καλύτερο.

TufteGraph

Περιορισμοί: Bar και Stacked Bar

Η Tuftegraph εμπορεύεται ως "όμορφα γραφήματα ράβδων που θα δείξεις στη μητέρα σου". Πλησιάζει, ο Στόλος είναι πιο όμορφος, αλλά ο Τούφτε γίνεται πολύ ελαφρύς. Αν και εκεί τελειώνουν οι περιορισμοί - υπάρχουν πολλές επιλογές για να διαλέξετε, ώστε να λάβετε αυτό που καθορίσατε. Δείτε την κάρτα γρήγορης νίκης.

Τα γραφήματα είναι ένα εξαιρετικό οπτικό βοήθημα κατά την παρουσίαση δεδομένων. Χωρίς αυτά, είναι αδύνατο να δημιουργηθεί ένας πίνακας διαχείρισης υψηλής ποιότητας. Δεν είναι εύκολο να εγκατασταθούν. Ωστόσο, υπάρχει μια νέα βιβλιοθήκη που διευκολύνει αυτήν την εργασία - xCharts . Σήμερα θα χρησιμοποιήσουμε αυτό το πρόγραμμα μαζί με την παλέτα του Twitter Bootstrap Date Range για να δημιουργήσουμε ένα όμορφο γράφημα AJAX για την web εφαρμογή σας που αντλεί δεδομένα από πίνακες MySQL.

HTML

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

index.php

Χρησιμοποιεί πολλούς εξωτερικούς πόρους. Στην κύρια ενότητα, έχουμε τα επικαλυπτόμενα αρχεία φύλλου στυλ για xCharts , τον ταξινομητή αριθμών, τη λήψη (ενσωματωμένη από το εξαιρετικά γρήγορο CloudFlare CDN) και το αρχείο style.css.

Πριν κλείσουμε την ετικέτα πίνακα, έχουμε τη βιβλιοθήκη JQuery, d3.js (απαιτείται από το πρόγραμμα xcharts), xcharts , μια βιβλιοθήκη με φιλική προς το χρήστη διεπαφή sugar.js (το οποίο απαιτεί μια προσθήκη στο εύρος "ημερομηνιών"), μια προσθήκη στην περιοχή "ημερομηνίες" και ένα αρχείο script.js. Στη συνέχεια, θα δείτε πώς λειτουργούν όλα μαζί.

MySQL

Όπως ανέφερα στην εισαγωγή, το σενάριο που γράφουμε θα λαμβάνει δεδομένα από έναν πίνακα MySQL και θα τα εμφανίζει σε ένα γράφημα. Μπορείτε να βρείτε τον κώδικα SQL που θα δημιουργήσει τον πίνακα στο schema.sql σε ένα συμπιεσμένο αρχείο, διαθέσιμο για λήψη χρησιμοποιώντας τα επάνω κουμπιά. Ο πίνακας θα μοιάζει με αυτό:

Έχει μόνο τρεις στήλες. Στη στήλη "ημερομηνία" εκχωρείται ένα μοναδικό ευρετήριο, που σημαίνει ότι δεν μπορούν να υπάρχουν διπλότυπες εγγραφές την ίδια ημέρα. Η στήλη "αρχεία πωλήσεων" δείχνει τον αριθμό των πωλήσεων κατά τη διάρκεια της ημέρας. Η βάση δεδομένων σας θα είναι σίγουρα διαφορετική, αλλά εφόσον λάβετε τη σωστή απάντηση στη μορφή για τη δόμηση των δεδομένων σε μορφή απλού κειμένου που χρησιμοποιείται για την ανταλλαγή πληροφοριών JSON από ένα σενάριο PHP, δεν θα υπάρχουν πλέον προβλήματα (περισσότερα για αυτό στο επόμενη ενότητα).

Σημείωση: Μην ξεχάσετε να εισαγάγετε τα στοιχεία της σύνδεσης MySQL στο setup.php. Στη συνέχεια θα πρέπει να δημιουργήσετε μια νέα βάση Δεδομένα MySQLκαι εισάγετε το schema.sql από το σύστημα PHPMyAdmin ή από το σύστημα διαχείρισης της επιλογής σας.

PHP

Στο δικό μας Σενάριο PHPθα επιλέξουμε εγγραφές από τον πίνακα που αντιστοιχούν στις διαβιβασμένες αρχικές και τελικές πληροφορίες, θα συλλέξουμε όλα τα δεδομένα σε έναν πίνακα και θα τα εμφανίσουμε σε μορφή κειμένουανταλλαγή δεδομένων (JSON):

ajax.php

Header("Content-Type: application/json"); // εγκατάσταση βιβλιοθήκης require_once("setup.php"); if (isset($_GET["start"]) AND isset($_GET["end"])) ($start = $_GET["start"]; $end = $_GET["end"]; $data = array(); // επιλέξτε αποτελέσματα $results = ORM::for_table("chart_sales") ->where_gte("date", $start) ->where_lte("date", $end) ->order_by_desc("date") ->find_array(); // δημιουργήστε έναν νέο πίνακα με δεδομένα foreach ($results ως $key => $value) ($data[$key]["label"] = $value["date"]; $ data[$ key]["value"] = $value["sales_order"]; ) echo json_encode($data); )

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

Η απάντηση JSON που προκύπτει μοιάζει με αυτό:

[( "label": "2013-01-07", "value": "4" ), ( "label": "2013-01-06", "value": "65" ), ( "label": "2013-01-05", "value": "96")]

Οι ιδιότητες της ετικέτας περιέχουν τις τιμές του αριθμού MySQL στην αντίστοιχη σειρά και οι στήλες περιέχουν τον αριθμό των πωλήσεων για εκείνη την ημέρα. Εναπόκειται στον κώδικα JavaScript να επεξεργαστεί σωστά αυτά τα δεδομένα και να τα αναδιαμορφώσει σε μορφή κατάλληλη για μοιρασιάμε το πρόσθετο xCharts.

JavaScript

Όλος ο κώδικας JS περιέχεται στο assets/js/script.js. Ο κώδικας είναι λίγο μεγάλος και για να τον ακολουθήσω πιο εύκολα θα σας τον παρουσιάσω τμηματικά.

Πρώτα θα ορίσουμε μερικές μεταβλητές και θα αρχικοποιήσουμε την προσθήκη επιλογής εύρους ημερομηνιών. Λάβετε υπόψη ότι το εύρος δεδομένων που χρησιμοποίησα είναι παρακλάδι της αρχικής προσθήκης. Επέλεξα να δουλέψω με αυτήν την έκδοση επειδή το πρωτότυπο εξαρτάται από το date.js, μια βιβλιοθήκη δεδομένων παλαιού τύπου που έρχεται σε διένεξη με τα xCharts. Αντίθετα, χρησιμοποιείται το sugar.js - μια εξαιρετική χρήσιμη βιβλιοθήκη με αξιόπιστες και ενημερωμένες πληροφορίες.

περιουσιακά στοιχεία/js/γραφή.js

$(function() ( // ορίστε προεπιλεγμένες ημερομηνίες χρησιμοποιώντας τις συναρτήσεις shugar var startDate = Date.create().addDays(-6), // πριν από 6 ημέρες endDate = Date.create(); // σήμερα var range = $ ( "#range"); // εμφάνιση ημερομηνιών σε σειρά εισαγωγής range.val(startDate.format("(MM)/(dd)/(εεεε)") + " - " + endDate.format("(MM)/ ( ηη)/(εεεε)")); // φόρτωση γραφήματος ajaxLoadChart(startDate,endDate); range.daterangepicker(( startDate: startDate, endDate: endDate, ranges: ( "Σήμερα": ["σήμερα", "σήμερα" ] , "Χθες": ["χθες", "χθες"], "Τελευταίες 7 ημέρες": , "Τελευταίες 30 ημέρες": // Μπορείςπροσθέστε περισσότερες καταχωρήσεις εδώ ) ),function(start, end)( ajaxLoadChart(start, end); ));

Όπως μπορείτε να δείτε, εφαρμόσαμε με επιτυχία τις πληροφορίες και τις μεθόδους του sugar.js για να ορίσουμε το αρχικό και τελικό σημείοεύρος. Εισήγαγα τα αποτελέσματα των τελευταίων 7 ημερών στο σενάριο και ενημέρωσα το πεδίο εισαγωγής εύρους.

Τώρα ας δημιουργήσουμε ένα γράφημα:

// υπόδειξη όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το γράφημα var tt = $("