Reactive Vue.js Wrapper für Google Charts lib
vue-google-charts
Reaktiver Vue.js-Wrapper für die Google Charts-Bibliothek
Inhaltsverzeichnis
Installation
npm i vue-google-charts
Standardimport
Eine Komponente global installieren (als Plugin verwenden):
import Vue from 'vue' import VueGoogleCharts from 'vue-google-charts' Vue.use(VueGoogleCharts)
Lokal in einer Komponente verwenden:
import { GChart } from 'vue-google-charts' export default { components: { GChart } }
Browser
Das Plugin sollte automatisch installiert werden. Wenn nicht, können Sie es mit den folgenden Anweisungen manuell installieren.
Verwendungszweck
Lesen Sie zuerst die Google Charts-Dokumente
Die |_+_| Komponente ist ein Wrapper für die ursprünglichen Google Charts, daher wird davon ausgegangen, dass Sie mit der Verwendung von Vanilla Google Charts ( https://developers.google.com/chart/ ).
Mit |_+_| Paket müssen Sie den Skriptlader nicht verknüpfen und das Google Charts-Paket manuell laden.
Cash-App-Bankname für Direkteinzahlung
Ein weiterer Bonus – reaktive Datenbindung. Ein Diagramm wird automatisch neu gezeichnet, sobald |_+_| , |_+_| und |_+_| Stütze wird geändert.
Einfache Nutzung:
GChart
vue-google-charts
Zusätzliche Pakete laden:
data
Verwenden von |_+_| prop können Sie jede für den Google Charts Loader verfügbare Einstellung angeben: |_+_|, |_+_|, |_+_|, |_+_|.
Sehen Sie mehr auf verfügbare Einstellung
Es gibt auch |_+_| prop, damit Sie eine bestimmte Version laden können, z.B. |_+_|.
Google-Standortfreigabe wird nicht aktualisiert
Sehen Sie mehr auf verfügbare Versionen
Ereignis-Listener hinzufügen:
type
options
Verwenden Sie |_+_| für etwas sehr Brauchbares
Sie können Diagramminstanz- und Diagramm-API-Referenzen abrufen, um ein benutzerdefiniertes Diagramm zu zeichnen:
export default { data () { return { // Array will be automatically processed with visualization.arrayToDataTable function chartData: [ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ], chartOptions: { chart: { title: 'Company Performance', subtitle: 'Sales, Expenses, and Profit: 2014-2017', } } } } }
|_+_| Eigentum
Mit dieser Eigenschaft können Sie ein benutzerdefiniertes Diagrammobjekt außerhalb der Komponente erstellen. |_+_| Eigenschaft ist die Funktion und akzeptiert drei Argumente: |_+_| - der Verweis auf das Diagrammelement, |_+_| - Google-Diagrammbibliothek, |_+_| - Diagramm Typ
Standardmäßig sieht die Funktion so aus:
Was ist Kuchen-Krypto?
settings
Zum Beispiel |_+_| kann verwendet werden, um Materialbalkendiagramme zu erstellen (Materialbalkendiagramme erwarten die Klasse |_+_| anstelle von |_+_|). Sehen: https://codesandbox.io/embed/z699l6oq4p?module=/src/App.vue
Responsives Diagrammverhalten
GCarts reagieren standardmäßig und können ihre Breite auf |_+_| . ändern Veranstaltung. Die Größenänderung ist entprellt und Sie können die Entprellzeit (ms) mit |_+_| . steuern Eigentum:
packages
Wenn Sie für Ihre Diagramme kein reaktionsfähiges Verhalten benötigen, legen Sie |_+_| . fest
Plugin-Entwicklung
Installation
Wenn Sie Ihr Plugin zum ersten Mal erstellen oder klonen, müssen Sie die Standardabhängigkeiten installieren:
language
Anschauen und zusammenstellen
Dadurch wird Webpack im Beobachtungsmodus ausgeführt und die kompilierten Dateien im |_+_| . ausgegeben Mappe.
callback
Verwenden Sie es in einem anderen Projekt
Während der Entwicklung können Sie den Installationsanweisungen Ihres Plugins folgen und es mit dem Projekt verknüpfen, das es verwendet.
Norton-Download mit Produktschlüssel
Im Plugin-Ordner:
mapsApiKey
Im anderen Projektordner:
version
Dadurch wird es in den Abhängigkeiten als Symlink installiert, sodass alle Änderungen am Plugin vorgenommen werden.
Manueller Aufbau
Dadurch wird das Plugin in das |_+_| Ordner im Produktionsmodus.
version='upcoming'
Demos
-
Einfache Bedienung https://codesandbox.io/embed/p7k483o42j?module=/src/App.vue
-
Balkendiagramm für Materialdesign https://codesandbox.io/embed/z699l6oq4p?module=/src/App.vue
-
Blasendiagramm https://codesandbox.io/embed/rmqzv6p4mm?module=/src/App.vue
-
Daten aus Google Tabellen abrufen https://codesandbox.io/embed/yqxxkp32mj?module=/src/App.vue
-
Behandlung von Diagrammereignissen https://codesandbox.io/embed/xlloookqqo?module=/src/App.vue
Google Mail wird in Chrome nicht geladen
Download-Details:
Autor: devstark-com
Download-Link: Den Quellcode herunterladen
Offizielle Website: https://github.com/devstark-com/vue-google-charts
Lizenz: MIT
#vue #vuejs #javascript #webentwicklung