Interaktive Diagramme in Ionic 2

Sep 15, 2025

wie man

Wenn Sie in einem kleinen Team arbeiten, ist es tendenziell schwierig, einen separaten Code für Android, IOS und Windows zu schreiben und aufrechtzuerhalten. Hier kommen Hybrid-Frameworks wie Ionic ins Bild. Sie ermöglichen es uns nicht nur, einen einzelnen Code zu schreiben, der auf allen drei Plattformen verwendet werden kann, sondern bedeutet, dass wir dies mit unserem bestehenden Tech-Stack tun können.

In diesem Tutorial werden wir untersuchen, wie Sie eine gemeinsame Aufgabe wie die Datenvisualisierung in Ionic 2, eines der vielversprechendsten Hybrid-App-Frameworks da drückt. Ich nutze die FusionCharts JavaScript-Diagrammbibliothek (FusionCharts.com), für dieses Projekt, da es eine große Bibliothek mit über 90 Diagrammen bietet, mit jedem Gerät und dem Browser kompatibel ist und mit sehr einfach zu arbeiten.

Ionic 2 einrichten

Um Apps mit Ionic 2 zu entwickeln, benötigen Sie node.js Version 4+ und NPM, die auf Ihrem Betriebssystem ausgeführt werden. Sie können das Paket von node.js herunterladen nodejs.org/de/download. und NPM werden zusammen mit diesem installiert. Wenn Sie bereits eine andere Version von Node.js läuft und Version 4+ auch ausführen möchten, können Sie das durch tun Knoten-Versionsmanager. .

Als Nächstes müssen Sie ionische 2 Beta mit NPM installieren. Um dies zu tun, laufen Sie npm install -g ionic @ beta In Ihrem Terminal von einem Benutzerkonto mit Root-Berechtigungen (installieren wir das Modul global). Um die ionische App zu simulieren, erstellen wir in mehreren Plattformen, benötigen wir ein weiteres Knotenmodul: Cordova . Sie können diese weltweit mit installieren NPM installieren -g Cordova .

Wir sind jetzt bereit, unsere erste ionische App zu erstellen. Mit diesem Setup können wir jedoch nur die Anwendung in einem Browser sehen können. Um die App für ein iOS- oder Android-Gerät zu simulieren, müssen wir dieses spezielle Plattformmodul in Cordova aufbauen. In diesem Tutorial bauen wir das iOS-Modul, also müssen Sie laufen ionische Plattform fügen ios hinzu .

Schließlich müssen Sie Xcode installieren. Sie finden Anweisungen dafür Hier .

Erstellen einer ionischen 2-App

In diesem Tutorial erstellen wir eine ionische 2-App namens 'Charts'. Wir erstellen einen Ordner "Charts" in Ihrem aktuellen Arbeitsverzeichnis und bootstrap die App mit einer Probenanwendung. Die Beispiel-App enthält eine grundlegende Seite, wie hier beschrieben.

So erstellen Sie diese App, laufen Sie Ionische Startdiagramme --v2 im aktuellen Arbeitsverzeichnis ( Grafiken ist der Name der App und --v2. Erzählt Ionic, wir möchten eine ionische 2-App erstellen). Bei der Ausführung dieses Befehls a Grafiken Der Ordner wird im aktuellen Arbeitsverzeichnis erstellt. Um die App im Browser zu testen, navigieren Sie zu der Grafiken Ordner und Run ionischer servierer . Dadurch wird die App in Ihrem Standardbrowser gestartet.

Hinzufügen einer neuen Seite

Fügen Sie nun eine Seite / Komponente hinzu Grafiken Anwendung, die JavaScript-Diagramme erstellt. Erstens fügen wir einfach eine einfache HTML-Seite mit "Hallo World" hinzu.

In Ionic 2 können Seiten mit der ionischen App hinzugefügt werden @Seite Dekorateur (ein ionisches Modul, das auf Winkel-2-Komponenten basiert), der Zugriff auf die gesamte ionische Funktionalität hat. Eine bloße Mindestseite erfordert eine Template-HTML-Datei (der das MarkUp enthält) und eine JavaScript-Datei (mit der verwendeten Logik). Weitere Details zu ionischen Seiten finden Sie Hier .

Um die Seite zu erstellen, fügen wir hinzu Donut-Chart.js. und Donut-Chart.html. Dateien an das Charts / App / Pages Donut-Chart Verzeichnis. In der HTML-Datei können wir den Code für die App-Navigation und eine einfache "Hallo-Welt" hinzufügen:

 & lt; ion-navebar * Navbar & gt;
& lt; Button menutloggle & gt;
  & lt; Ion-Icon-Name = "Menü" & GT; & lt; / ion-icon & gt;
& lt; / button & gt;
& lt; ion-title & gt; hallo ionic & lt; / ion-title & gt;
& lt; / ion-navbar & gt;

& lt; ion-content & gt;
  & lt; H1 & GT; Hallo World & lt; / div & gt;
& lt; / ion-content & gt;

In der JavaScript-Datei verweisen wir auf die HTML-Datei, die als Vorlage für diese Komponente erstellt wurde. Da wir noch nichts Lustiges tun, können wir einfach einen leeren Konstruktor hinzufügen Grafikspage .

 Import {Seite} von 'ionic-eckular';

@Seite({
  TEMPLEDURL: 'Build / pages / Pie-Chart / Pie-Chart.html'
})

Exportklasse-Diagrammspage {
  Konstrukteur() {
  }
}

Wir haben gerade eine eigenständige Komponente erstellt. Jetzt müssen wir dies in die Haupt-App verknüpfen. Dazu müssen wir auf die Komponente verweisen, die wir in der erstellt haben app.js. Datei im App-Ordner und verwenden Sie die Komponente in der Seiten Eigenschaft des App-Komponenten-Konstruktors.

 Import {chartspage} von './pages/donut-chart/donut-chart'

Konstruktor (App, Plattform, Menü) {
    // Standard-App-Konstruktor
    this.app = app;
    diese.platform = Plattform;
    Dieses.Menu = Menü;
    the.initialiseApp ();
    // Setzen Sie die Seiten unserer App - wir fügen hier ein Donut-Diagramm hinzu
    das.pages = [
      {Titel: 'Willkommen', Komponente: Helloionicpage},
      {Titel: 'Donut Chart', Komponente: ChartSpage}
    ];

    // Machen Sie HELLOIONICPAGE die root (oder erster) Seite - Standardschritt
    diese.Rolotpage = Halloionispage;
}

Nachdem Sie diese Änderungen vorgenommen haben, sollte die ionische App im Browser automatisch neu laden (oder ionic dient erneut vom Terminal aus dem Terminal). Nun sollte ein neuer Link im Seiten-Menü der App sichtbar sein, und klicken Sie darauf, dass Sie auf dem Bildschirm "Hallo World" sehen sollten.

Erstellen eines JavaScript-Diagramms

Jetzt ist es an der Zeit, unsere Seite "Hello World" zu ändern, um ein Donut-Diagramm zu erstellen. Um die FusionCharts-Bibliothek verwenden zu können, müssen wir zunächst die fusioncharts.js. und fusioncharts.charts.js. Dateien in der. www / index.html. Datei.

Schneller Tipp: Wenn sich beide Dateien im selben Ordner befinden, dann hinzufügen fusioncharts.js. reicht aus, da dies automatisch einschließt fusioncharts.charts.js. .

 & lt; Skripttyp = "Text / JavaScript" SRC = "path / to / fusioncharts.js" & gt; & lt; / script & gt;

Wir ändern nun das HTML aus dem vorherigen Schritt, um einen Diagrammcontainer zu erstellen:

 & lt; div id = "Chart-Container" & gt; & lt; / div & gt;

Im Konstruktor in Donut-Chart.js. , das wir oben erstellt haben, müssen wir den folgenden Code hinzufügen, um das Diagramm innerhalb des Diagrammcontainers zu erstellen:

 FusionCharts.Ready (Funktion () {
  VAR REVENUECHART = neue FusionCharts ({
    Typ: 'dougnut2d',
    Renderat: 'Diagrammcontainer',
    Breite: '100%',
    Höhe: '450',
    dataformat: 'json',
    Datenquelle: {
      "Diagramm": {
        "Bildunterschrift": "Aufteilung des Umsatzes nach Produktkategorien",
        "SubCaption": "Letztes Jahr",
        "numberprefix": "$",
        "PaletteColors": "# 0075c2, # 1aaf5d, # F2C500, # F45B00, # 8E0000",
        // mehr Diagrammattribute
      },
      "Daten": [{
          "Label": "Essen",
          "Wert": "28504"
        } // mehr Daten
      ]
    }
  }).machen();
});

In diesem Code erstellen wir ein neues Diagramm über den Konstruktor des FusionCharts. Die verwendeten Eigenschaften werden nachfolgend kurz erläutert:

Art Definiert die Art des Diagramms

Renderat ist die ID des Behälters, in dem wir das Diagramm rendern möchten

Breite und Höhe werden verwendet, um die Diagrammabmessungen festzulegen

Datei Format Ist das Format, in dem wir die Diagrammdaten füttern, (Sie können JSON sowie XML verwenden).

Datenquelle Enthält Diagrammkosmetik in den FusionCharts Diagramm Objekt und die tatsächlichen Daten, die in der Daten Array

Ich habe zwar nur vier Attribute in der Diagramm Object, es gibt mehr als hundert andere, um das Design Ihres Charts zu verbessern. Sie können mehr darüber erfahren Hier .

Sobald dieser Code hinzugefügt wird, laufen Sie ionischer servierer Um die App zu relasen. Sie sollten einen Link 'Donut Chart' in Ihrem Seitenmenü sehen. Wenn Sie alle meine Schritte richtig befolgt haben, sollten Sie, wenn Sie auf diesen Link klicken, sollten Sie ein Donut-Diagramm sehen! Wenn nicht, verweisen Sie bitte den Code auf der Github Repo für dieses Projekt um zu sehen, wo Sie schief gelaufen sind.

Hinweis: Verwenden Sie nach der Überprüfung im Browser ionisches Emulieren ios. So laden Sie Ihre App in den iOS-Simulator.

Zusammenfassen

Our doughnut chart representing the revenue split of a hypothetical company by product categories — Unser Donut-Diagramm, das die Umsatzteile eines hypothetischen Unternehmens durch Produktkategorien darstellt

Wie Sie gerade gesehen haben, ist es nicht schwierig, mit der Datenvisualisierung in Ionic zu beginnen. 2. Obwohl ich gerade ein einfaches Donut-Diagramm gemacht habe, um den Prozess zu demonstrieren, können komplexe Diagramme mit mehreren Datensätzen mit demselben Prozess erstellt werden.Das einzige, was Sie herausfinden müssen, ist das Format, in dem FusionCharts die Daten für diesen bestimmten Diagrammtyp akzeptiert.Sobald Sie das tun können, können Sie irgendwelche Diagramm aus der Bibliothek erstellen.

Wenn Sie Hilfe bei diesem Thema benötigen, oder wenn Sie Fragen zum Inhalt dieses Tutorials haben, fühlen Sie mich gerne an auf Twitter .Ich bin immer glücklich zu helfen!

Dieser Artikel erschien ursprünglich in Netzmagazin. Ausgabe 283; Kaufen Sie es hier. .

Interaktive Diagramme in Ionic 2

Ionic 2 einrichten

Erstellen einer ionischen 2-App

Hinzufügen einer neuen Seite

Erstellen eines JavaScript-Diagramms

Zusammenfassen

wie man - Die beliebtesten Artikel

Wie kann man in Google einrangieren

So reinigen Sie Painthushes: den endgültigen Guide

So erstellen Sie ein Meme in Photoshop

8 Stand der Technik-CSS-Funktionen (und wie Sie sie verwenden)

So machen Sie einen Mahlstick zum Malen

Machen Sie Ihre Charaktere mit Farbe und Licht

Wie man Schattenfarbe in Farbe mischen

Zeichnen Sie ein Bleistiftporträt eines Hundes

Kategorien