Interaktive JavaScript -Diagramme verwenden Daten von Google Sheets

Key Takeaways

• interaktive JavaScript -Diagramme können mit Daten von Google Sheets erstellt werden, die dynamische Aktualisierungen anbieten, wenn Änderungen an den Tabellenkalkulationsdaten vorgenommen werden.
• Der Prozess beinhaltet das Exportieren von Daten aus Google -Blättern als JSON, das Abrufen dieser Daten über AJAX, die Umstrukturierung der Daten, um dem erforderlichen Format zu entsprechen, ein Diagramm mit einem Tool wie Fusioncharts zu erstellen und das Diagramm an die spezifischen Anforderungen anzupassen.
Fusioncharts akzeptiert JSON -Daten als Array von Objekten, die Etiketten- und Wertschlüssel enthalten, und das Diagramm kann in Bezug auf Typ, Höhe, Breite, Beschriftungen und Datenquelle angepasst werden.
Während Google Sheets eine bequeme und zugängliche Datenquelle ist, können auch andere Quellen zum Erstellen von JavaScript-Diagrammen verwendet werden, und die Daten können in Echtzeit mit einem Wahlmechanismus aktualisiert werden.

Dieser Artikel wurde von Jeff Smith Peer überprüft. Vielen Dank an alle Peer -Rezensenten von SitePoint, die SitePoint -Inhalte so gut wie möglich gemacht haben!

Treffen Sie meinen Freund Jenny. Sie hat kürzlich angefangen, Websites zu codieren. Sie liebte ihren Job und war sehr glücklich, bis sie Steve traf, der den Ruf hat,, sagen wir, keine sehr lockere Kunde.

Steve hatte viele Daten in einer Tabelle und wollte das auf seiner Website anzeigen. Unser Freund (jetzt ist Jenny auch Ihr Freund!) Hat vorgeschlagen, dass Steve die Diagramme in Excel macht und sie als Bilder auf der Website hochladen.

Aber Steve als Steve, er wollte, dass die Diagramme interaktiv sind. Nicht nur das, er wollte auch, dass die Diagramme aktualisiert werden, wenn er die Daten in seiner Tabelle geändert hat.

Jenny wusste nicht, wie sie dieses Problem angehen sollte, also kam sie zu mir. Und als die gute Freundin, die ich bin, gab ich ihr den Rat:

Bitten Sie Ihren Kunden zuerst, seine Daten in Google Sheets zu verschieben (denn das ist es, was alle coolen Leute heutzutage tun). Dann können wir die von ihm benötigten Funktionen problemlos implementieren - interaktive JavaScript -Diagramme und dynamische Aktualisierungen.

Ihr Klient stimmte (zum Glück!) Und Jenny und ich haben den Rest der Lösung codiert. Aber wie? Nun, das wird Ihnen dieses Tutorial beibringen.

Ich habe dieses Tutorial in fünf leicht zu befolgende Schritte unterteilt:

Daten exportieren von Google Sheets
JSON von Google Sheets über Ajax
2. abrufen
Umstrukturierung der Daten
Erstellen eines Diagramms mit Fusioncharts.
Anpassen des Diagramms

ohne weiteres, lasst uns eintauchen!

Google Sheets -Daten als JSON

exportieren

Bevor Sie sich mit dem Exportieren von Daten befassen, erstellen wir zunächst ein Blatt. Angenommen, Sie haben ein Google -Konto, können Sie dies tun, indem Sie auf die Google Sheets -Seite gehen und auf die

-Beufe auf eine neue Tabelle starten. Erstellen Sie in der Tabelle, die sich öffnet, zwei Spalten: Schauspieler und Einkommen . Füllen Sie dann Ihr neu erstelltes Blatt mit einigen Daten. Ich habe meine von hier aus genommen: Die weltweit am besten bezahlten Schauspieler 2015.

Wie Sie sehen können, enthält die linke Spalte Beschriftungen für unser Diagramm, die rechten Werte, die diesen Beschriftungen entsprechen. Für diejenigen unter Ihnen zu Hause können Sie hier eine Kopie dieses Blattes abrufen (zu Datei > Erstellen Sie eine Kopie ).

Die in Google -Blätter verfügbaren Daten können in mehrere Formate wie JSON, XML usw. exportiert werden. Sobald sie in eines dieser Formate exportiert werden können, kann dies einfach über das Web zugegriffen werden.

Um Ihr Dokument für das Web zu öffnen, müssen Sie die folgenden Änderungen an den Dokumenteinstellungen vornehmen:

• Stellen Sie die Freigabe des Dokuments entweder auf im Web oder an, oder , jeder mit dem Link . Um dies zu erreichen, klicken Sie in der oberen rechten Ecke auf die Schaltfläche Share und klicken Veröffentlichen Sie das Dokument im Web. Diese Option ist unter
Datei
• > zum Web verfügbar
Mit diesen beiden vorgenommenen Änderungen können auf die Daten im Dokument im JSON -Format zugegriffen werden: https://spreadsheets.google.com/feeds/List/spreadsheet/od6/public/basic?alt=json

Sie müssen die Tabelle durch die ID Ihres Google -Blattes ersetzen, die in unserem Fall 1AOZ_GCPYOMIMND1N_MEYNOP8TJ0FCXPP1AOUHCPWZO ist. Sie können die Ergebnisse hier sehen.

Verwenden Sie JQuery, um JSON von Google Sheets zu holen

Wir werden die Get () -Methode von JQuery verwenden, um die Daten von Google Sheets abzurufen. Sie können JQuery von einem CDN wie gezeigt einfügen:

<span><span><span><script</span> type<span>="text/javascript"</span> src<span>="https://code.jquery.com/jquery-1.12.0.min.js"</span>></span><span><span></script</span>></span>
</span>

mit dem hinzugefügten <script> -Tag $ .get auf der von uns erstellten Tabellen -URL. <p> <pre ><span >var spreadsheetId = "1Aoz_GcPYoEIMMNd1N_meYNOp8TJ0fCXpp1AoUhCpwZo", url <span >= "https://spreadsheets.google.com/feeds/list/" + spreadsheetId <span >+ <span >"/od6/public/basic?alt=json"; $<span >.get({ <span >url: url, <span >success: function(response) { <span >console.log(response); <span >} <span >}); Der obige JQuery -Code stellt eine AJAX -Anfrage an die Google Sheets -URL und beim erfolgreichen Abnehmen der Daten ruft die Erfolgsfunktion auf. Diese Funktion protokolliert die vom Server zurückgegebenen Daten in die Konsole. Ich würde Sie ermutigen, dieses Skript auszuführen und einen Moment Zeit zu nehmen, um genau zu untersuchen, was zurückgegeben wird. <p> Umstrukturierung der Daten <h2 > Die JSON -Daten von Google Sheets müssen ein wenig umstrukturiert werden, um das von unserer Visualisierungsbibliothek akzeptierte Datenformat zu entsprechen. Für dieses Tutorial verwenden wir Fusioncharts. <p> Fusioncharts akzeptiert JSON -Daten als Array von Objekten, die Etiketten- und Wertschlüssel enthalten. So sieht es aus: <p> <pre ><span >[{ <span >"label": "Robert Downey Jr.", <span >"value": "80" <span >} <span >...] Um dies zu erreichen, müssen wir den folgenden Code -Stück im Erfolgsruf der JQuery Get -Funktion ausführen, die wir zuvor definiert haben. <p> <pre ><span >var data = response.feed.entry, len <span >= data.length, i <span >= 0, parsedData <span >= []; <span >for (i = 0; i < len; i++) { parsedData<span >.push({ <span >label: data[i].title.$t, <span >value: data[i].content.$t.replace('Income: ', '') <span >}); <span >} Was wir hier tun, ist das Iterieren jedes Google Sheet -Datenobjekts, das als Antwort vorhanden ist. Dann speichern wir sie in einer neuen Parseddata, die im Diagramm verwendet wird. <p><p> Das Etikett ist im Titel erhältlich. $ T Key und der Wert in Inhalt erhältlich. $ T Schlüssel des Datenobjekts. Der Wert enthält jedoch den Spaltennamen des Blatts, der nicht erforderlich ist, daher streifen wir ihn aus. Für die Visualisierung ist der Rest der Daten in der Google -Blatt nicht erforderlich. <p> Das ParsedData -Array enthält nun Daten in einem Format, das von Fusioncharts verstanden wird, und wir können mit der Erstellung der Visualisierung fortfahren. <h2 > Schritt 3: Erstellen des Diagramms <p> Jetzt können wir mit unseren Daten bereit und zugänglich sind, wir können zum Erstellen von Diagrammen übergehen. Das Erstellen des Diagramms umfasst die folgenden Schritte: <ul> <li> Erstellen eines <div> in dem in das das Diagramm gerendert wird. <li> Erstellen einer Fusionscharts -Instanz mithilfe der analysierten Daten aus dem Google -Blatt. <li> Aufrufen Sie die Render -Methode in der Fusioncharts -Instanz, um sie in der Div. zu rendern <p> In dem Markup schließen wir die Fusioncharts -Bibliothek über ein CDN ein: <pre ><span ><span ><span ><script type<span >="text/javascript" src<span >="https://code.jquery.com/jquery-1.12.0.min.js"><span ><span ></script>

sowie ein enthaltendes Element für das Diagramm. Dies kann einen Ortshaltertext enthalten, der vor dem Diagramm angezeigt wird.

var spreadsheetId = "1Aoz_GcPYoEIMMNd1N_meYNOp8TJ0fCXpp1AoUhCpwZo",
    url = "https://spreadsheets.google.com/feeds/list/" +
          spreadsheetId +
          "/od6/public/basic?alt=json";

$.get({
  url: url,
  success: function(response) {
    console.log(response);
  }
});


 Um tatsächlich ein grundlegendes horizontales Balkendiagramm in #Chart-Container zu erstellen und zu rendern, werden wir dem Erfolgs-Callback den folgenden Code hinzufügen: 
[{
  "label": "Robert Downey Jr.",
  "value": "80"
}
...]

 Schauen wir uns einige der Konfigurationsoptionen an, die wir für das Diagramm definiert haben: 

 Typ: Definiert den Diagrammtyp, den wir in diesem Beispiel aufnehmen - bar2d. 
 Höhe: Höhe des Diagramms in Pixeln. 
 Breite: Breite des Diagramms. 
 Diagramm: Hier können wir Dinge wie Titel, Beschriftungen für beide Achsen, ein Wertpräfix usw. festlegen 
 Daten: Die Daten, aus denen das Diagramm erstellt wird. 

 Und hier ist eine Demo von dem, was wir bisher haben: 
 Siehe den Stift JavaScript -Diagramme Google Sheets von SitePoint (@sinepoint) auf CodePen. 

 Anpassen des Diagramms 
 Während die obige Demo funktioniert, sieht es vielleicht ein wenig generisch aus. Zum Glück können Sie fast jeden Aspekt des Erscheinungsbilds einer Tabelle anpassen. Fusioncharts hat eine hervorragende Dokumentation, die ich vorschlage, dass Sie sich ansehen. 
 Hier ist das gleiche Diagramm, das so angepasst wurde,
 Siehe die Pen JavaScript -Diagramme Google Sheets (2) von SitePoint (@sinepoint) auf CodePen. 


 Schlussfolgerung 

 Wie Sie gesehen haben, ist es nicht so schwierig, ein Live -Diagramm von Google Sheets zu erstellen. Live-JavaScript-Diagramme können auch auch für komplexe Diagrammtypen generiert werden, wie Multi-Serie-Diagramme. Das einzige, was für komplexe Diagramme ausgearbeitet werden muss, ist die Umstrukturierung der Daten von Google Sheets in das vom Diagramm akzeptierte Format. Alles andere bleibt gleich. 

 Weitere Informationen zur Arbeit mit Google Sheets -Daten finden Sie in der Dokumentation von Google. 
 Ich habe ein grundlegendes Balkendiagramm für dieses Tutorial verwendet. Wenn Sie jedoch etwas anderes möchten, lesen Sie hier verschiedene Diagrammtypen. 

 PS: Ich werde im Kommentarbereich unten herumhängen. Schauen Sie also gerne alle Fragen, die Sie zu diesem Tutorial haben. Ich helfe gerne! 



 häufig gestellte Fragen (FAQs) zu interaktiven JavaScript -Diagrammen mit Daten von Google Sheets 



 Wie kann ich interaktive JavaScript -Diagramme mit Daten von Google Sheets erstellen? Zuerst müssen Sie Ihre Google Sheets -API einrichten. Dies beinhaltet das Erstellen eines neuen Projekts in der Google Cloud -Konsole, das Ermöglichen der API von Blättern und das Erstellen von Anmeldeinformationen. Sobald Sie Ihren API -Schlüssel haben, können Sie sie verwenden, um auf Ihre Google Sheets -Daten zuzugreifen. Als nächstes müssen Sie Ihr Diagramm mit JavaScript erstellen. Dafür stehen mehrere Bibliotheken zur Verfügung, wie z. B. Chart.js, Highcharts und Google -Diagramme. Sie können diese Bibliotheken verwenden, um eine Vielzahl von Diagrammtypen zu erstellen, einschließlich Balkendiagramme, Zeilendiagramme und Kreisdiagramme. Schließlich müssen Sie Ihr Diagramm mit Ihren Google Sheets -Daten verbinden. Dies beinhaltet das Abrufen der Daten von Google Sheets mithilfe des API -Schlüssels, das Parsen der Daten in ein Format, das Ihre Diagrammbibliothek verstehen kann, und dann das Diagramm mit den Daten zu aktualisieren. Diagramme, die Daten von Google Sheets verwenden? Wenn Ihr API -Schlüssel nicht korrekt eingerichtet ist, können Sie möglicherweise nicht auf Ihre Google Sheets -Daten zugreifen. Wenn Sie Probleme haben, die Daten zu holen, kann dies auf Netzwerkproblemen oder Probleme mit der Google Sheets -API zurückzuführen sein. Wenn Sie Probleme haben, die Daten zu analysieren, kann dies daran liegen, dass die Daten in einem Format bestehen, das Ihre Diagrammbibliothek nicht verstehen kann. Um diese Probleme zu beheben, sollten Sie Ihren API -Schlüssel überprüfen, Ihre Netzwerkverbindung testen und sicherstellen, dass Ihre Daten in einem kompatiblen Format enthalten. >  Ja, Sie können neben Google Sheets andere Datenquellen für Ihre JavaScript -Diagramme verwenden. Die meisten Diagrammbibliotheken, einschließlich Chart.js, Highcharts und Google -Diagramme, können Daten in verschiedenen Formaten akzeptieren, darunter JSON, CSV und XML. Sie können diese Daten aus einer Vielzahl von Quellen abrufen, einschließlich Datenbanken, APIs und lokalen Dateien. Die Verwendung von Google Sheets als Datenquelle hat jedoch mehrere Vorteile, einschließlich einfacher Einrichtung, Echtzeit-Updates und der Möglichkeit, Daten zu teilen und zusammenzuarbeiten. 
 Wie kann ich mein JavaScript-Diagramm in Echtzeit mit Daten von Google Sheets aktualisieren? Dies beinhaltet regelmäßig die Daten von Google Sheets und aktualisiert das Diagramm mit den neuen Daten. Sie können dies mithilfe der SetInterval -Funktion von JavaScript tun, mit der Sie eine Funktion in bestimmten Intervallen ausführen können. In der Funktion würden Sie die Daten von Google Sheets abrufen, sie in ein Format analysieren, das Ihre Diagrammbibliothek verstehen kann, und dann das Diagramm mit den neuen Daten aktualisieren. ?  
 Ja, Sie können Ihr interaktives JavaScript -Diagramm mit anderen teilen. Die meisten Diagrammbibliotheken, einschließlich Chart.js, Highcharts und Google -Diagramme, ermöglichen es Ihnen, Ihr Diagramm als Bild oder PDF zu exportieren. Sie können diese Datei dann mit anderen teilen. Wenn Ihr Diagramm auf einer Webseite gehostet wird, können Sie die URL der Seite einfach freigeben. Wenn Sie Google Sheets als Datenquelle verwenden, können Sie auch das Google Sheets -Dokument mit anderen freigeben, sodass sie die Daten anzeigen und bearbeiten können. >  Sie können das Erscheinungsbild Ihres JavaScript -Diagramms mit den Optionen Ihrer Diagrammbibliothek anpassen. Die meisten Diagrammbibliotheken, einschließlich Chart.js, Highcharts und Google -Diagramme, können Sie eine Vielzahl von Aspekten Ihres Diagramms anpassen, einschließlich der Farben, Schriftarten, Beschriftungen und Tooltips. Sie können auch interaktive Funktionen wie Zooming und Schwung sowie Animationen hinzufügen. 
  Wie kann ich meinem JavaScript -Diagramm Interaktivität hinzufügen? in Ihrer Diagrammbibliothek. Die meisten Diagrammbibliotheken, einschließlich Chart.js, Highcharts und Google -Diagramme, können Sie interaktive Funktionen wie Tooltips, Zooming und Schwenk sowie Animationen hinzufügen. Sie können Ihrem Diagramm auch Ereignishörer hinzufügen, sodass Sie eine Funktion ausführen können, wenn der Benutzer auf eine bestimmte Weise mit dem Diagramm interagiert, z. B. auf einen Datenpunkt klicken. App? 
  Ja, Sie können JavaScript -Diagramme in Ihrer mobilen App verwenden. Die meisten Diagrammbibliotheken, einschließlich Chart.js, Highcharts und Google -Diagramme, sind mit mobilen Geräten kompatibel. Möglicherweise müssen Sie jedoch einige Anpassungen vornehmen, um sicherzustellen, dass Ihr Diagramm auf kleineren Bildschirmen korrekt angezeigt wird. Dies kann die Anpassung der Größe des Diagramms, des Layouts der Elemente und der Touch -Interaktionen beinhalten. Diagramm mit den Entwickler -Tools in Ihrem Webbrowser. Mit diesen Tools können Sie die Elemente Ihres Diagramms überprüfen, das Konsolenprotokoll anzeigen und Ihren JavaScript -Code durchlaufen. Wenn Sie Probleme mit Ihren Google Sheets -Daten haben, können Sie auch den Google Sheets API Explorer verwenden, um Ihre API -Anfragen zu testen. 
 Wie kann ich die Leistung meines JavaScript -Diagramms optimieren? Funktionen Ihrer Diagrammbibliothek. Wenn Sie große Datenmengen abrufen, können Sie Ihr Diagramm verlangsamen. Versuchen Sie daher, nur die benötigten Daten abzurufen. Sie können Ihren JavaScript -Code auch optimieren, indem Sie unnötige Berechnungen vermeiden und effiziente Algorithmen verwenden. Die meisten Diagrammbibliotheken, einschließlich Chart.js, HighCharts und Google -Diagramme, bieten auch Leistungsfunktionen wie fauler Laden und Hardwarebeschleunigung. 
Das obige ist der detaillierte Inhalt vonInteraktive JavaScript -Diagramme verwenden Daten von Google Sheets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!