So erstellen Sie ein modernes Dashboard mit NVD3.js

NVD3.js ist eine JavaScript-Visualisierungsbibliothek, die kostenlos und Open Source ist. Sie ist abgeleitet von der bekannten d3.js Visualisierungsbibliothek. Bei richtiger Anwendung kann diese Bibliothek für alltägliche Aufgaben und sogar für Geschäftsabläufe äußerst leistungsfähig sein.

Zum Beispiel ein Online-Dashboard. Wir können NVD3.js verwenden, um Daten in einem zentralen Bereich zu sammeln, der die Informationen in übersichtlichen Diagrammen und Grafiken visualisiert. Darum geht es in diesem Beitrag.

Das Erstellen eines Dashboards mit NVD3.js ist beim ersten Mal entmutigend, aber nach diesem Tutorial sollten Sie über das nötige Wissen verfügen, um loszulegen und etwas Beeindruckendes zu bauen. Persönlich habe ich eine Leidenschaft für Visualisierungen im Web. Sie sind gleichzeitig schön und aussagekräftig.

Anwendungsfall aus der Praxis: Ein Daten-Dashboard

Dashboards können für so ziemlich alles verwendet werden. Solange Sie Daten zu analysieren haben, sind Sie gut aufgestellt, sei es für Verkaufsdaten oder für das Wetterdurchschnitt der letzten 20 Jahre. Lassen Sie uns etwas Ähnliches bauen

Siehe den Pen Dashboard NVD3.JS von Danny Englishby (@DanEnglishby) auf CodePen.

Einrichtung der Umgebung

Um ein NVD3-Diagramm einzurichten, benötigen wir drei Dinge

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

All diese sind über das CDN-Netzwerk von Cloudflare verfügbar. Hier ist eine HTML-Vorlage mit all diesen Ressourcen, die sofort einsatzbereit sind

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.js"></script>
</body>
</html>

Datenquellen

Für dieses Tutorial dachte ich, es wäre am einfachsten, einige rohe, faktenbasierte Daten zu verwenden, die bereits in JSON formatiert wurden. Ich verwende zwei Informationsquellen: eine über globale Durchschnittstemperaturen im Zeitverlauf und die andere über Weltbevölkerungsstatistiken. Ich habe die Daten bereits in JSON formatiert, sodass sie kopier- und einfügbar sind!

Erstellen eines Liniendiagramms

Lassen Sie uns nun ein Liniendiagramm mit globalen Temperaturdaten erstellen. Die rohen Daten, die ich in JSON zusammengestellt habe, stellen die Temperaturänderungen der letzten zwanzig Jahre im Vergleich zum globalen Durchschnitt dar.

Zuerst fügen wir ein Platzhalterelement hinzu, an das das Diagramm angehängt wird, wenn das JavaScript ausgeführt wird.

<div id="averageDegreesLineChart" class='with-3d-shadow with-transitions averageDegreesLineChart'>
  <svg></svg>
</div>

Fügen Sie dann das folgende JSON in einige Skript-Tags vor dem </body>-Tag ein

var temperatureIndexJSON = [
  {
    key: "Temp +- Avg.",
    values: [{ "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 y-Wert ist die Temperatur in Grad Celsius.

Das letzte Puzzleteil ist die wichtigste Funktion, die das Diagramm erstellt. Die Funktion namens nv.addGraph() ist die Hauptfunktion, die in NVD3 verwendet wird, und darin initialisieren Sie das Diagrammobjekt. In diesem Beispiel verwenden wir das lineChart-Objekt, an das je nach den visuellen Anforderungen Methoden verkettet werden können.

Schauen Sie sich die JavaScript-Kommentare an, um zu sehen, was jede Zeile tut.

nv.addGraph(function () {
  var chart = nv.models.lineChart() // Initialise the lineChart object.
    .useInteractiveGuideline(true); // Turn on interactive guideline (tooltips) 
chart.xAxis
    .axisLabel('TimeStamp (Year)'); // Set the label of the xAxis (Vertical)
chart.yAxis
    .axisLabel('Degrees (c)') // Set the label of the xAxis (Horizontal)
    .tickFormat(d3.format('.02f')); // Rounded Numbers Format.
d3.select('#averageDegreesLineChart svg') // Select the ID of the html element we defined earlier.
    .datum(temperatureIndexJSON) // Pass in the JSON
    .transition().duration(500) // Set transition speed
    .call(chart); // Call & Render the chart
  nv.utils.windowResize(chart.update); // Intitiate listener for window resize so the chart responds and changes width.
  return;
});

Siehe den Pen Line Chart NVD3.JS von Danny Englishby (@DanEnglishby) auf CodePen.

Erstellen zweier Balkendiagramme zum Preis von einem

Sie werden die minimale Anstrengung dieser nächsten beiden Diagramme lieben. Die Leistung von NVD3.js ermöglicht den Wechsel zwischen Diagrammtypen. Sie können entweder den Schalter aktivieren, damit Benutzer zwischen einem Standard-Balkendiagramm oder einem gestapelten Balkendiagramm wechseln können. Oder Sie erzwingen den Diagrammtyp und machen ihn unveränderlich.

Die folgenden Beispiele zeigen genau, wie es geht.

Gestapeltes Multi-Balkendiagramm

Sie kennen diese Balkendiagramme, die zwei Werte im selben Balken stapeln? Genau das machen wir hier.

<div id="worldPopulationMultiBar" class="with-3d-shadow with-transitions worldPopulationMultiBar">
  <svg></svg>
</div>

var populationBySexAndCountryJSON =[{"key":"Male","color":"#d62728","values":[{"label":"China","value":717723466.166},{"label":"India","value":647356171.132},{"label":"United States of 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":"Russian 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":"United States of 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":"Russian Federation","value":76987358.371},{"label":"Japan","value":65224655.001}]}];

nv.addGraph(function ()
{
  var chart = nv.models.multiBarChart()
    .x(function (d) {
      return d.label; // Configure x axis to use the "label" within the json.
    })
    .y(function (d) {
      return d.value; // Configure y axis to use the "value" within the json.
    }).margin({top: 30, right: 20, bottom: 50, left: 85}) // Add some CSS Margin to the chart.
    .showControls(false) // Turn of switchable control
    .stacked(true); // Force stacked mode.

  chart.xAxis.axisLabel('Countries'); // add label to the horizontal axis

  chart.yAxis.tickFormat(d3.format('0f')); // Round the yAxis values

  d3.select('#worldPopulationMultiBar svg') // Select the html element by ID
    .datum(populationBySexAndCountryJSON) // Pass in the data
    .transition().duration(500) // Set transition speed
    .call(chart); // Call & Render chart
  
  nv.utils.windowResize(chart.update); // Intitiate listener for window resize so the chart responds and changes width.
  return;
});

Die beiden wichtigen Einstellungen im JavaScript hier sind die booleschen Werte .showControls und .stacked. Sie tun beide, was sie versprechen: Erzwingen Sie das Diagramm als gestapeltes Balkendiagramm und erlauben Sie keinen Wechsel des Diagrammtyps. Sie werden bald sehen, was ich mit "wechseln" meine.

Siehe den Pen Multi StackedBar NVD3.JS von Danny Englishby (@DanEnglishby) auf CodePen.

Standard Multi-Balkendiagramm

Lassen Sie uns nun etwas Traditionelleres tun und Werte nebeneinander vergleichen, anstatt sie im selben Balken zu stapeln.

Dies verwendet so ziemlich denselben Code wie die gestapelten Beispiele, aber wir können den booleschen Wert .stacked auf false ändern. Dies macht das gestapelte Balkendiagramm natürlich zu einem normalen Balkendiagramm.

<div id="worldPopulationMultiBar" class="with-3d-shadow with-transitions worldPopulationMultiBar">
  <svg></svg>
</div>

var populationBySexAndCountryJSON = [{"key":"Male","color":"#d62728","values":[{"label":"China","value":717723466.166},{"label":"India","value":647356171.132},{"label":"United States of 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":"Russian 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":"United States of 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":"Russian Federation","value":76987358.371},{"label":"Japan","value":65224655.001}]}];

nv.addGraph(function () {
  var chart = nv.models.multiBarChart()
    .x(function (d) {
      return d.label; // Configure x axis to use the "label" within the json.
    })
    .y(function (d) {
      return d.value; // Configure y axis to use the "value" within the json.
    }).margin({top: 30, right: 20, bottom: 50, left: 85}) // Add some CSS Margin to the chart.
    .showControls(false) // Turn of switchable control
    .stacked(false); // ***Force normal bar mode.***

  chart.xAxis.axisLabel('Countries'); // add label to the horizontal axis

  chart.yAxis.tickFormat(d3.format('0f')); // Round the yAxis values

  d3.select('#worldPopulationMultiBar svg') // Select the html element by ID
    .datum(populationBySexAndCountryJSON) // Pass in the data
    .transition().duration(500) // Set transition speed
    .call(chart); // Call & Render chart

  nv.utils.windowResize(chart.update); // Intitiate listener for window resize so the chart responds and changes width.

  return;
});

Die einzige Änderung an den Einstellungen präsentiert uns ein brandneues Diagramm.

Siehe den Pen Multi Bar NVD3.JS von Danny Englishby (@DanEnglishby) auf CodePen.

Mit einem Code-Set und minimalen Änderungen haben Sie gerade zwei epische Diagramme zum Preis von einem erstellt. Glückwunsch!

Es gibt natürlich eine letzte Einstellung, wenn Sie die Funktionalität zum Wechseln der Diagramme wünschen. Ändern Sie .showControls auf true und entfernen Sie die Option .stacked. Sie werden einige Bedienelemente oben im Diagramm bemerken. Durch Klicken darauf wird die Ansicht zwischen einem gestapelten und einem Standarddiagramm umgeschaltet.

Siehe den Pen Multi Bar Switchable NVD3.JS von Danny Englishby (@DanEnglishby) auf CodePen.

Erstellen eines Dashboards

Im Bereich der Webentwicklung gibt es nichts, was ich lieber ansehe als Dashboards. Sie werden nie alt und sehen super aus. Durch die Anwendung der bisher behandelten Diagrammtechniken können wir unser eigenes reaktionsschnelles Dashboard auf einer einzigen Webseite erstellen.

Wenn Sie sich an die JavaScript-Snippets von früher erinnern, gab es eine Funktion mit einem Listener für jedes Diagramm: nv.utils.windowResize(chart.update);

Diese magische Funktion passt das Diagramm für Sie an, als ob es in CSS auf width: 100% gesetzt wäre. Aber es wird nicht nur *geschrumpft*, sondern bewegt und restrukturiert das Diagramm entsprechend der Bildschirmgröße. Es ist ziemlich genial! Wir müssen uns nur um die Höhen kümmern. Dies können wir erreichen, indem wir Flexbox auf die Klassen anwenden, die den Diagrammelementen zugewiesen sind.

Fassen wir alles, was wir bisher haben, in einem Dashboard zusammen, indem wir jedes Diagrammelement in einen Flexbox-Container packen. Wenden Sie ein wenig CSS für das Flexing und die Höhe an und fassen Sie schließlich alle Skripte zu einem zusammen (oder Sie können sie in Ihrem eigenen Projekt getrennt halten).

Siehe den Pen Dashboard NVD3.JS von Danny Englishby (@DanEnglishby) auf CodePen.

Zusammenfassung

Dieses Tutorial soll Ihnen hoffentlich das Wissen vermitteln, um mit der Erstellung von Datenvisualisierungen zu beginnen und sie schließlich in ein Produktions-Dashboard zu integrieren. Selbst wenn Sie nur mit diesen Konzepten spielen wollen, bin ich sicher, dass Ihr Geist voller Ideen sein wird, wie verschiedene Datentypen in beeindruckende Grafiken umgewandelt werden können.

daniel

# 19. Juli 2018

Es scheint, dass nvd3.js nur ein Wrapper für d3 ist, was ist der Vorteil, dies anstelle von nur d3 selbst zu verwenden?

Dan Englishby

Permalink zum Kommentar# 20. Juli 2018

Im Grunde ist es ein Wrapper, aber der Vorteil ist, dass Sie einen vorkonfigurierten Satz von Diagrammen haben, die schön zusammen aussehen. Sie müssen sich nicht mit der umfangreichen API von d3.js herumschlagen, um Diagramme zu erstellen. Es ermöglicht auch eine schnelle Entwicklung. Ich verstehe aber Ihren Punkt.