Wie man ein modernes Armaturenbrett mit NVD3.js

0
44

NVD3.js ist eine JavaScript-Visualisierungs-Bibliothek, die kostenlos zu benutzen und open source. Es ist abgeleitet von der bekannten d3.js Visualisierung Bibliothek. Wenn verwendet den richtigen Weg, diese Bibliothek kann sehr mächtig sein für die alltäglichen Aufgaben und auch Geschäfte.

Zum Beispiel, ein online-dashboard. Wir können NVD3.js um die Daten zu sammeln in einem zentralen Raum, visualisiert die Informationen in übersichtlichen Diagrammen und Grafiken. Das ist, was wir jetzt betrachten werden, in diesem post.

Machen Sie ein dashboard mit NVD3.js zum ersten mal ist entmutigend, aber nach dieser Anleitung, sollten Sie die notwendigen Kenntnisse, um Ihre Hände schmutzig und bauen Sie etwas genial. Ich persönlich habe eine Leidenschaft für Visualisierungen im web. Sie sind beide schön und sinnvoll zugleich.

Real-world use case: Ein Daten-dashboard

Dashboards können verwendet werden, für so ziemlich alles. Wie lange hast du Daten zu analysieren, du bist gut zu gehen, ob das einige Verkaufszahlen oder das Durchschnittliche Wetter der vergangenen 20 Jahre. Bauen wir so etwas wie dieses:

Finden Sie die Pen-Dashboard NVD3.JS von Danny Englishby (@DanEnglishby) auf CodePen.

Einrichten der Umgebung

Zur Einrichtung eines NVD3 Diagramm, benötigen wir drei Dinge:

  1. Die JavaScript-Bibliothek NVD3
  2. Die CSS-Bibliothek NVD3
  3. Die D3.js Bibliothek (eine Abhängigkeit für NVD3)

Alle diese sind verfügbar über Cloudflare CDN-Netzwerk. Hier ist eine HTML-Vorlage mit all jene Ressourcen bereit zu gehen:

<!doctype html>
<html lang=”de”>
<head>
<meta charset=”utf-8″>
<Titel>Dashboard</title>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.css”>
</head>
<body>

</body>
</html>

Datenquellen

Für dieses tutorial, ich dachte, mit einigen roh -, Sach-Daten, die bereits formatiert wurde, in das JSON wäre das einfachste. Ich bin mit zwei Informationsquellen: eine über die durchschnittlichen globalen Temperaturen über die Zeit und der andere reporting-Welt-Bevölkerung-Statistik. Ich habe bereits formatiert, die Daten in JSON, so ist es bereit zum kopieren und einfügen!

Erstellen Sie ein Liniendiagramm

Lassen Sie uns gehen Sie vor und erstellen Sie ein Liniendiagramm mit einigen globalen Temperatur-Daten. Die raw-Daten, die ich zusammengestellt habe in JSON repräsentiert den letzten zwanzig Jahren von Temperatur änderungen im Vergleich zum globalen Durchschnitt.

Erstens, wir ‘ ll fügen Sie ein Platzhalter-element für das Diagramm zu befestigen, wenn das JavaScript ausgeführt wird.

<div id=”averageDegreesLineChart” class= “mit-3d-Schatten-übergänge averageDegreesLineChart’>
<svg></svg>
</div>

Dann fügen Sie das folgende JSON in script-tags vor dem </body> – tag:

var temperatureIndexJSON = [
{
key: “Temp +- Durchschn.”,
Werte: [{ “x”: 1998, “y”: 0.45 }, { “x”: 1999, “y”: 0.48 }, { “x”: 2000, “y”: 0.5 }, { “x”: 2001, “y”: 0.52 }, { “x”: 2002, “y”: 0.55 }, { “x”: 2003, “y”: 0.58 }, { “x”: 2004, “y”: 0.6 }, { “x”: 2005, “y”: 0.61 }, { “x”: 2006, “y”: 0.61 }, { “x”: 2007, “y”: 0.61 }, { “x”: 2008, “y”: 0.62 }, { “x”: 2009, “y”: 0.62 }, { “x”: 2010, “y”: 0.62 }, { “x”: 2011, “y”: 0.63 }, { “x”: 2012, “y”: 0.67 }, { “x”: 2013, “y”: 0.71 }, { “x”: 2014, “y”: 0.77 }, { “x”: 2015, “y”: 0.83 }, { “x”: 2016, “y”: 0.89 }, { “x”: 2017, “y”: 0.95 }]
}
];

Der x-Wert ist das Jahr und der Sie Wert ist die Temperatur in Grad Celsius.

Das Letzte Stück des Puzzles ist die wichtigste Funktion, die erstellt das Diagramm. Die Funktion mit dem Namen nv.addGraph() ist die main-Funktion verwendet, während NVD3 und in Ihr, Sie initialisieren das Objekt chart. In diesem Beispiel verwenden wir das lineChart-Objekt die Methoden an, je nachdem, was die visuellen Anforderungen kann werden.

Überprüfen Sie heraus die JavaScript-Kommentare zu sehen, der denen jede Zeile tut.

nv.addGraph(function () {
var chart = nv.Modelle.lineChart() // Initialisierung des lineChart-Objekt.
.useInteractiveGuideline(true); // aktiviere den interaktiven Leitfaden (tooltips)
chart.x-Achse
.axisLabel(‘TimeStamp (Jahr)’); // Setze die Beschriftung der x-Achse (Vertikal)
chart.yAxis
.axisLabel (‘°(c)’) // die Beschriftung der x-Achse (Horizontal)
.tickFormat(d3.format(‘.02f’)); // Gerundete Zahlen-Format.
d3.wählen Sie(‘#averageDegreesLineChart svg’) // Wählen Sie die ID des html-Elements, die wir definiert haben.
.datum(temperatureIndexJSON) // Pass in die JSON
.übergang().Dauer(500) // Set transition speed
.call(Diagramm); // Call & Rendern des Diagramms
nv.utils.windowResize(chart.update); // Intitiate listener für Fenster-Größe, so dass das Diagramm reagiert und änderungen der Breite.
return;
});

Finden Sie die Pen-Linie-Diagramm NVD3.JS von Danny Englishby (@DanEnglishby) auf CodePen.

Die Schaffung von zwei Balkendiagramme für den Preis von einem

Sie lieben den minimalen Aufwand, der die nächsten beiden charts. Die macht der NVD3.js ermöglicht das Umschalten zwischen Diagramm-Typen. Sie können entweder das toggle aktiv, so können die Benutzer Umschalten zwischen einem standard-bar-chart oder ein gestapeltes Balkendiagramm. Oder Sie können erzwingen, dass der Diagramm-Typ und machen es unveränderlich.

Die folgenden Beispiele zeigen, wie genau es zu tun.

Stacked multi-Balken-Diagramm

Sie kennen die bar-charts, dass der Stapel beiden Werte zusammen in die gleiche bar? Das ist es, was wir hier tun.

<div id=”worldPopulationMultiBar” class=”mit-3d-Schatten-übergänge worldPopulationMultiBar”>
<svg></svg>
</div>
var populationBySexAndCountryJSON =[{“key”:”Male”,”color”:”#d62728″,”values”:[{“label”:”China”,”value”:717723466.166},{“label”:”India”,”value”:647356171.132},{“label”:”Vereinigten Staaten von America”,”value”:157464952.272},{“label”:”Indonesia”,”value”:125682412.393},{“label”:”Brazil”,”value”:98578067.1},{“label”:”Pakistan”,”value”:93621293.316},{“label”:”Nigeria”,”value”:88370210.605},{“label”:”Bangladesh”,”value”:79237050.772},{“label”:”Russisch Federation”,”value”:65846330.629},{“label”:”Japan”,”value”:61918921.999}]},{“key”:”Female”,”color”:”#1f77b4″,”values”:[{“label”:”China”,”value”:667843070.834},{“label”:”India”,”value”:604783424.868},{“label”:”Vereinigten Staaten von America”,”value”:162585763.728},{“label”:”Indonesia”,”value”:124183218.607},{“label”:”Brazil”,”value”:101783857.9},{“label”:”Pakistan”,”value”:88521300.684},{“label”:”Nigeria”,”value”:85245134.395},{“label”:”Bangladesh”,”value”:77357911.228},{“label”:”Russischen Föderation”,”value”:76987358.371},{“label”:”Japan”,”value”:65224655.001}]}];

nv.addGraph(function ()
{
var chart = nv.Modelle.multiBarChart()
.x(function (d) {
zurück d….label; // Konfigurieren der x-Achse zu verwenden, das “label” innerhalb der json.
})
.y(function (d) {
zurück d….Wert; // Konfigurieren der y-Achse zu verwenden, der “Wert” innerhalb des json-Format.
}).Marge({top: 30, rechts: 20 unten: 50, Links: 85}) // Fügen Sie einige CSS Rand um das Diagramm.
.showControls(false) // Drehen des schaltbaren Kontrolle
.gestapelt(true); // Force stacked-Modus.

chart.x-Achse.axisLabel(‘Länder’); // add label auf der horizontalen Achse

chart.yAxis.tickFormat(d3.format(‘0f’)); // Runde der yAxis-Werte

d3.wählen Sie(‘#worldPopulationMultiBar svg’) // Wählen Sie das html-element mit ID
.datum(populationBySexAndCountryJSON) // Übergeben der Daten
.übergang().Dauer(500) // Set transition speed
.call(Diagramm); // Call & Render chart

nv.utils.windowResize(chart.update); // Intitiate listener für Fenster-Größe, so dass das Diagramm reagiert und änderungen der Breite.
return;
});

Die zwei wichtigsten Einstellungen in der JavaScript-hier sind die .showControls und .gestapelt Boolean. Sie beide tun das, was Sie sagen, auf der Dose: die Kraft, die Graphik, um ein gestapeltes Balkendiagramm, und nicht zulassen, schalten Sie den Diagrammtyp. Sie werden sehen, was ich meine, durch die Umstellung bald.

Finden Sie den Stift, Multi StackedBar NVD3.JS von Danny Englishby (@DanEnglishby) auf CodePen.

Standard-multi-Balken-Diagramm

Nun, wir tun etwas ein wenig mehr traditionelle und Werte zu vergleichen side-by-side statt stapeln Sie in die gleiche bar.

Dies verwendet so ziemlich den gleichen code wie die gestapelten Beispiele, aber wir können das ändern .gestapelt boolean-Wert auf false. Dies wird, natürlich, stellen Sie die gestapelten Balken-Diagramm in einem normalen Balkendiagramm.

<div id=”worldPopulationMultiBar” class=”mit-3d-Schatten-übergänge worldPopulationMultiBar”>
<svg></svg>
</div>
var populationBySexAndCountryJSON = [{“key”:”Male”,”color”:”#d62728″,”values”:[{“label”:”China”,”value”:717723466.166},{“label”:”India”,”value”:647356171.132},{“label”:” Vereinigten Staaten von America”,”value”:157464952.272},{“label”:”Indonesia”,”value”:125682412.393},{“label”:”Brazil”,”value”:98578067.1},{“label”:”Pakistan”,”value”:93621293.316},{“label”:”Nigeria”,”value”:88370210.605},{“label”:”Bangladesh”,”value”:79237050.772},{“label”:”Russisch Federation”,”value”:65846330.629},{“label”:”Japan”,”value”:61918921.999}]},{“key”:”Female”,”color”:”#1f77b4″,”values”:[{“label”:”China”,”value”:667843070.834},{“label”:”India”,”value”:604783424.868},{“label”:”Vereinigten Staaten von America”,”value”:162585763.728},{“label”:”Indonesia”,”value”:124183218.607},{“label”:”Brazil”,”value”:101783857.9},{“label”:”Pakistan”,”value”:88521300.684},{“label”:”Nigeria”,”value”:85245134.395},{“label”:”Bangladesh”,”value”:77357911.228},{“label”:”Russischen Föderation”,”value”:76987358.371},{“label”:”Japan”,”value”:65224655.001}]}];

nv.addGraph(function () {
var chart = nv.Modelle.multiBarChart()
.x(function (d) {
zurück d….label; // Konfigurieren der x-Achse zu verwenden, das “label” innerhalb der json.
})
.y(function (d) {
zurück d….Wert; // Konfigurieren der y-Achse zu verwenden, der “Wert” innerhalb des json-Format.
}).Marge({top: 30, rechts: 20 unten: 50, Links: 85}) // Fügen Sie einige CSS Rand um das Diagramm.
.showControls(false) // Drehen des schaltbaren Kontrolle
.gestapelt(false); // ***Zwingen normalen bar-Modus.***

chart.x-Achse.axisLabel(‘Länder’); // add label auf der horizontalen Achse

chart.yAxis.tickFormat(d3.format(‘0f’)); // Runde der yAxis-Werte

d3.wählen Sie(‘#worldPopulationMultiBar svg’) // Wählen Sie das html-element mit ID
.datum(populationBySexAndCountryJSON) // Übergeben der Daten
.übergang().Dauer(500) // Set transition speed
.call(Diagramm); // Call & Render chart

nv.utils.windowResize(chart.update); // Intitiate listener für Fenster-Größe, so dass das Diagramm reagiert und änderungen der Breite.

return;
});

Die eine änderung der Einstellungen präsentiert uns eine BRANDNEUE aussehende Grafik.

Finden Sie den Stift, Multi-Bar NVD3.JS von Danny Englishby (@DanEnglishby) auf CodePen.

Mit einem code-set mit minimalen änderungen, die Sie gerade erstellt zwei epische Karten für den Preis von einem. Ein dickes Lob für Sie!

Es ist noch eine Letzte Einstellung, natürlich, wenn Sie wollen, dass die Funktionalität der Umschaltung charts. Ändern Sie die .showControls true und entfernen .gestapelt option. Sie werden feststellen, dass einige Steuerelemente am oberen Rand des Diagramms. Anklicken wechselt die Ansicht zwischen einer gestapelten und standard-chart.

Finden Sie den Stift, Multi-Bar Umschaltbar NVD3.JS von Danny Englishby (@DanEnglishby) auf CodePen.

Machen Sie ein dashboard

Es gibt nichts, was ich Liebe, mich mehr in die Welt der web-Entwicklung als dashboards. Sie erhalten nie alt und sind super gut aussehend. Durch die Verwendung von charting-Techniken haben wir bereits abgedeckt, wir können unsere eigenen responsive-dashboard auf einer einzigen Webseite.

Wenn Sie daran denken, in die JavaScript-snippets früher, es wurde eine Funktion festgelegt, die einen listener gegen jedes Diagramm: nv.utils.windowResize(chart.update);

Diese Magische Funktion, die Größe des Charts, für Sie, als wenn es wurde auf width: 100% in CSS. Aber es muss nicht nur schrumpfen, sondern auch bewegt und verändert die Struktur des Graphen entsprechend der Größe des Bildschirms. Es ist ziemlich genial! Alles, was wir brauchen, zu kümmern, es sind die Höhen. Wir können set-up durch die Anwendung von flexbox auf die Klassen zugewiesen, um Diagramm-Elemente.

Wir bündeln alles, was wir haben, so weit in ein dashboard, indem er jedes element des Diagramms in einem flexbox-container. Tragen Sie eine kleine Menge von CSS für die Durchbiegung und Höhe, und schließlich, kompilieren Sie alle Skripte, die in einem (oder Sie kann bewahren Sie diese getrennt in Ihrem eigenen Projekt).

Finden Sie die Pen-Dashboard NVD3.JS von Danny Englishby (@DanEnglishby) auf CodePen.

Zusammenfassung

Dieses tutorial wird sich hoffentlich geben Ihnen das wissen, um loszulegen, die mit dem Bau Visualisierungen, und, schließlich, fügen Sie Sie in ein Produktions-dashboard. Auch wenn Sie nur spielen wollen, mit diesen Konzepten, die ich bin sicher, Ihr Geist wird anfangen zu laufen mit Ideen, wie Sie verwandeln verschiedene Arten von Daten in atemberaubender Optik.