Δημιουργία διαδραστικών διαγραμμάτων στο Ionic 2

Sep 11, 2025

πως να

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

Σε αυτό το σεμινάριο πηγαίνουμε να εξερευνήσετε πώς να αντιμετωπίσετε ένα κοινό καθήκον όπως η απεικόνιση των δεδομένων στο Ionic 2, ένα από τα πιο πολλά υποσχόμενα υβριδικά πλαίσια εφαρμογών εκεί έξω. Θα χρησιμοποιήσω τη βιβλιοθήκη χαρτοφυλακίου JavaScript FusionCharts (FusionCharts.com), για αυτό το έργο, καθώς προσφέρει μια μεγάλη βιβλιοθήκη πάνω από 90 διαγράμματα, είναι συμβατό με κάθε συσκευή και πρόγραμμα περιήγησης, και είναι πολύ εύκολο να συνεργαστείτε.

Δημιουργία ιωνικού 2

Για να αναπτύξετε εφαρμογές με Ionic 2, χρειάζεστε το Node.js έκδοση 4+ και NPM που εκτελούνται στο λειτουργικό σας σύστημα. Μπορείτε να κατεβάσετε το πακέτο Node.js από nodejs.org/en/download και η NPM θα εγκατασταθεί μαζί με αυτό. Εάν έχετε ήδη μια διαφορετική έκδοση του Node.js που τρέχει και θέλετε να εκτελέσετε την έκδοση 4+, μπορείτε να το κάνετε αυτό μέσω Κόμβος έκδοσης διαχειριστή .

Στη συνέχεια, πρέπει να εγκαταστήσετε το Ionic 2 Beta χρησιμοποιώντας το NPM. Για να το κάνετε αυτό, τρέξτε npm install -g ionic @ beta Στο τερματικό σας από έναν λογαριασμό χρήστη με τα προνόμια ρίζας (εγκαθιστούμε την ενότητα παγκοσμίως). Για να προσομοιώσετε την app ionic, δημιουργούμε πολλαπλές πλατφόρμες, χρειαζόμαστε μια ακόμη μονάδα κόμβου: Κόρδοβα . Μπορείτε να εγκαταστήσετε αυτό το παγκοσμίως χρησιμοποιώντας npm install -g cordova .

Είμαστε τώρα έτοιμοι να δημιουργήσουμε την πρώτη μας ουσία. Ωστόσο, με αυτή τη ρύθμιση, θα μπορέσουμε να δούμε μόνο την εφαρμογή σε ένα πρόγραμμα περιήγησης. Για να προσομοιώσετε την εφαρμογή για μια συσκευή iOS ή Android, πρέπει να οικοδομήσουμε αυτή τη συγκεκριμένη μονάδα πλατφόρμας στο Cordova. Σε αυτό το σεμινάριο θα οικοδομήσουμε τη μονάδα IOS, έτσι πρέπει να τρέξετε Ιονική πλατφόρμα Προσθήκη iOS .

Τέλος, πρέπει να εγκαταστήσετε το Xcode. Θα βρείτε οδηγίες για αυτό εδώ .

Δημιουργία μιας εφαρμογής Ionic 2

Σε αυτό το σεμινάριο, πρόκειται να δημιουργήσουμε ένα Ionic 2 App που ονομάζεται 'Charts'. Θα δημιουργήσουμε φάκελο "Charts" στον τρέχοντα κατάλογο εργασίας σας και bootstrap την εφαρμογή με μια εφαρμογή δείγματος. Η εφαρμογή δείγματος θα περιέχει μια βασική σελίδα, όπως περιγράφεται εδώ.

Για να δημιουργήσετε αυτήν την εφαρμογή, εκτελέστε Ιονικά Χάρτες εκκίνησης --V2 στον τρέχοντα κατάλογο εργασίας ( διαγράμματα είναι το όνομα της εφαρμογής και --V2 Λέει στο Ionic, θέλουμε να δημιουργήσουμε μια εφαρμογή Ionic 2). Κατά την εκτέλεση αυτής της εντολής, α διαγράμματα Ο φάκελος θα δημιουργηθεί στον τρέχοντα κατάλογο εργασίας. Για να ελέγξετε την εφαρμογή στο πρόγραμμα περιήγησης, μεταβείτε στο διαγράμματα φάκελο και τρέξιμο Ιονική εξυπηρέτηση . Αυτό θα ξεκινήσει την εφαρμογή στο προεπιλεγμένο πρόγραμμα περιήγησης.

Προσθέτοντας μια νέα σελίδα

Τώρα ας προσθέσουμε μια σελίδα / συστατικό στο διαγράμματα Εφαρμογή που θα δημιουργήσει διαγράμματα JavaScript. Πρώτον, θα προσθέσουμε απλώς μια απλή σελίδα HTML με το "Hello World" σε αυτό.

Στο Ionic 2, οι σελίδες μπορούν να προστεθούν στη Ionic App χρησιμοποιώντας το @Σελίδα Διακοσμητής (ιοντική μονάδα με βάση γωνιακά 2 εξαρτήματα), η οποία έχει πρόσβαση στην πλήρη ιοντική λειτουργικότητα. Μια μικρή-ελάχιστη σελίδα απαιτεί ένα αρχείο HTML προτύπου (το οποίο περιέχει το σήμα) και ένα αρχείο JavaScript (που περιέχει τη λογική που απαιτείται). Μπορείτε να βρείτε περισσότερες λεπτομέρειες σχετικά με τις ιωνικές σελίδες εδώ .

Για να δημιουργήσετε τη σελίδα που θα προσθέσουμε donut-chart.js και donut-chart.html αρχεία στο Χάρτες / Εφαρμογές / Σελίδες Ντόνατ-Διάγραμμα Ευρετήριο. Στο αρχείο HTML, μπορούμε να προσθέσουμε τον κωδικό για την πλοήγηση εφαρμογών και μια απλή «Hello World»:

 & LT; ION-NAVBAR * NAVBAR & GT;
& lt; button menutoggle & gt;
  & lt; όνομα εικονίδιο ιόντων = "μενού" & gt; / ion-ic-icon & gt;
& lt; / κουμπί & gt;
& lt; ion-title & gt; hello ionic & lt; / ion-title & gt;
& lt; / ion-navbar & gt;

& lt; ιόν-περιεχόμενο & gt;
  & lt; h1 & gt; hello world & lt; / div & gt;
& lt; / ιόν-περιεχόμενο & gt;

Στο αρχείο Javascript, αναφέρουμε το αρχείο HTML που δημιουργήθηκε ως το πρότυπο για αυτό το στοιχείο. Δεδομένου ότι δεν κάνουμε τίποτα φανταχτερό ακόμα, μπορούμε απλά να προσθέσουμε έναν κενό κατασκευαστή Χαρτογράφηση .

 Εισαγωγή {σελίδα} από την «ιοντική γωνία».

@Σελίδα({
  TEMLANDURL: 'Build / Pages / Pie-chart / pie-chart.html'
})

Εξαγωγή χαρτοφυλακίου κλάσης
  κατασκευαστής () {
  }
}

Έχουμε μόλις δημιουργήσει ένα αυτόνομο συστατικό. Τώρα πρέπει να το συνδέσουμε στην κύρια εφαρμογή. Για να γίνει αυτό, πρέπει να αναφέραμε το στοιχείο που δημιουργήσαμε στο app.js αρχείο στον φάκελο εφαρμογών και χρησιμοποιήστε το στοιχείο στο σελίδες ιδιοκτησία του κατασκευαστή εξαρτημάτων εφαρμογών.

 Εισαγωγή {chartspage} από './pages/donut-chart/donut-chart'

Κατασκευαστής (εφαρμογή, πλατφόρμα, μενού) {
    // Προεπιλεγμένος κατασκευαστής εφαρμογών
    this.app = app;
    αυτό.platform = πλατφόρμα;
    αυτό το μενού.
    this.initializeapp ();
    // ορίστε τις σελίδες της εφαρμογής μας - προσθέτουμε εδώ το γράφημα ντόνατς
    αυτό.Π.Γ.Ε. = [
      {Τίτλος: «Καλώς ήλθατε», συνιστώσα: HELLOIONICPAGE},
      {Τίτλος: 'Donut Διάγραμμα', Συστατικό: Chartspage}
    ]

    // κάνετε heltoionicpage η ρίζα (ή πρώτη) σελίδα - προεπιλεγμένο βήμα
    Αυτό.ROOTPAGE = HELLOIONICPAGE;
}

Μετά την πραγματοποίηση αυτών των αλλαγών, η ουσία Ionian στο πρόγραμμα περιήγησης θα πρέπει να φορτώνεται αυτόματα (ή να χρησιμοποιήσει ξανά το Ionial από το τερματικό). Τώρα, ένας νέος σύνδεσμος πρέπει να είναι ορατός στο πλευρικό μενού της εφαρμογής και με κλικ που θα πρέπει να δείτε "Hello World" γραμμένο στην οθόνη.

Δημιουργώντας ένα διάγραμμα JavaScript

Τώρα ήρθε η ώρα να τροποποιήσετε τη σελίδα "Hello World" για να δημιουργήσετε ένα διάγραμμα ντόνατς. Για να μπορέσετε να χρησιμοποιήσετε τη βιβλιοθήκη FusionCharts, πρέπει πρώτα να συμπεριλάβουμε το fusioncharts.js και fusioncharts.charts.js αρχεία στο www / index.html αρχείο.

Γρήγορη συμβουλή: Εάν και τα δύο αρχεία είναι στον ίδιο φάκελο, στη συνέχεια προσθέτοντας fusioncharts.js θα είναι αρκετό, καθώς αυτό θα περιλαμβάνει αυτόματα fusioncharts.charts.js .

 & lt; τύπος δέσμης ενεργειών = "text / javascript" src = "διαδρομή / προς / fusionCharts.js" & gt; / script & gt;

Τώρα θα τροποποιήσουμε το HTML από το προηγούμενο βήμα για να δημιουργήσετε ένα δοχείο πίνακα:

 & lt; div id = "chart-container" & gt; / div & gt;

Στον κατασκευαστή στο donut-chart.js , που δημιουργήσαμε παραπάνω, πρέπει να προσθέσουμε τον ακόλουθο κώδικα για να δημιουργήσουμε το διάγραμμα μέσα στο δοχείο πίνακα:

 FusionCharts.Ready (λειτουργία () {
  var revenuechart = νέα fusioncharts ({
    Τύπος: 'DoughTUNT2D',
    renderat: 'chart-container',
    Πλάτος: '100%',
    Ύψος: '450',
    Dataformat: 'JSON',
    πηγή δεδομένων: {
      "Διάγραμμα": {
        "λεζάντα": "διάσπαση των εσόδων από τις κατηγορίες προϊόντων",
        "Υποκατάσταση": "Πέρυσι",
        "Numberprefix": "$",
        "Palettecolors": "# 0075C2, # 1AAF5D, # F2C500, # F45B00, # 8E0000",
        // Περισσότερες ιδιότητες πίνακα
      },
      "Δεδομένα": [{{
          "Ετικέτα": "Τρόφιμα",
          "Αξία": "28504"
        } // περισσότερα δεδομένα
      ]
    }
  }).καθιστώ();
}) ·

Σε αυτόν τον κώδικα δημιουργούμε ένα νέο διάγραμμα μέσω του κατασκευαστή FusionCharts. Οι ιδιότητες που χρησιμοποιούνται σύντομα εξηγούνται παρακάτω:

τύπος Ορίζει τον τύπο του γραφήματος

renderat είναι το αναγνωριστικό του δοχείου όπου θέλουμε να καταστήσουμε το διάγραμμα

πλάτος και ύψος χρησιμοποιούνται για να ρυθμίσετε τις διαστάσεις του γραφήματος

dataformat είναι η μορφή στην οποία πρόκειται να τροφοδοτήσουμε τα δεδομένα του χάρτη (μπορείτε να χρησιμοποιήσετε το JSON καθώς και XML)

πηγή δεδομένων Περιέχει καλλυντικά γραφήματα μέσα στα fusioncharts διάγραμμα αντικείμενο και τα πραγματικά δεδομένα που πρέπει να σχεδιαστούν στο εσωτερικό του δεδομένα πίνακας

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

Μόλις προστεθεί αυτός ο κώδικας, εκτελέστε Ιονική εξυπηρέτηση για να επαναληφθεί η εφαρμογή. Θα πρέπει να δείτε έναν σύνδεσμο "Donut" στο πλευρικό μενού σας. Εάν ακολουθήσατε όλα τα βήματά μου σωστά, όταν κάνετε κλικ σε αυτόν τον σύνδεσμο, θα πρέπει να δείτε ένα διάγραμμα ντόνατς! Εάν όχι, παρακαλούμε ανατρέξτε στον κώδικα στο Github repo για αυτό το έργο για να δείτε πού πήγατε στραβά.

Σημείωση: Αφού το ελέγξετε στο πρόγραμμα περιήγησης, χρησιμοποιήστε ιονική μιμηθεί Ίος Για να φορτώσετε την εφαρμογή σας στον προσομοιωτή IOS.

Ανακεφαλαίωση

Our doughnut chart representing the revenue split of a hypothetical company by product categories — Το Διάγραμμα Ντόνατς αντιπροσωπεύει το διαχωρισμό των εσόδων μιας υποθετικής εταιρείας από τις κατηγορίες προϊόντων

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

Εάν χρειάζεστε βοήθεια με αυτό το θέμα ή εάν έχετε οποιεσδήποτε απορίες σχετικά με το περιεχόμενο αυτού του εκπαιδευτικού, μπορείτε να με πιάσετε στο twitter .Είμαι πάντα ευτυχής να βοηθήσω!

Αυτό το άρθρο εμφανίστηκε αρχικά στο καθαρό περιοδικό Τεύχος 283; Αγοράστε το εδώ .

Δημιουργία διαδραστικών διαγραμμάτων στο Ionic 2

Δημιουργία ιωνικού 2

Δημιουργία μιας εφαρμογής Ionic 2

Προσθέτοντας μια νέα σελίδα

Δημιουργώντας ένα διάγραμμα JavaScript

Ανακεφαλαίωση

πως να - Τα πιο δημοφιλή άρθρα

8 Χαρακτηριστικά του Art-Of-Art CSS (και πώς να τα χρησιμοποιήσετε)

Εργασία Mask Mask Magic με Houdini

Κάντε την εργασία σας εκτός σύνδεσης με τους εργαζόμενους στις υπηρεσίες

Εξαγωγή μετά από εφέ κινούμενα σχέδια σε HTML5

Δέντρα με ακτίνες V

Σχεδιάστε ένα Bad-Ass Geisha

Σχεδιασμός SVG γραφικά στο πρόγραμμα περιήγησής σας

Σχεδιάστε ένα μολύβι πορτρέτο ενός σκύλου

Κατηγορίες