Erfahren Sie, wie Sie Liniendiagramme in Ihren Apps einfach verwenden können, um Daten darzustellen, die sich im Laufe der Zeit ändern. Liniendiagramme können Muster wie Aufwärtstrends und Abwärtstrends visuell darstellen.
In diesem Beitrag erfahren Sie, wie Sie den LineChart verwenden Komponente der Kendo-Benutzeroberfläche für Vue. Liniendiagramme werden verwendet, um Daten darzustellen, die sich im Laufe der Zeit ändern. Wir werden ein Liniendiagramm verwenden, um Kryptowährungsdaten grafisch darzustellen. Wir haben uns für Kryptowährungen entschieden, weil die grafische Darstellung von Finanzdaten ein guter Anwendungsfall für ein Liniendiagramm ist. Mit Liniendiagrammen können Sie Muster in Daten wie Aufwärtstrends und Abwärtstrends erkennen. Der Preis von Kryptowährungen steigt und fällt regelmäßig, sodass Sie die Daten in einem Liniendiagramm darstellen können, um festzustellen, in welche Richtung der Trend geht.
Natürlich kann ein Liniendiagramm auch für andere Datentypen wie Wetter und Gesundheit verwendet werden. Sie können die Temperatur im Laufe der Zeit oder den Blutdruck einer Person im Laufe der Zeit vergleichen.
Als nächstes zeigen wir, wie man ein Liniendiagramm erstellt, das den wöchentlichen Preis von Bitcoin mit einer lokalen Datenquelle zeigt. Dann erstellen wir ein Liniendiagramm, das das tägliche Volumen für die Währung Dash unter Verwendung einer Remote-Datenquelle zeigt.
Erste Schritte
Um unser Projekt zu initialisieren, verwenden wir das Vue webpack-simple-Template. In unserem Projekt installieren wir die Abhängigkeiten, die die Kendo-Benutzeroberfläche, das Standarddesign, den Charts-Wrapper und den DataSource-Wrapper sind. Die folgenden Befehle installieren die Pakete.
npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default
npm install --save @progress/kendo-charts-vue-wrapper
npm install --save @progress/kendo-datasource-vue-wrapper
Innerhalb der main.js Datei importieren wir die Kendo-Benutzeroberfläche, das Design, das Diagramm und die Datenquelle. Wir registrieren das Diagramm und die Datenquelle global mit dem ChartInstaller und DataSourceInstaller entsprechend und fügen Sie sie der Komponentenliste hinzu.
import Vue from 'vue'
import App from './App.vue'
import '@progress/kendo-ui'
import '@progress/kendo-theme-default/dist/all.css'
import { Chart, ChartInstaller } from '@progress/kendo-charts-vue-wrapper'
import { DataSource, DataSourceInstaller } from '@progress/kendo-datasource-vue-wrapper'
Vue.use(ChartInstaller)
Vue.use(DataSourceInstaller)
new Vue({
el: '#app',
components: {
Chart,
DataSource
},
render: h => h(App)
})
Bindung an lokale Daten
Die Daten, die wir verwenden werden, stammen von der Website CoinMarketCap. Die Website enthält Informationen zu über 2.000 Kryptowährungen, einschließlich Marktkapitalisierung, Preis, Angebot und Volumen. Es wurde ausgewählt, weil sie wöchentlich historische Schnappschüsse aller Kryptowährungen aufbewahren. Dies gibt uns die Informationen, die wir benötigen, um ein Diagramm zu erstellen, damit wir vergleichen können, wie sich der Preis von Bitcoin im Laufe der Zeit verändert hat. Wir betrachten 10 Datenpunkte aus dem Zeitraum vom 14. Oktober 2018 bis zum 16. Dezember 2018.
Wir werden der Vorlage in App.vue eine Diagrammkomponente hinzufügen Datei. Innerhalb der Komponente setzen wir den Titel des Diagramms auf „Bitcoin-Preise“, positionieren die Legende am unteren Rand des Diagramms und fügen QuickInfos hinzu, wenn Sie mit der Maus über die Markierungen fahren. Die Serien, Kategorien und Wertachsen werden in unseren Daten definiert. Das Folgende ist die aktualisierte Vorlage:
<template>
<div id="app">
<kendo-chart
:title-text="'Bitcoin Prices'"
:legend-position="'bottom'"
:tooltip-visible="true"
:tooltip-template="'$#: value #'"
:series="series"
:category-axis-categories="categories"
:value-axis="valueAxis">
</kendo-chart>
</div>
</template>
Für die Serie geben wir den Typ, den Namen und die Daten an. Der Serientyp ist eine Linie. Standardmäßig ist es eine Leiste. Der Name wird in der Legende verwendet, um eine Serie zu identifizieren. Wenn unser Diagramm mehrere Reihen hätte, wären sie unterschiedlich gefärbt und wir würden uns auf den Namen verlassen, um eine Reihe von einer anderen zu unterscheiden. Die Daten sind die Werte, die grafisch dargestellt werden. Dies sind unsere Bitcoin-Preise. Die Kategorien sind die Daten. Sie sind in der Reihenfolge vom frühesten bis zum spätesten aufgelistet und entsprechen jedem Wert in den Daten. Die Werteachse wurde konfiguriert, um das Erscheinungsbild der Beschriftungen anzupassen. Das Folgende ist das aktualisierte Skript:
<script>
export default {
name: 'app',
data () {
return {
series: [{
type: 'line',
name: 'Price',
data: [6316.77, 6513.70, 6477.32, 6367.24, 6402.62, 5594.97, 3768.79, 4191.90, 3493.53, 3272.31],
}],
categories: ['10/14/2018','10/21/2018','10/28/2018','11/04/2018','11/11/2018','11/18/2018','11/25/2018','12/02/2018', '12/09/2018', '12/16/2018'],
valueAxis: [{
labels: {
format: "${0}"
}
}]
}
}
}
</script>
Und hier sind die aktualisierten Stile:
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
margin-top: 60px;
}
</style>
Bindung an entfernte Daten
Die Daten für unser nächstes Beispiel stammen von der Kraken-API. Kraken ist eine Börse, an der Sie Kryptowährungen kaufen und verkaufen können. Wir werden seit dem 1. Dezember 2018 eine Anfrage an ihre API stellen, um Daten für das Währungspaar Dash/USD zu erhalten. Das Intervall wird täglich sein und wir sind daran interessiert, das Volumen und das Datum zu erhalten. Das Volumen wird auf der Wertachse grafisch dargestellt und das Datum wird auf der Kategorieachse grafisch dargestellt. Dies ist die URL zum Abrufen der Daten:
https://api.kraken.com/0/public/OHLC?pair=dashusd&interval=1440&since=1543622400
Wir speichern die Daten in einer Datei und geben eine relative URL als transport-read-url an . Der Datentyp ist JSON. Da die Daten nicht genau so formatiert sind, wie wir sie brauchen, müssen wir auch die Antwort parsen. Dies ist die der Vorlage hinzugefügte DataSource-Komponente:
<kendo-datasource
ref="dataSource"
:transport-read-url="'./src/OHLC.json'"
:transport-read-data-type="'json'"
:schema-parse="schemaParse">
</kendo-datasource>
In der Diagrammkomponente fügen wir einen Verweis auf die Datenquelle hinzu. Wir ändern den Titel in „Dash-Preise“. Wir entfernen den category-axis-categories -Attribut und ersetzen Sie es durch category-axis Attribut. Das Folgende ist die aktualisierte Komponente:
<kendo-chart
:data-source-ref="'dataSource'"
:title-text="'Dash Prices'"
:legend-position="'bottom'"
:tooltip-visible="true"
:tooltip-template="'$#: value #'"
:series="series"
:category-axis="categoryAxis"
:value-axis="valueAxis">
</kendo-chart>
Für die Reihendaten definieren wir, anstatt die Daten zu definieren, das zu verwendende Feld aus der Datenquelle. Das ist der Volume aufstellen. Gleiches gilt für die Kategorienachse. Wir legen das zu verwendende Feld aus der Datenquelle fest. Dies wird die Date sein aufstellen. Zuletzt fügen wir eine Methode hinzu, schemaParse , um das Parsen der Daten zu verarbeiten. Dies ist das aktualisierte Skript:
<script>
export default {
name: 'app',
data () {
return {
series: [{
type: 'line',
name: 'Price',
field: 'Volume'
}],
categoryAxis: {
field: 'Date'
},
valueAxis: {
labels: {
format: '${0}'
}
}
}
},
methods: {
schemaParse: function(response) {
return response.result.DASHUSD.map(function(arr) {
let utcSeconds = arr[0];
let date = new Date(0);
date.setUTCSeconds(utcSeconds);
return {
Date: date,
Volume: arr[6]
}
})
}
}
}
</script>
Hier ist der Link zum endgültigen Projekt:https://github.com/albertaw/kendoui-linechart
Zusammenfassung
Ein Diagramm besteht aus einer Reihe, einer Kategorieachse und einer Werteachse. Optional kann ein Diagramm einen Titel, eine Legende und QuickInfos haben. Das Reihenattribut sind die Werte, die grafisch dargestellt werden. Beim Binden unseres Diagramms an eine lokale Datenquelle haben wir der Reihe ein Array von Werten hinzugefügt. Beim Binden an eine entfernte Datenquelle haben wir das Feld in der Reihe angegeben. Die Kategorieachse zeigt die Zeiträume in unseren Beispielen. Es ist die Achse, die horizontal auf dem Diagramm verläuft. Bei Verwendung einer lokalen Datenquelle wurden die Kategorien mit dem category-axis-categories definiert Attribut. Bei einer entfernten Datenquelle wurde das Feld im category-axis definiert Attribut. Die Werteachse zeigt die Werte der Datenpunkte. Es verläuft vertikal auf dem Diagramm.
In unserem nächsten Beitrag werden wir weiter mit Diagrammen arbeiten - bleiben Sie dran.
Ressourcen
- Projekt-Repo
- Datenquellenübersicht
- Diagrammübersicht
- Vue.js Webpack-einfache Vorlage
- Historische Daten von CoinMarketCap
- Kraken-API
Probieren Sie die Kendo-Benutzeroberfläche selbst aus
Möchten Sie die Vorteile der über 70 vorgefertigten Kendo-UI-Komponenten wie Grid oder Scheduler nutzen? Sie können noch heute mit einer kostenlosen Testversion von Kendo UI for Vue beginnen und schneller mit der Entwicklung Ihrer Apps beginnen.
Testversion der My Kendo-Benutzeroberfläche starten
Angular-, React- und jQuery-Versionen
Suchen Sie nach einer UI-Komponente zur Unterstützung bestimmter Frameworks? Sehen Sie sich Kendo UI for Angular, Kendo UI for React oder Kendo UI for jQuery an.
Ressourcen
- Kendo-Benutzeroberfläche für Vue-Dokumente und -Demos
- Vue.js Webpack-einfache Vorlage
- Kendo-UI-Online-Editor