Erstellen wunderschöner Diagramme mit Vue.js -Wrappern für chart.js

Erstellen Sie schöne Diagramme mit Vue.js und Diagramm.js

Diagramme sind ein wichtiger Bestandteil moderner Websites und Anwendungen, die dazu beitragen, Informationen zu präsentieren, die im Text schwer auszudrücken sind und es ansonsten schwierig erschweren, die vorhandenen Daten auf leicht zu lesende und verständliche Weise zu verstehen. In diesem Artikel wird gezeigt, wie verschiedene Arten von Diagrammen mit Chart.js und Vue.js. erstellt werden können. Chart.js ist eine einfache und flexible JavaScript -Diagrammbibliothek, mit der Entwickler und Designer verschiedene Arten von Diagrammen mithilfe von HTML5 -Canvas -Elementen zeichnen können. Vue.js ist ein progressives JavaScript -Framework, das wir mit Diagramm.js verwenden werden, um Beispiele für die Darstellung von Graphen zu demonstrieren. Wir werden die Vue CLI verwenden, um das Vue.js -Projekt zu erstellen.

Schlüsselpunkte:

• vue.js Wrapper wie Vue-Chartjs, Vue-Charts und Vue-Chartkick vereinfachen die Integration von Diagramme.js mit Vue-Anwendungen, von denen jede einzigartige Funktionen bietet.
• Vue CLI wird zum Erstellen von VUE.JS -Projekten verwendet, wodurch der Einstellungsvorgang des Erstellens von Diagrammen vereinfacht wird.
• vue-chartjs ermöglicht die Erstellung wiederverwendbarer Diagrammkomponenten, wodurch die Wartbarkeit und Skalierbarkeit von VUE-Anwendungen verbessert wird.
• vue-charts bietet eine Möglichkeit, Diagramme direkt mit Daten aus VUE-Instanzen zu erstellen, ohne dass separate Komponenten erforderlich sind.
• vue-chartkick bietet die einfachste Syntax für die Erstellung von Diagrammern und beinhaltet integrierte Daten-Download-Funktionen, aber es fehlt die Reaktionsfähigkeit.
• Die reaktionsschnelle Funktion in Vue-chartJS ermöglicht Diagramme, Daten in Echtzeit zu aktualisieren, was für die dynamische Datenvisualisierung von entscheidender Bedeutung ist.
Detaillierte Beispiele und Codeausschnitte in der Dokumentation helfen Entwicklern dabei, Diagramme in VUE.JS -Projekten effektiv zu implementieren und anzupassen.

Grafikbibliothek Auswahl:

Vue-Wrapper für verschiedene Diagrammbibliotheken werden im Awesome-Vue-Repository auf GitHub gesammelt. Da wir uns auf Diagramm.js konzentrieren, werden wir uns auf die folgenden Wrapper konzentrieren:

vue-charts
vue-chartjs
vue-chartkick

Wir werden diese Wrapper verwenden, um zu demonstrieren, wie verschiedene Arten von Diagrammen erstellt werden und die einzigartigen Funktionen einführen, die sie jeweils anbieten. Der Quellcode für dieses Tutorial ist auf GitHub verfügbar.

Projekte mit Vue CLI: erstellen

Installieren Sie zuerst Vue CLI mit dem folgenden Befehl:

<code class="language-bash">npm install -g @vue/cli</code>

Verwenden Sie dann den folgenden Befehl, um das Projekt zu erstellen:

<code class="language-bash">vue create chart-js-demo</code>

Folgen Sie dem Assistenten, um die folgenden Funktionen auszuwählen: Babel, Router, Eslint, nur mit Fehlerverhütung, FINT auf Save.

Als nächstes installieren Sie Chart.js und verschiedene Wrapper:

<code class="language-bash">cd chart-js-demo
npm install chart.js chartkick hchs-vue-charts vue-chartjs vue-chartkick</code>

Führen Sie die Anwendung aus:

<code class="language-bash">npm run serve</code>

Grundlegende Einstellungen:

Erstellen Sie die folgende Datei:

<code class="language-bash">touch src/views/{VueChartJS.vue,VueChartKick.vue,VueCharts.vue}
touch src/components/{LineChart.vue,BarChart.vue,BubbleChart.vue,Reactive.vue}</code>

Ordner

, src/views/About.vue und src/components/HelloWorld.vue löschen. src/assets

Fügen Sie eine Route hinzu:

🎜> Datei ändern und Route hinzufügen:

src/router.js

<code class="language-javascript">// ... (导入语句) ...

export default new Router({
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/chartjs', name: 'VueChartJS', component: VueChartJS },
    { path: '/chartkick', name: 'VueChartKick', component: VueChartKick },
    { path: '/charts', name: 'VueCharts', component: VueCharts }
  ]
})</code>

Navigation hinzufügen:

ändern

Dateien, Fügen Sie Navigation und Stile hinzu:

src/App.vue

<code class="language-vue"><template>
  <!-- ... (导航代码) ... -->
</template>

<style>
  /* ... (样式代码) ... */
</style></code>

Home Component:

modifizieren Sie src/views/Home.vue Datei:

<code class="language-bash">npm install -g @vue/cli</code>

Bulma hinzufügen:

Bulma CSS -Framework in das public/index.html -Tag der -Datei:

hinzufügen:

<code class="language-bash">vue create chart-js-demo</code>

(Der folgende Inhalt führt weiterhin vor, wie Vue-ChartJs, Vue-Charts und Vue-Chartkick verwendet werden, um verschiedene Arten von Diagrammen zu erstellen. Aufgrund von Platzbeschränkungen, spezifischen Code und detaillierten Schritten werden hier weggelassen. Weitere Informationen finden Sie im Originaltext für den vollständigen Code und die Schritte

Vergleich der Grafikbibliothek:

• vue-chartjs: leistungsstark, flexibel und unterstützt reaktionsschnelle Merkmale, aber relativ komplexe Konfiguration.
• Vue-Charts: Einfach eingerichtet, keine gesetzlichen Komponenten erstellen, unterstützt reaktionsschnelle Funktionen.
• Vue-Chartkick: Am einfachsten zu verwenden, unterstützt die Downloads von Diagrammern, fehlt jedoch integrierten Reaktionsfunktionen.

Schlussfolgerung:

In diesem Artikel wird verschiedene Vue -Wrapper für chart.js eingeführt und zeigt, wie sie zum Erstellen von Diagrammen verwendet werden. Der Quellcode ist auf GitHub verfügbar.

(Der folgende Inhalt ist der ursprüngliche FAQS -Teil, und aufgrund von Platzbeschränkungen wird er hier weggelassen. Weitere Informationen finden Sie im Originaltext für den vollständigen FAQs -Inhalt.)

Das obige ist der detaillierte Inhalt vonErstellen wunderschöner Diagramme mit Vue.js -Wrappern für chart.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!