Ένας απλός οδηγός: Πώς να επιλέξετε μια βιβλιοθήκη χαρτών που θα χρησιμοποιήσετε;

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

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

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

Ακριβώς πάρτε αυτό το post ως το σημείο εκκίνησης της εξέτασής σας. :)

Επιλογή κατάλληλου τύπου γραφικών

Βασικά για την υλοποίηση ενός διαγράμματος στον ιστό, χρησιμοποιούνται δύο τύποι γραφικών.

  • Bitmap (καμβά)
  • Vector (SVG, VML)

Ποια είναι τα κριτήρια επιλογής μεταξύ bitmap και διανυσματικών γραφικών;

Λοιπόν, υπάρχει ένα εξαιρετικό άρθρο σχετικά με αυτό από το MSDN: 'SVG vs καμβά: πώς να επιλέξετε'. Συνιστάται.

Ο βασικός προσδιορισμός της επιλογής γραφικού τύπου

Bitmap (καμβά)

Ένα παράδειγμα του πραγματικού χρονοδιαγράμματος

Πλεονεκτήματα

  • Είναι κατάλληλη για την προβολή μαζικών δεδομένων σε πραγματικό χρόνο (π.χ. τα εργαλεία για το admin δεν έχουν ισχυρές ανάγκες σχεδίασης και είναι εντάξει με το προεπιλεγμένο UI / UX που παρέχεται από τη βιβλιοθήκη).

Μειονεκτήματα

  • Η προσαρμογή στο UI / UX είναι αρκετά δύσκολη.
  • Υπάρχει περιορισμός της απόδοσης σε διάφορους τύπους κλίμακας προβολής και ζουμ, λόγω της φύσης του bitmap.

Vector (SVG)

Παράδειγμα διαφορετικών προσαρμογών UI / UX

Πλεονεκτήματα

  • Υπάρχει μεγάλη ευελιξία στην προσαρμογή UI / UX (όλα ερμηνεύονται ως κόμβος). Συνήθως είναι επαρκής για υπηρεσίες που απευθύνονται σε τελικούς χρήστες.
  • Μπορεί να διατηρήσει την ίδια ποιότητα ανάλυσης μεταξύ διαφορετικών ψηφιακών αναλύσεων, καθώς και τη μεγέθυνση.

Μειονεκτήματα

  • Ίσως δεν επαρκεί για την εμφάνιση μαζικών συνόλων δεδομένων.

Σύγκριση βιβλιοθηκών γραφημάτων

Όταν κάνετε αναζήτηση στις βιβλιοθήκες γραφημάτων, θα πάρετε μια δέσμη διαφορετικών βιβλιοθηκών γραφημάτων. (ένας από τους καταλόγους βρίσκεται στη διεύθυνση: https://bestof.js.org/tags/chart)

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

Έχετε υπόψη σας: προσπάθησα να εξομαλύνω όσο το δυνατόν περισσότερο, αλλά δεν μπορώ να πω ότι είναι πραγματικά ακριβής (ζητώντας καλή κατανόηση γι 'αυτό).

Η λίστα

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

  • billboard.js (API / Demos)
  • ChartJS (API / Demos)
  • Υψηλή βαθμολογία (API / Demos)
  • C3.js (API / Demos)
  • nvd3 (API / Demos)
  • chartist (API / Demos)
  • echarts (API / Demos)
  • plotly.js (API / Demos)
  • Britecharts (API / Demos)
  • TauCharts (API / Demos)

Συγκριτικός πίνακας

Κάντε κλικ στο σύνδεσμο για να δείτε ως πίνακα κειμένου: Πίνακας σύγκρισης
(1) Αλλάζω τα γραφήματα από το nvd3 στο billboard.js αφού η τεκμηρίωση του API είναι πολύ πιο λεπτομερής.
(3) Οι δείκτες μετριούνται την 1η Νοεμβρίου
Αναφορά:
- npmcharts: σύγκριση downlaods npm
- Συγκρίνετε τις Καλύτερες Βιβλιοθήκες Βιβλίου του Javascript του 2017

Συγκρίσεις διεπαφών

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

Ορισμένοι είναι πολύ απλοί, αλλά μερικοί είναι δύσκολο να κατανοήσουν χωρίς τη βοήθεια της τεκμηρίωσης του API.

Διάγραμμα ροής επιλογής

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

Διάγραμμα ροής επιλογής γραφήματος

billboard.js;

https://github.com/naver/billboard.js/

Το billboard.js είναι μια βιβλιοθήκη διαγραμμάτων και η πρώτη έκδοση ήταν τον Ιούνιο του 2017.

Μπορεί να οριστεί ως:

Επαναχρησιμοποιήσιμη, εύκολη διασύνδεση Βιβλιοθήκη διαγραμμάτων JavaScript βασισμένη στο D3 v4 +

και δίνοντας την υψηλή ευελιξία στην προσαρμογή.

Χαρακτηριστικά

  • Εξαιρετικά εύκολο στην εφαρμογή χωρίς καμπύλη εκμάθησης
  • Πραγματικά απλή διεπαφή
  • Υποστήριξη στο κινητό περιβάλλον (φιλικό προς το χρήστη)
  • Πολύ ευέλικτο στην προσαρμογή: Παρέχει 150+ επιλογές και είναι εύκολα σχεδιασμένο με τις ιδιότητες στυλ CSS.
  • Οργανωμένα έγγραφα API και 80+ παραδείγματα
  • Ελαφρύ μέγεθος (169KB minified)

Η τρέχουσα κατάσταση

Από την πρώτη κυκλοφορία πριν από περίπου 5 μήνες, έχει αναπτυχθεί σταδιακά ευτυχώς με τις πολλές επιφυλάξεις που δόθηκαν στο billboard.js.

npm Λήψεις

  • Ιούνιος: 370 λήψεις
  • Ιούλιος: 479 λήψεις (29,4%, αύξηση σε σχέση με τον προηγούμενο μήνα)
  • Αύγουστος: 862 λήψεις (79,9%, αύξηση σε σχέση με τον προηγούμενο μήνα)
  • Σεπτέμβριος: 1.124 λήψεις (30.3%, αύξηση έναντι του προηγούμενου μήνα)
  • Οκτώβριος: 1.706 λήψεις (51.7%, αύξηση σε σχέση με τον προηγούμενο μήνα)
npm-stat.com: μετρούμενη από 2017-06-08 έως 2017-10-31

GitHub Stars

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

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

Ιστορία αστέρια του GitHub

Τι έπεται?

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

Επίσης, περιμένουμε έντονα τη συμμετοχή και τις συνεισφορές της κοινότητας.

Μην διστάσετε να συμμετάσχετε σε μια ανοιχτή πηγή, γιατί έχει πάντα σημασία!