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!