So visualisieren Sie skizzierte Diagramme in Vue.js mit RoughViz

einführen

Ein Diagramm ist eine grafische Darstellung von Daten, die dazu dient, einen Datensatz leichter lesbar zu machen und die Unterscheidung seiner Teile zu erleichtern. Während die meisten Benutzer an klare und formale Diagramme gewöhnt sind, bevorzugen manche Benutzer handgezeichnete oder skizzierte Diagramme. Hier kommt roughViz ins Spiel.

roughViz ist eine JavaScript-Bibliothek, die auf D3.js und Rough.js basiert. Die Bibliothek ist darauf ausgelegt, Diagramme zu erstellen, die wie Skizzen oder Handzeichnungen aussehen, wie das folgende Beispiel.

In diesem Handbuch erfahren Sie, wie Sie mit vue-roughviz skizzenartige Diagramme in Ihren Vue.js-Anwendungen anzeigen und wie Sie Ihre Vue-Anwendungen mit vue-cli konfigurieren.

Voraussetzungen

Dieses Tutorial setzt voraus, dass die folgenden Voraussetzungen erfüllt sind:

• Grundlegendes Verständnis von Vue.js
• Eine lokale Entwicklungsumgebung für Node.js und Vertrautheit mit dem Node-Paketmanager (npm)
• Ein Texteditor wie Visual Studio Code oder Atom
  

Start

Wenn Sie vue-cli noch nicht installiert haben, führen Sie den folgenden Befehl aus, um die neueste Version zu installieren.

npm install -g @vue/cli
# ODER
globales Garn-Add @vue/cli

Erstellen Sie jetzt eine neue Vue-Anwendung:

vue erstelle meine App

Hinweis: Dieser Vorgang kann mehrere Minuten dauern. Sobald dies erledigt ist, können wir in unser neues Anwendungsstammverzeichnis wechseln:

CD meine App

Der oben ausführlich beschriebene Prozess erstellt eine neue Vue.js-Anwendung. Um sicherzustellen, dass alles eingerichtet ist, führen Sie npm run serve aus. Wenn Sie http://localhost:8080 besuchen, sollte in Ihrem Browser „Willkommen auf Ihrer Vue.js-App-Seite“ angezeigt werden.

vue-roughviz hinzufügen

vue-roughviz ist ein Vue.js-Wrapper für RoughViz.js. Dadurch wird die Bibliothek als Komponente zugänglich, was eine nahtlose Wiederverwendung in auf Vue.js basierenden Projekten ermöglicht.

Um vue-roughviz in unser Projekt einzubinden, führen Sie Folgendes aus:

npm installiere vue-roughviz

vue-roughViz-Komponente

vue-roughviz stellt alle Diagrammstilkomponenten von rawViz bereit, darunter:

• roughBar – Balkendiagrammkomponente von rawViz
• roughBarH – roughViz-Komponente für horizontales Balkendiagramm
• roughDonut – roughViz-Donut-Diagrammkomponente
• roughPie – roughViz-Kreisdiagramm
• roughLine – roughViz-Liniendiagrammkomponente
• roughScatter – roughViz-Streudiagrammkomponente
• roughStackedBar – gestapelte Balkendiagrammkomponente von roughViz
  

verwenden

Nachdem Sie vue-roughviz zu Ihrem Projekt hinzugefügt haben, besteht der nächste Schritt darin, den Projektordner in Ihrem bevorzugten Texteditor zu öffnen.

Wenn Sie die Datei src/App.vue öffnen, sollte der anfängliche Inhalt ungefähr wie folgt aussehen:

Wenn Ihre Ansicht wie oben aussieht, löschen Sie den gesamten Inhalt und ersetzen Sie ihn durch den folgenden Code:

<Vorlage>
 
 <div id="app">
  
 <grober Balken :data="{
    Beschriftungen: ['Nord', 'Süd', 'Ost', 'West'],
    Werte: [10, 5, 8, 3],
   }" Titel="Regionen" Rauheit="8" :Farben="['rot', 'orange', 'blau', 'himmelblau']" Strich="schwarz" Strichbreite="3" Füllstil="Schraffur" Füllstärke="3,5" />
 
 </div>

</Vorlage>

Code Beschreibung

• import ... – Diese Codezeile importiert die RawBar-Komponente aus dem zuvor installierten Vue-Roughviz.
• export default {} — Dieser Block dient dazu, die zuvor importierte Komponente (roughBar) in unserer Anwendung verfügbar zu machen.
• <rough-bar :data="[...]" /> — Hier rufen wir die äußere rawBar-Komponente auf, die in diesen Komponenten angegebenen Eigenschaften sind erforderliche Eigenschaften.
  

Vue-Roughviz-Requisiten

Die einzige erforderliche Eigenschaft sind Daten, also die Daten, die zum Erstellen des Diagramms verwendet werden. Dies kann eine Zeichenfolge oder ein Objekt sein.

Wenn ein Objekt ausgewählt wird, muss es Beschriftungen und Werteschlüssel enthalten. Wenn stattdessen eine Zeichenfolge verwendet wird, muss diese die URL einer CSV- oder TSV-Datei sein. In dieser Datei müssen Sie auch Beschriftungen und Werte als separate Attribute angeben, die jede Spalte darstellen.

Zu den weiteren nützlichen Requisiten gehören:

1. Titel - gibt den Diagrammtitel an
2. Rauheit - der Grad der Rauheit des Diagramms
3. Strich – die Farbe des Strichs
4. Strichbreite
5. Füllgewicht – gibt die Dicke der inneren Pfadfarbe an.
6. Füllstil – Füllstil für Balken. Kann einer der folgenden sein:

• gestrichelt
• solide
• Zickzacklinie
• Kreuzschraffur
• Schraffur
• Zickzack

laufen

Um eine Vorschau unserer Anwendung anzuzeigen, führen Sie npm run serve aus. Wenn Sie die obigen Schritte korrekt ausgeführt haben, sollten Sie durch Zugriff auf http://localhost:8080 das in Ihrem Browser angezeigte Diagramm anzeigen können.

Laden von Daten von einer externen API

Lassen Sie uns ein kleines Experiment machen und die letzten 10 Tage der Preisentwicklung von Bitcoin in unserem Diagramm anzeigen. In diesem Experiment verwenden wir die Coingecko-API.

Warum Coingecko wählen? Im Gegensatz zu anderen Kryptowährungs-APIs ist Coingecko kostenlos und erfordert zum Einstieg keinen API-Schlüssel, was für unsere Experimente ideal ist.

Ersetzen Sie src/App.vue durch den folgenden Code

<Vorlage>
 
 <div id="app">
  
 <div>
   
  <rough-bar v-if="chartValue.length > 0" :data="{
     Beschriftungen: chartLabel,
     Werte: Diagrammwert,
    }" Titel="BTC – 10 Tage" Rauheit="3" Strich="schwarz" Strichbreite="1" Füllstil="Zickzack" Füllstärke="2" />
  
 </div>
 
 </div>

</Vorlage>

Wir erstellen eine asynchrone Methode loadData(), die den Bitcoin-Preisverlauf von der Coingecko-API abruft und die zurückgegebenen Daten durchläuft. Wir trennen das Datum vom Preis und verwenden die zurückgegebenen Daten als Diagrammbeschriftungen und die Preise als Diagrammwerte. Und beforeMount(), das heißt bevor unsere Anwendung in die Ansicht eingebunden wird, rufen wir die zuvor erstellte Funktion loadData() auf.

Wenn Sie unsere Anwendung ausführen, sollten Sie die neuen Änderungen an unserem Diagramm wie folgt sehen:

Oben finden Sie Einzelheiten zur Verwendung von RoughViz zur Visualisierung von Skizzendiagrammen in Vue.js. Weitere Informationen zur RoughViz-Visualisierung von Skizzendiagrammen in Vue.js finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!