Erstellen Sie beeindruckende Diagramme mit AngularJS

Als Bürger der digitalen Welt werden wir ständig mit Daten überflutet. Von Website-Analysen bis hin zu unserem Fitness-Tracker: Daten sind überall um uns herum. Dadurch wird es für die Frontend-Designer immer schwieriger, Daten so darzustellen, dass sie sich von anderen Datenquellen abheben, die um die Aufmerksamkeit des Betrachters konkurrieren. Eine der besten Möglichkeiten, Ihre Botschaft zu vermitteln, ist die Verwendung toller Diagramme und Grafiken. Sie ermöglichen es Ihnen, die Aufmerksamkeit schnell auf die wichtigsten Erkenntnisse zu lenken, und sie ermöglichen es, Muster zu entdecken, die allein durch die Betrachtung von Rohdaten schwieriger zu beobachten sind. In diesem Tutorial werde ich den Schritt-für-Schritt-Prozess zum Erstellen beeindruckender Diagramme behandeln. Anstatt einfaches HTML/CSS/JS zu verwenden, habe ich mich für AngularJS entschieden, eines der derzeit beliebtesten JavaScript-Frameworks. AngularJS erleichtert das Erstellen von Webanwendungen, sobald Sie die anfängliche Lernkurve durchlaufen haben. Langsam, aber stetig findet es überall auf der Welt breite Akzeptanz. Wenn Sie Angular also noch nicht verwenden, besteht eine gute Chance, dass Sie dies in naher Zukunft tun werden. Beginnen wir nun ohne weitere Umschweife mit dem Tutorial!

Vier Schritte zum Erstellen eines Diagramms in AngularJS

Zusätzlich zu AngularJS benötigen wir eine Diagrammkomponente. Für dieses Projekt werde ich verwenden FusionCharts. Es verfügt über eine gute Sammlung von Diagrammen und bietet eine dedizierte Plugin für AngularJS. Ein kurzer Einblick in was wir machen werden:

Siehe den Stift AngularJS-Diagramme: Erstellen Sie beeindruckende Diagramme für Ihre AngularJS-App von Vikas (@vikaslalwani) An CodePen.

Um das Verständnis etwas zu erleichtern, habe ich dieses Tutorial in die folgenden vier Schritte unterteilt:

1. Fügen Sie die erforderlichen JavaScript-Dateien hinzu
2. Erstellen Sie die AngularJS-App
3. Definieren Sie den Controller
4. Rendern Sie das Diagramm

Schritt 0: Bereiten Sie Ihre Daten vor

Bevor wir mit der Diagrammerstellung beginnen, müssen wir die Daten sammeln und sie entsprechend dem von der Diagrammbibliothek akzeptierten Format strukturieren. FusionCharts akzeptiert sowohl JSON als auch XML. Wir werden JSON verwenden, da es das am häufigsten verwendete Format für den Datenaustausch in modernen Web-Apps ist. FusionCharts akzeptiert JSON-Daten als Array von Objekten, die Folgendes enthalten Etikett Und Wert:

[{
“label”: “United Kingdom”,
“value”: “80”
},{
“label”: “Canada”,
“value”: “70”
}]

Da jedes Diagramm einen anderen Anwendungsfall hat, müssen wir den JSON entsprechend dem jeweiligen Diagramm strukturieren, das wir darstellen möchten. Hier ist ein kleiner Trick, den ich verwende: Ich finde JSFiddle für das Diagramm, das ich erstellen möchte, aus der Chart-Fiddle-Galerie von FusionCharts und kopiere das Format. Dann ersetze ich es durch meine Werte und passe es an, wenn ich mehr oder weniger Datenpunkte habe. Sobald die Daten fertig sind, kann es losgehen …

Schritt 1: Erforderliche JavaScript-Dateien einbinden

Dies ist im Allgemeinen der erste Schritt für jede von Ihnen erstellte Web-App, und dieser Fall ist nicht anders. Wir müssen drei JavaScript-Dateien einbinden, von denen unsere App abhängt:

• Kern-AngularJS-Bibliothek: Jede minimierte 1.x-Version funktioniert.
• Die JavaScript-Diagrammbibliothek von FusionCharts: Sie finden alle Dateien im heruntergeladenen Ordner.
• AngularJS-Charts-Plugin von FC: Dieses Plugin muss separat heruntergeladen werden.

Wir werden die oben genannten Dateien mit einbinden Tag, und so sieht der HTML-Code nach Schritt 1 aus:

Schritt 2: Erstellen Sie die AngularJS-App

Nachdem wir die oben genannten Abhängigkeiten einbezogen haben, erstellen wir die AngularJS-App und fügen sie ein ng-fusioncharts Modul, das ist das Plugin, das wir verwenden. So machen wir es: var chartApp = angle.module('chartApp',["ng-fusioncharts"]);

Schritt 3: Definieren Sie den Controller

Der nächste Schritt besteht darin, den Angular-Controller für unsere App zu definieren. Dazu erweitern wir den Controller-Bereich um die Diagrammdefinition von Fusioncharts. So erreichen wir das: chartAapp.controller('chartController', function($scope) { //chart definition $scope.dataSource = { "chart": { "caption": "Sales - 2014 v 2015", // Weitere Diagrammeigenschaften – später erklärt }, „dataset“: [{
"seriesname": "Bakersfield Central",
"lineAlpha": "55",
//more chart data
]
}; });

$scope.dataSource Enthält Diagrammkonfigurationsparameter und die Daten, die zum Zeichnen des Diagramms verwendet werden. Ich habe im obigen Codeausschnitt nur ein paar Parameter eingefügt, um Unordnung zu vermeiden. Aber es gibt eine Menge, die Sie tun können, wie ich später erklären werde.

Schritt 4: Rendern Sie das Diagramm

Jetzt bleibt noch ein letzter Schritt. Um dies zu vervollständigen, fügen Sie einfach das folgende Markup zu Ihrer HTML-Datei an der Stelle hinzu, an der Sie Ihr Diagramm rendern möchten:

Hier ist eine kleine Erklärung für die im Inneren verwendeten Attribute Fusioncharts Direktive im obigen Codeausschnitt:

• Breite Definiert die Breite des Diagrammcontainers. Behalten Sie 100 % bei, wenn Ihr Diagramm die gesamte Containerbreite einnehmen und reagieren soll.
• Höhe Definiert die Höhe des Diagramms in Pixel.
• Typ Definiert den Typ des Diagramms, das dargestellt wird. Wir erstellen ein Spline-Diagramm mit mehreren Serien und es hat den Alias msspline. Um die Aliase für andere Diagrammtypen zu finden, gehen Sie zur Seite mit den Diagrammattributen und geben Sie den Namen des Diagramms ein, das Sie darstellen möchten.
• Datei Format definiert das Format, in dem wir Daten einspeisen (XML oder JSON).
• Datenquelle Enthält Diagrammkonfigurationsoptionen und Datenarray.

Von einfach bis umwerfend

Wenn Sie die oben genannten Schritte ordnungsgemäß befolgt haben, erhalten Sie am Ende ein Diagramm, das funktioniert, aber bei weitem nicht „umwerfend“ ist. Wie können wir also dafür sorgen, dass es wie das Diagramm aussieht, das Sie am Anfang gesehen haben? Eingeben Diagrammattribute. Mithilfe von Diagrammattributen können Sie die Ästhetik Ihres Diagramms steuern. Es gibt buchstäblich Hunderte von Attributen, mit denen Sie Ihrem Diagramm das gewünschte Aussehen verleihen können. Gehen Sie einfach zur obigen Seite und geben Sie den Namen des Diagramms ein, das Sie anpassen möchten. Für unser Diagramm: Das ist die Seite das alle Attribute enthält. Es ist nicht möglich, alle Attribute zu beschreiben, die ich in meinem Diagramm verwendet habe, aber ich habe die wichtigsten unten aufgeführt:

• baseFont: Dieses Attribut steuert die Schriftartfamilie, die in Ihrem Diagramm verwendet wird. Sie können jede beliebige Schriftart verwenden. In meinem Beispiel habe ich „Roboto Slab“ verwendet. Fügen Sie einfach die entsprechende Schriftartdatei in Ihren HTML-Code ein und schon kann es losgehen.
• bgColor Und CanvasBgColor: Mit diesen Attributen können Sie die Hintergrundfarbe für den Diagrammcontainer und seine Leinwand anpassen. Als Wert dieser Attribute können Sie einen beliebigen Hex-Farbcode festlegen.
• AnkerRadius: Wie Sie bemerken, gibt es kleine Kreise, die allen Datenpunkten entsprechen. Diese kleinen Kreise werden Anker genannt. AnkerRadius können Sie steuern, wie groß diese Kreise sein werden.
• toolTipBgAlpha: Dieses Attribut steuert die Transparenz des Tooltips. Sie können eine beliebige Zahl von 0 bis 100 übergeben. 0 bedeutet völlig transparent und 100 bedeutet undurchsichtig.

Die Bedeutung jedes Attributs lässt sich leichter erraten, wenn Sie den Dreh raus haben. Wenn Sie sich vorstellen können, was Sie brauchen, besteht eine gute Chance, dass Sie ein Attribut dafür finden. Und das ist es! Wir haben ein Arbeitsdiagramm, das mit AngularJS erstellt wurde. Wenn Sie Fragen zu meinem Tutorial haben, können Sie unten einen Kommentar hinterlassen oder mich auf Twitter anpingen. Es freut mich, dass ich Ihnen helfen konnte!