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
- abrufen Umstrukturierung der Daten
- Erstellen eines Diagramms mit Fusioncharts.
- Anpassen des Diagramms
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> type<span >="text/javascript"</script></span> src<span>="https://code.jquery.com/jquery-1.12.0.min.js"</span>></span><span><span></span>></span> </span>mit dem hinzugefügten
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
SublimeText3 Linux neue Version
SublimeText3 Linux neueste Version
ZendStudio 13.5.1 Mac
Leistungsstarke integrierte PHP-Entwicklungsumgebung
SecLists
SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.
WebStorm-Mac-Version
Nützliche JavaScript-Entwicklungstools
PHPStorm Mac-Version
Das neueste (2018.2.1) professionelle, integrierte PHP-Entwicklungstool
