Erstellen Sie Diagramme mit Node.js

In diesem Leitfaden erfahren Sie, wie Sie mit der Diagrammbibliothek Node.js beeindruckende Diagramme erstellen.

Aufgrund der Benutzerfreundlichkeit und des unkomplizierten Designs von billboard.js existieren bereits zahlreiche Bibliotheken zur Erstellung visueller Darstellungen von Daten.

Übersicht billboard.js

Die Billboard-Charts inspirierten die Benennung der Chart-Bibliothek namens billboard.js. billboard.js ist ein fortschrittliches, wiederverwendbares und ästhetisch ansprechendes Schnittstellendiagramm-Framework, das auf D3 v4+ aufbaut.

Es handelt sich um ein JavaScript-Paket, mit dem Entwickler sofort ein Diagramm zum Anzeigen von Daten erstellen können.

Voraussetzungen für billboard.js

Wir benötigen Folgendes, um die Bibliothek billboard.js zu verwenden:

1. Node.js Version 10 oder höher und npm Versionen 5.2 oder höher müssen auf dem System installiert sein.
2. Ein grundlegendes Verständnis von HTML, JavaScript und dem Umgang mit Bibliotheken wird vorausgesetzt.

Wenn Sie eines der CDNs verwenden, müssen wir die Bibliothek billboard.js nicht installieren, um sie zu verwenden. Wir können npm verwenden, um die Bibliothek billboard.js zu installieren.

1. Navigieren Sie im Terminal zu dem Ort, an dem wir unsere Projektdateien speichern.
2. Durch Ausführen des folgenden Befehls werden die Dateien package.json und package.lock.json generiert, die von Node.js zum Verwalten von Bibliotheken von Drittanbietern benötigt werden, die von Node.js-Projekten verwendet werden.

$ npm init

$ npm install billboard.js

Beispiel zum Implementieren eines Diagramms mit Node.js

Das folgende Code-Snippet generiert ein Balkendiagramm mit zwei Datenwerten, Waqar's Gold und Sam's Silver.

1. diagramm.html

   Erstellen Sie in der Vorlage chart.html ein div mit der ID barChart_1 und platzieren Sie es innerhalb des Tags body.

   <!-- Load D3.js -->
   <script src="https://d3js.org/d3.v4.min.js"></script>
   
   <!-- Load billboard.js with style -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/billboard.js/1.4.1/billboard.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/billboard.js/1.4.1/billboard.css">
   
   <div id="barChart_1"></div>
   

2. chart.js

   In diesem Beispiel bewirken die an bb.generate() gelieferten Eingaben, dass es ein Diagramm erstellt.

   var chart = bb.generate();
   

   Die als Daten bekannte Variable speichert ein Objekt, das alle Informationen enthält, die zum Erstellen des Diagramms erforderlich sind.

   data: {columns: [
            ['Waqar\'s Gold', 10, 20, 30, 40, 50, 60],
            ['Sam\'s Silver', 130, 100, 140, 200, 150, 50]
          ],
   

   Der Begriff Typ bezeichnet die bestimmte Art von Diagramm, das verwendet wird. In unserem Beispiel haben wir bisher ein Balkendiagramm erstellt.

   type: 'bar'
   }
   , bar: {width: {ratio: 0.1}}
   

   Das bindto: "#barChart_1" speichert die div id in unserer HTML-Datei, die dem Ort entspricht, an dem das Diagramm angezeigt wird.

   bindto: '#barChart_1';
   

Vollständiger Quellcode:

diagramm.html:

<div id="barChart_1"></div>

chart.js:

var chart = bb.generate({
  data: {
    columns: [
      ['Waqar\'s Gold', 10, 20, 30, 40, 50, 60],
      ['Sam\'s Silver', 130, 100, 140, 200, 150, 50],
    ],
    type: 'bar',
  },
  bar: {
    width: {
      ratio: 0.1,
    },
  },
  bindto: '#barChart_1',
});

Ausgang: