Erstellen Sie mit der SVG Google Charts-API wunderschöne Datenvisualisierungen
- Erforderliche Kenntnisse: JavaScript, PHP und HTML
- Benötigt: Webbrowser und Texteditor
- Projektzeit: 45 min
- Support-Datei
Daten sind ein großes Geschäft im Web. Jeden Tag beim Surfen generieren wir enorme Datenmengen, mit denen Websitebesitzer und Unternehmen alles bestimmen, von der nächsten großen Neugestaltung bis hin zu Strategie- und Werbeausgaben.
Visuell können Daten jedoch sehr langweilig sein. Wenn Sie kein Statistiker sind, können große Datenmengen besonders schwer zu verdauen sein. Als Webdesigner schlägt die Semantik vor, HTML-Tabellen zur Darstellung von Daten zu verwenden, da diese die „Sprache“ darstellen, die am besten zum Markieren von Fakten und Zahlen geeignet ist. Abgesehen von ein paar schönen Rändern und „Zebrastreifen“ -Zeilen bieten uns Tabellen jedoch wenig Möglichkeiten für das Designpotential, das wir benötigen, um das Verständnis der darin enthaltenen Daten zu verbessern.
Aus diesem Grund - und auch aus anderen Gründen - haben die verfügbaren Lösungen zur Erstellung grafischer Diagramme und Diagramme stark zugenommen. Werkzeuge wie das Original Google Image Charts API Erlauben Sie uns, ansonsten langweilige Tabellendaten in visuell reichhaltige Daten umzuwandeln basierte Diagramme, die unsere tabellarischen Daten ergänzen und das Verständnis und das Verständnis für Benutzer und Kunden erleichtern.
01. Eine schöne neue Welt - „HTML5“ -Diagramme
Bis vor kurzem haben die meisten Online-Diagrammtools mithilfe der Tag, den Sie auf Ihrer Webseite einbetten können.
Mit dem Aufkommen von HTML5 stehen uns jedoch einige alternative Technologien zur Verfügung, mit denen wir reichhaltigere, interaktivere Diagramme erstellen können, die uns über die Grenzen statischer Grafiken und Bilder hinausführen. Am beliebtesten sind vielleicht HTML5 Canvas und SVG (Scalable Vector Graphics).
Diagramme
Laut dem Mozilla Developer-Netzwerk ist HTML5 Canvas ein HTML-Element, mit dem Grafiken mithilfe von Skripten gezeichnet werden können. Canvas ist schnell und kann im Gegensatz zu statischen Bildern mithilfe von Skripten dynamisch neu gezeichnet werden. Dies macht es nützlich, um schnell Diagrammvisualisierungen aus HTML-Tabellen zu generieren, und mit cleveren Skripten kann sogar eine grundlegende Interaktivität ermöglicht werden.
Es gibt einige hervorragende Canvas-Diagrammwerkzeuge. Mein besonderer Favorit ist der Das jQuery Visualize-Plug-In der Filament Group Dies nutzt sogar die Magie des Google-Skripts excanvas.js, um sicherzustellen, dass dynamische Diagramme bereits in Internet Explorer 6 in Browsern erstellt werden können.
SVG-Diagramme - eine bevorzugte Lösung
Während Canvas beim Rendern dynamischer Diagramme hervorragende Arbeit leistet, besteht sein Hauptnachteil darin, dass es sich um eine pixelbasierte Grafik-API handelt. Mit Canvas können Sie keine Ereignishandler anhängen oder vorhandene Objekte bearbeiten. Sobald es gezeichnet ist, ist es gezeichnet.
Eine alternative Technologie ist SVG . Obwohl es nicht unbedingt Teil der HTML5-Spezifikation ist, bietet es gegenüber Canvas mehrere Vorteile für Diagramme im Web.
Das Wichtigste dabei ist, dass SVG vektorbasiert ist und mithilfe einer XML-basierten Syntax beschrieben wird. Dies bedeutet, dass ein DOM verwaltet wird, dessen Attribute zu jedem Zeitpunkt im Lebenszyklus der Seite per Skript gelesen und dynamisch aktualisiert werden können. Obwohl mit dem DOM eine Leistungsüberlegung verbunden ist - insbesondere bei der Arbeit mit größeren Dateien - halte ich SVG normalerweise für eine geeignetere Technologie zum Erstellen von Diagrammen im Web ...
... und es scheint, dass Google mir zustimmt!
02. Die Google Charts-API
Google unterhält und entwickelt eine voll funktionsfähige Diagrammbibliothek namens Google Charts API . Es ist äußerst leistungsfähig und als Google gut unterstützt und dokumentiert. Alles in allem ist es eine ausgezeichnete Wahl für Diagramme im Web.
Während die ursprüngliche Version auf Bildern beruhte, nutzt die verbesserte API jetzt die Leistung von HTML5 und SVG, um eine Reihe dynamischer Diagramme zu rendern, die anpassbar sind und komplexe Interaktivität ermöglichen.
Abwärtskompatibel über VML Bei älteren IE-Versionen lassen sich Diagramme auf einer Reihe von Geräten, einschließlich iOS- und Android-Telefonen, gut rendern. Es sind keine Plugins erforderlich!
03. Ein einfaches Diagrammbeispiel
Es ist ziemlich einfach, mit Google Charts zu arbeiten. Dies Demo - basierend auf Original bei den offiziellen Dokumenten - zeigt ein einfaches Kreisdiagramm in Aktion. Schauen Sie sich die Quelle an, bevor Sie fortfahren.
Zum Rendern des Diagramms benötigen wir drei Bibliotheken. Diese werden über geladen Tags, bevor ein benutzerdefinierter Code ausgeführt wird:
- Die Google JSAPI-API
- Die Google Visualization-Bibliothek - google.load (, 'Visualisierung' '1.0' , {'packages': ['corechart']});
- Die Pakete für das Diagramm selbst - google.load ('Visualisierung', '1.0', {'packages': ['corechart'] });
Sobald die erforderlichen Bibliotheken verfügbar sind, verweisen wir auf eine Funktion, die als Rückruf verwendet werden kann, wenn die Bibliotheken vollständig geladen wurden. Dieser Rückruf definiert unsere Daten und zeichnet das Diagramm.
google.setOnLoadCallback (drawChart); // drawChart ist unser Rückruf
Funktion drawChart () {
// Code zum Zeichnen unseres Diagramms (siehe Artikel unten)
}}
Daten definieren
In unserem drawChart () Funktion müssen wir jetzt unsere Daten definieren. Alle Daten, die für unser Diagramm verwendet werden sollen, müssen in eine JavaScript-Klasse namens aufgerufen werden google.visualization.DataTable . Dies ist im Grunde eine Darstellung einer 2D-Tabelle mit Zeilen und Spalten, ähnlich einer HTML-Tabelle.
// Erstelle die Datentabelle.
var data = new google.visualization.DataTable ();
data.addColumn ('string', 'Answer');
data.addColumn ('number', 'Result');
data.addRows ([
['Entwickler', 28],
['Web Designer', 12],
['Designer', 18],
['Web Master', 14],
['Pixel Pusher', 5]
]);
In unserem Beispiel definieren wir eine neue Instanz der Klasse. Wir setzen dann Spalten und Zeilen mit dem addColumn () und Zeile hinzufügen() Methoden zur Verfügung gestellt.
Weitere Informationen zum Vorbereiten und Definieren von Daten finden Sie in den offiziellen Dokumenten.
Diagramm rendern
Nachdem wir unsere Daten definiert haben, legen wir einige grundlegende Konfigurationsoptionen für die Größe und einen Titel für unser Diagramm fest.
// Diagrammoptionen festlegen
var options = {
'title': 'Berufsbezeichnungen für Personen, die im Web arbeiten',
'Breite': 500,
'Höhe': 400
};
Google-Diagramme sind in hohem Maße konfigurierbar. Wir werden diesen Aspekt später in diesem Lernprogramm genauer untersuchen.
// Instanziiere und zeichne unser Diagramm und übergebe einige Optionen.
var chart = new google.visualization.PieChart (document.getElementById ('chart_div'));
chart.draw (Daten, Optionen);
Als nächstes instanziieren wir eine neue Instanz der 'Visualisierung', die wir erstellen möchten (in diesem Beispiel ist dies der Fall Kuchendiagramm ) und nennen seine zeichnen() Methode, die einen Verweis auf das DOM-Element übergibt, in dem unser Diagramm gerendert werden soll, sowie auf die oben konfigurierten Optionen.
Das ist es - unser Diagramm ist in Betrieb.
04. Ein komplexeres Beispiel - Zeichnen von Tweets mithilfe von Flächendiagrammen
Nachdem unser einfaches Beispiel vollständig ist, ist es jetzt an der Zeit, etwas Komplexeres auszuprobieren. Wir werden die Twitter-API verwenden, um Informationen zu meinem Twitter-Stream anzufordern und sie in einem Flächendiagramm anzuzeigen, um die Anzahl der Tweets nach Datum anzuzeigen, das ich in der letzten Woche oder so gesendet habe. Nicht die spannendsten Daten aller Zeiten, aber dennoch etwas Reales, mit dem man arbeiten kann.
Sie können die Demo davon sehen Hier .
05. Ein zugänglicher Ansatz
In unserem einfachen Piechart-Beispiel wurden unsere Daten hergestellt, aber was noch schlimmer ist, alles wurde weggesperrt und im JavaScript definiert. Dies war nicht der zugänglichste Ansatz.
Wie bereits erwähnt, werden Daten am besten in einer HTML-Tabelle dargestellt, da sie Benutzern von Hilfstechnologien zur Verfügung stehen und diese wenigen Geräte von der Google Chart-API nicht unterstützt werden.
Idealerweise sollten unsere Tweet-Daten in einer Seite als HTML-Tabelle verfügbar sein, und wir sollten JavaScript verwenden, um die Informationen zu sammeln und sie zur Verwendung in dynamischen Diagrammen an die Visualisierungsbibliothek zu übergeben.
06. Anfordern und Organisieren der Tweet-Daten
An der Spitze unserer index.php Datei Wir fordern bei der Twitter-API die neuesten 40 Tweets aus meiner Benutzerzeitleiste an (Sie können diese auf Wunsch auf Ihre umstellen). Die JSON-Antwort wird in eine Zeichenfolge eingelesen und dann in ein assoziatives Array analysiert, indem true als zweiter Parameter an die übergeben wird json_decode Funktion.
$ jsonurl = 'http://twitter.com/statuses/user_timeline/get_dave.json?count=40';
$ json = file_get_contents ($ jsonurl, 0, null, null);
$ json_output = json_decode ($ json, true);
Wir müssen wissen, wie viele Tweets an einem bestimmten Tag gesendet wurden, damit wir als nächstes ein Array definieren ( tweet_dates ) deren Schlüssel die verschiedenen sein werden hergestellt in stammt aus unserem Twitter-Stream. Anschließend durchlaufen wir unsere Tweets, vergleichen Zeitstempel und erhöhen den Wert des entsprechenden Schlüssels, um eine Reihe von Tweets zu erstellen, die an jedem Datum gesendet werden.
$ tweet_dates = array ();
$ curr_tweet_date = '';
// Erstellen Sie ein Array mit einer Anzahl von Tweets nach Datum für jeden ($ json_output als $ tweet) {
// Holen Sie sich einen funktionsfähigen Zeitstempel von json
$ tweet_date = date ('d / m / y', strtotime ($ tweet ['created_at']));
// Wenn das Tweets-Datum nicht mit dem vorherigen Tweets-Datum übereinstimmt, starten Sie einen neuen Schlüssel im Array
if ($ curr_tweet_date! = $ tweet_date) {
$ tweet_dates [$ tweet_date] = 1; // füge einen neuen Schlüssel hinzu und setze den Wert auf 1
$ curr_tweet_date = $ tweet_date; // aktuelles Datum einstellen var
} else {// wenn das aktuelle Tweet-Datum mit prev übereinstimmt
$ tweet_dates [$ tweet_date] ++; // Datumsschlüsselwert erhöhen
}}
} // foreach beenden
Einmal umgekehrt (mit array_reverse ), dies gibt uns ein assoziatives Array, das ungefähr so aussehen sollte:
Array
(
[28.03.12] => 7
[29.03.12] => 1
[30.03.12] => 4
[31.03.12] => 1
[02/04/12] => 1
[04/03/12] => 3
[04/04/12] => 2
[04/08/12] => 1
[04/11/12] => 2
[04/12/12] => 3
[13.04.12] => 11
[14.04.12] => 1
)
Im Hauptteil unserer HTML-Seite können wir jetzt dieses Array durchlaufen, um eine HTML-Tabelle mit Spalten für 'Datum' und 'Tweets' zu erstellen.
Mit JavaScript hätten wir fast dasselbe erreichen können, aber die Verwendung eines PHP-basierten Ansatzes stellt sicher, dass die Kerndaten den Benutzern unterstützender Technologien immer als Markup zur Verfügung stehen.
07. Daten aus der HTML-Tabelle ernten
Als nächstes müssen wir die tabellarischen Daten sammeln. Unser functions.js Datei definiert eine Funktion namens Daten bekommen() was wiederum von der aufgerufen wird drawChart () Rückruffunktion zum Abrufen der erforderlichen Daten. Das Ziel dieser Funktion ist es, eine einfache Array-Struktur zu erzeugen, die wir an die übergeben können google.visualization.arrayToDataTable () Methode, die es in das von der Diagramm-API benötigte Format konvertiert.
Es gibt Verschiedene Ansätze zum Erstellen der richtigen Datenformate aber arrayToDataTable () ist für unsere Zwecke am einfachsten, da es weitgehend automatisiert ist.
Das erwartete Format ist ein Array, das eine Reihe von Arrays enthält, von denen jedes eine „Datenzeile“ darstellt. In jeder Zeile befinden sich die für jede Spalte erforderlichen Daten. Spaltenüberschriften werden automatisch als erste 'Zeile' im Array angenommen, sofern nicht anders angegeben.
[
['Datum', 'Tweets'], // Spaltenüberschriften
['04 / 04/2012 ', 25], // Datenzeile
['04 / 04/2012 ', 25] // eine weitere Datenzeile
]]
Das Daten bekommen() Funktion durchläuft jeweils Wir instanziieren eine neue Instanz der Flächendiagramm Diagrammtyp, Weitergabe unserer Daten und einige grundlegende Optionen: neues google.visualization.AreaChart (document.getElementById ('chart_div')); Unser Grunddiagramm zeigt nun ungefähr Folgendes: Es funktioniert, aber ich persönlich würde mich nicht freuen, wenn ich meinen Benutzern oder einem Kunden diese 'out of the box' -Ansicht präsentieren würde. Zum Glück bietet uns Google Charts die wir konfigurieren können, um das Erscheinungsbild unseres Diagramms anzupassen. Um das Diagramm ein wenig präsentabler zu gestalten, habe ich einige Präsentationsoptionen geändert. Die vielleicht wichtigsten Verbesserungen sind: Ich kann Ihnen nur empfehlen, das zu lesen vollständige Liste der möglichen Konfigurationsoptionen Damit können Sie das Diagramm an Ihre eigenen Bedürfnisse anpassen. Mit diesen Optionen sieht unser Diagramm jetzt viel präsentabler aus: Unser Diagramm sieht jetzt gut aus, hat aber immer noch eine feste Größe. Wenn wir eine reaktionsfähige Website erstellen, muss unser Diagramm skaliert werden, damit er der Größe des Containers und der Größe des Ansichtsfensters entspricht. Ich habe festgestellt, dass der beste Weg, dies zu erreichen, darin besteht, eine Neuzeichnung des Diagramms an das zu binden window.resize Veranstaltung. Auf diese Weise wird der Chat beim Ändern der Fenstergröße schnell auf die neue Größe neu gezeichnet. Das Hauptproblem bei diesem Ansatz ist, dass die window.resiz Das Ereignis wird bei jedem Größenänderungsereignis mehrmals ausgelöst. Das wiederholte (und unnötige) Neuzeichnen des Diagramms hat eine Leistungsbeeinträchtigung zur Folge, die ich vermeiden möchte. Um dies zu vermeiden, verwende ich Paul Irishs Excellent Entprelltes Größenänderungs-Plug-In um sicherzustellen, dass das Größenänderungsereignis am Ende des angegebenen Zeitraums nur einmal ausgelöst wird. Dies begrenzt die Anzahl der Neuzeichnungen von Diagrammen pro window.resize . $ (Fenster) .smartresize (Funktion () { Im Finale Demo Wir haben jetzt ein visuell ansprechendes, zugängliches, browserübergreifendes Diagramm, das auch mit dem Ansichtsfenster des Geräts skaliert werden kann. Ich empfehle Ihnen dringend, sich mit dem vertraut zu machen Google Charts API-Dokumente Damit Sie alles, was Sie hier gelernt haben, verbessern und darauf aufbauen können, um Ihre eigenen Diagramme zu erstellen. Ich möchte Ihre Aufmerksamkeit auch auf alternative SVG-basierte Diagrammlösungen wie z Morris.js welches sowohl jQuery als auch verwendet Raphael seine Diagramme zu zeichnen. Dieser Leitfaden ist keineswegs umfassend und ich bin überzeugt, dass es viele Möglichkeiten gibt, das Endergebnis zu verbessern und zu verbessern. Wenn Sie welche kennen, lassen Sie es mich bitte in den Kommentaren wissen. Dave Smith ist Front-End-Designer in der Nähe der wunderschönen Stadt Bath in Großbritannien. Wenn er nicht gerade an neuen und aufregenden Webprojekten arbeitet, spielt er Trompete in allen Bereichen, von Big Band-Jazzgruppen bis hin zu Sinfonieorchestern. Sie können Dave auf Twitter als einholen @get_dave . , liest den Wert von jedem oder und füllt dann die Werte Array, das dem erforderlichen Format entspricht. Unsere Daten können jetzt verwendet werden. 08. Rendern des Flächendiagramms
chart.draw (Daten, Optionen); 09. Es gut aussehen lassen
Reaktionsschnell - ein flexibles Diagramm
chart.draw (Daten, Optionen);
}); Unser letztes Diagramm
Mochte dies? Lese das!
Interessant In Der Welt Des Designs
