Google Charts - Kurzanleitung
Google Chartsist eine reine JavaScript-basierte Diagrammbibliothek, die Webanwendungen durch Hinzufügen interaktiver Diagrammfunktionen verbessern soll. Es unterstützt eine Vielzahl von Diagrammen. Diagramme werden mit SVG in Standardbrowsern wie Chrome, Firefox, Safari und Internet Explorer (IE) erstellt. In Legacy IE 6 wird VML zum Zeichnen der Grafiken verwendet.
Eigenschaften
Im Folgenden finden Sie die wichtigsten Funktionen der Google Charts-Bibliothek.
Compatability - Funktioniert problemlos auf allen gängigen Browsern und mobilen Plattformen wie Android und iOS.
Multitouch Support- Unterstützt Multitouch auf Touchscreen-basierten Plattformen wie Android und iOS. Ideal für iPhone / iPad und Android-basierte Smartphones / Tablets.
Free to Use - Open Source und kann kostenlos für nichtkommerzielle Zwecke verwendet werden.
Lightweight - Die Kernbibliothek von loader.j ist eine extrem leichte Bibliothek.
Simple Configurations - Verwendet json, um verschiedene Konfigurationen der Diagramme zu definieren und ist sehr einfach zu erlernen und zu verwenden.
Dynamic - Ermöglicht das Ändern des Diagramms auch nach der Diagrammgenerierung.
Multiple axes- Nicht auf die x-, y-Achse beschränkt. Unterstützt mehrere Achsen in den Diagrammen.
Configurable tooltips- Tooltip wird angezeigt, wenn ein Benutzer mit der Maus über einen beliebigen Punkt in einem Diagramm fährt. googlecharts bietet einen integrierten Tooltip-Formatierer oder Callback-Formatierer, um den Tooltip programmgesteuert zu steuern.
DateTime support- Datum und Uhrzeit speziell behandeln. Bietet zahlreiche integrierte Steuerelemente für datumsbezogene Kategorien.
Print - Diagramm über Webseite drucken.
External data- Unterstützt das dynamische Laden von Daten vom Server. Bietet Kontrolle über Daten mithilfe von Rückruffunktionen.
Text Rotation - Unterstützt die Drehung von Etiketten in jede Richtung.
Unterstützte Diagrammtypen
Die Google Charts-Bibliothek bietet folgende Diagrammtypen:
| Sr.Nr. | Diagrammtyp & Beschreibung |
|---|---|
| 1 | Line Charts Wird zum Zeichnen von Linien- / Spline-basierten Diagrammen verwendet. |
| 2 | Area Charts Wird zum Zeichnen von flächenbezogenen Diagrammen verwendet. |
| 3 | Pie Charts Wird zum Zeichnen von Kreisdiagrammen verwendet. |
| 4 | Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines Wird zum Zeichnen von verstreuten Diagrammen verwendet. |
| 5 | Bubble Charts Wird zum Zeichnen von blasenbasierten Diagrammen verwendet. |
| 6 | Dynamic Charts Wird zum Zeichnen dynamischer Diagramme verwendet, in denen der Benutzer Diagramme ändern kann. |
| 7 | Combinations Wird zum Zeichnen von Kombinationen verschiedener Diagramme verwendet. |
| 8 | 3D Charts Wird zum Zeichnen von 3D-Diagrammen verwendet. |
| 9 | Angular Gauges Wird zum Zeichnen von Tacho-Diagrammen verwendet. |
| 10 | Heat Maps Wird zum Zeichnen von Heatmaps verwendet. |
| 11 | Tree Maps Wird zum Zeichnen von Baumkarten verwendet. |
In den nächsten Kapiteln werden wir jeden Typ der oben genannten Diagramme anhand von Beispielen ausführlich erläutern.
Lizenz
Google Charts ist Open Source und kann kostenlos verwendet werden. Folgen Sie dem Link: Nutzungsbedingungen .
In diesem Kapitel wird erläutert, wie Sie die Google Charts-Bibliothek für die Entwicklung von Webanwendungen einrichten.
Installieren Sie Google Charts
Es gibt zwei Möglichkeiten, Google Charts zu verwenden.
Download - Laden Sie es lokal von herunter https://developers.google.com/chart und benutze es.
CDN access- Sie haben auch Zugriff auf ein CDN. Über das CDN erhalten Sie weltweit Zugriff auf regionale Rechenzentren, in diesem Fall Google Chart Hosthttps://www.gstatic.com/charts.
Verwenden von heruntergeladenem Google Chart
Fügen Sie die JavaScript-Datei von Googlecharts mithilfe des folgenden Skripts in die HTML-Seite ein:
<head>
<script src = "/googlecharts/loader.js"></script>
</head>CDN verwenden
In diesem Tutorial verwenden wir die CDN-Versionen der Google Chart-Bibliothek.
Fügen Sie die Google Chart-JavaScript-Datei mithilfe des folgenden Skripts in die HTML-Seite ein:
<head>
<script src = "https://www.gstatic.com/charts/loader.js"></script>
</head>In diesem Kapitel wird die Konfiguration vorgestellt, die zum Zeichnen eines Diagramms mithilfe der Google Chart-API erforderlich ist.
Schritt 1: HTML-Seite erstellen
Erstellen Sie eine HTML-Seite mit den Google Chart-Bibliotheken.
googlecharts_configuration.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
</body>
</html>Hier containerdiv wird verwendet, um das mit der Google Chart-Bibliothek gezeichnete Diagramm zu enthalten. Hier laden wir die neueste Version der Corecharts-API mit der Methode google.charts.load.
Schritt 2: Konfigurationen erstellen
Die Google Chart-Bibliothek verwendet sehr einfache Konfigurationen mit JSON-Syntax.
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);Hier stellen Daten die JSON-Daten dar und Optionen stellen die Konfiguration dar, die die Google Chart-Bibliothek verwendet, um ein Diagramm mit Container div mit der draw () -Methode zu zeichnen. Jetzt konfigurieren wir die verschiedenen Parameter, um die erforderliche JSON-Zeichenfolge zu erstellen.
Titel
Konfigurieren Sie die Optionen des Diagramms.
// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014',
'width':550,
'height':400};Datentabelle
Konfigurieren Sie die Daten, die im Diagramm angezeigt werden sollen. DataTable ist eine spezielle tabellenstrukturierte Sammlung, die die Daten des Diagramms enthält. Spalten der Datentabelle repräsentieren die Legenden und Zeilen repräsentieren die entsprechenden Daten. Die Methode addColumn () wird verwendet, um eine Spalte hinzuzufügen, in der der erste Parameter den Datentyp und der zweite Parameter die Legende darstellt. Die Methode addRows () wird verwendet, um Zeilen entsprechend hinzuzufügen.
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]);Schritt 3: Zeichnen Sie das Diagramm
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);Beispiel
Es folgt das vollständige Beispiel -
googlecharts_configuration.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]);
// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014', 'width':550, 'height':400};
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById ('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Rufen Sie nach dem Code die Funktion drawChart auf, um ein Diagramm zu zeichnen, wenn die Google Chart-Bibliothek vollständig geladen ist.
google.charts.setOnLoadCallback(drawChart);Ergebnis
Überprüfen Sie das Ergebnis.
Flächendiagramme werden zum Zeichnen von flächenbasierten Diagrammen verwendet. In diesem Abschnitt werden die folgenden Arten von flächenbasierten Diagrammen erläutert.
| Sr.Nr. | Diagrammtyp & Beschreibung |
|---|---|
| 1 | Grundbereich
Grundlegendes Flächendiagramm |
| 2 | Bereich mit negativen Werten
Flächendiagramm mit negativen Werten. |
| 3 | Gestapelter Bereich
Diagramm mit übereinander gestapelten Bereichen. |
| 4 | Prozentuale Fläche
Diagramm mit Daten in Prozent. |
| 5 | Bereich mit fehlenden Punkten
Diagramm mit fehlenden Punkten in den Daten. |
| 6 | Umgekehrte Achsen
Fläche mit umgekehrten Achsen. |
Balkendiagramme werden zum Zeichnen von Balkendiagrammen verwendet. In diesem Abschnitt werden die folgenden Arten von Balkendiagrammen erläutert.
| Sr.Nr. | Diagrammtyp & Beschreibung |
|---|---|
| 1 | Basic Bar
Grundlegendes Balkendiagramm |
| 2 | Gruppiertes Balkendiagramm
Gruppiertes Balkendiagramm. |
| 3 | Gestapelte Bar
Balkendiagramm mit übereinander gestapeltem Balken. |
| 4 | Negativ gestapelte Leiste
Balkendiagramm mit negativem Stapel. |
| 5 | Prozentweise gestapelte Leiste
Balkendiagramm mit Daten in Prozent. |
| 6 | Material Balkendiagramm
Ein von Material Design inspiriertes Balkendiagramm. |
| 7 | Balkendiagramm mit Datenbeschriftungen
Balkendiagramm mit Datenbeschriftungen. |
Blasendiagramme werden verwendet, um blasenbasierte Diagramme zu zeichnen. In diesem Abschnitt werden die folgenden Arten von blasenbasierten Diagrammen erläutert.
| Sr.Nr. | Diagrammtyp & Beschreibung |
|---|---|
| 1 | Grundlegende Blase
Grundlegendes Blasendiagramm. |
| 2 | Blasendiagramm mit Datenbeschriftungen
Blasendiagramm mit Datenbeschriftungen. |
Kalenderdiagramme werden verwendet, um Aktivitäten über einen langen Zeitraum wie Monate oder Jahre zu zeichnen. In diesem Abschnitt werden die folgenden Arten von kalenderbasierten Diagrammen erläutert.
| Sr.Nr. | Diagrammtyp & Beschreibung |
|---|---|
| 1 | Grundkalender
Grundlegendes Kalenderdiagramm. |
| 2 | Kalender mit benutzerdefinierten Farben
Benutzerdefiniertes Kalenderdiagramm. |
Candlestick-Diagramme werden verwendet, um den Eröffnungs- und Schlusswert über eine Wertabweichung anzuzeigen, und werden normalerweise zur Darstellung von Aktien verwendet. In diesem Abschnitt werden die folgenden Arten von Candlestick-basierten Diagrammen erläutert.
| Sr.Nr. | Diagrammtyp & Beschreibung |
|---|---|
| 1 | Einfacher Kerzenhalter
Grundlegendes Candlestick-Diagramm. |
| 2 | Kerzenhalter mit kundenspezifischen Farben
Kundenspezifisches Candlestick-Diagramm. |
Säulendiagramme werden zum Zeichnen spaltenbasierter Diagramme verwendet. In diesem Abschnitt werden die folgenden Arten von spaltenbasierten Diagrammen erläutert.
| Sr.Nr. | Diagrammtyp & Beschreibung |
|---|---|
| 1 | Grundlegende Spalte
Grundlegendes Säulendiagramm. |
| 2 | Gruppierte Spalte
Gruppiertes Säulendiagramm. |
| 3 | Gestapelte Säule
Säulendiagramm mit übereinander gestapelten Spalten. |
| 4 | Negative gestapelte Spalte
Säulendiagramm mit negativem Stapel. |
| 5 | Prozentsatz der gestapelten Spalte
Säulendiagramm mit Daten in Prozent. |
| 6 | Materialspaltendiagramm
Ein von Material Design inspiriertes Säulendiagramm. |
| 7 | Säulendiagramm mit Datenbeschriftungen
Säulendiagramm mit Datenbeschriftungen. |
Das Kombinationsdiagramm hilft beim Rendern jeder Serie als einen anderen Markertyp aus der folgenden Liste: Linie, Fläche, Balken, Kerzenhalter und Stufenfläche. Verwenden Sie die Eigenschaft seriesType, um einen Standardmarkertyp für Serien zuzuweisen. Die Serieneigenschaft soll verwendet werden, um die Eigenschaften jeder Serie einzeln anzugeben. Wir haben die Konfiguration zum Zeichnen dieses Diagramms bereits im Kapitel Google Charts-Konfigurationssyntax gesehen . Schauen wir uns also das vollständige Beispiel an.
Konfigurationen
Wir haben verwendet ComboChart Klasse, um kombinationsbasiertes Diagramm anzuzeigen.
//combination chart
var chart = new google.visualization.ComboChart(document.getElementById('container'));Beispiel
googlecharts_combination_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Fruit', 'Jane', 'John', 'Average'],
['Apples', 3, 2, 2.5],
['Oranges', 2, 3, 2.5],
['Pears', 1, 5, 3],
['Bananas', 3, 9, 6],
['Plums', 4, 2, 3]
]);
// Set chart options
var options = {
title : 'Fruits distribution',
vAxis: {title: 'Fruits'},
hAxis: {title: 'Person'},
seriesType: 'bars',
series: {2: {type: 'line'}}
};
// Instantiate and draw the chart.
var chart = new google.visualization.ComboChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Ergebnis
Überprüfen Sie das Ergebnis.
Ein Histogramm ist ein Diagramm, das numerische Daten in Buckets gruppiert und die Buckets als segmentierte Spalten anzeigt. Sie werden verwendet, um die Verteilung eines Datensatzes darzustellen, wie oft Werte in Bereiche fallen. Google Charts wählt automatisch die Anzahl der Buckets für Sie aus. Alle Buckets sind gleich breit und haben eine Höhe, die proportional zur Anzahl der Datenpunkte im Bucket ist. Histogramme ähneln in anderen Aspekten Säulendiagrammen. In diesem Abschnitt werden die folgenden Arten von Histogramm-basierten Diagrammen erläutert.
| Sr.Nr. | Diagrammtyp & Beschreibung |
|---|---|
| 1 | Grundlegendes Histogramm
Grundlegendes Histogramm. |
| 2 | Farbe steuern
Kundenspezifische Farbe des Histrogrammdiagramms. |
| 3 | Eimer steuern
Kundenspezifische Eimer des Histrogramm-Diagramms. |
| 4 | Mehrere Serien
Histrogramm-Diagramm mit mehreren Serien. |
Liniendiagramme werden zum Zeichnen von linienbasierten Diagrammen verwendet. In diesem Abschnitt werden die folgenden Arten von linienbasierten Diagrammen erläutert.
| Sr.Nr. | Diagrammtyp & Beschreibung |
|---|---|
| 1 | Grundlinie
Grundlegendes Liniendiagramm. |
| 2 | Mit sichtbaren Punkten
Diagramm mit sichtbaren Datenpunkten. |
| 3 | Anpassbare Hintergrundfarbe
Diagramm mit angepasster Hintergrundfarbe. |
| 4 | Anpassbare Linienfarbe
Diagramm mit angepasster Linienfarbe. |
| 5 | Anpassbare Achsen- und Häkchenbeschriftungen
Diagramm mit benutzerdefinierten Achsen- und Häkchenbeschriftungen. |
| 6 | Fadenkreuze
Liniendiagramme mit dem Fadenkreuz am Datenpunkt bei der Auswahl. |
| 7 | Anpassbarer Linienstil
Diagramm mit angepasster Linienfarbe. |
| 8 | Liniendiagramme mit gekrümmten Linien
Diagramm mit glatten Kurvenlinien. |
| 9 | Material Liniendiagramm
Ein von Material Design inspiriertes Liniendiagramm. |
| 10 | Top X Liniendiagramm
Ein von Material Design inspiriertes Liniendiagramm mit X-Achse oben auf dem Diagramm. |
Ein Google Map-Diagramm verwendet die Google Maps-API, um die Karte anzuzeigen. Datenwerte werden als Markierungen auf der Karte angezeigt. Datenwerte können Koordinaten (Lat-Long-Paare) oder tatsächliche Adressen sein. Die Karte wird entsprechend skaliert, sodass sie alle identifizierten Punkte enthält.
| Sr.Nr. | Diagrammtyp & Beschreibung |
|---|---|
| 1 | Grundkarte
Grundlegende Google Map. |
| 2 | Karte mit Breiten- / Längengrad
Karte mit Standorten, die mit Längen- und Breitengrad angegeben wurden. |
| 3 | Markierungen anpassen
Benutzerdefinierte Markierungen in der Karte. |
Das Organigramm hilft beim Rendern einer Hierarchie von Knoten, mit der übergeordnete / untergeordnete Beziehungen in einer Organisation dargestellt werden. Ein Stammbaum ist beispielsweise eine Art Organigramm. Die Konfiguration zum Zeichnen dieses Diagramms wurde bereits im Kapitel Syntax der Google Charts-Konfiguration angezeigt . Schauen wir uns also das vollständige Beispiel an.
Konfigurationen
Wir haben verwendet OrgChart Klasse, um ein organisationsbasiertes Diagramm anzuzeigen.
//organization chart
var chart = new google.visualization.OrgChart(document.getElementById('container'));Beispiel
googlecharts_organization_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['orgchart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
// For each orgchart box, provide the name, manager, and tooltip to show.
data.addRows([
[{v:'Robert', f:'Robert<div style="color:red; font-style:italic">President</div>'},'', 'President'],
[{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},'Robert', 'Vice President'],
['Alice', 'Robert', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', '']
]);
// Set chart options
var options = {allowHtml:true};
// Instantiate and draw the chart.
var chart = new google.visualization.OrgChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Ergebnis
Überprüfen Sie das Ergebnis.
Kreisdiagramme werden zum Zeichnen von Kreisdiagrammen verwendet. In diesem Abschnitt werden die folgenden Arten von Kreisdiagrammen erläutert.
| Sr.Nr. | Diagrammtyp & Beschreibung |
|---|---|
| 1 | Basic Pie
Grundlegendes Kreisdiagramm. |
| 2 | Donut Chart
Donut Chart. |
| 3 | 3D-Kreisdiagramm
3D-Kreisdiagramm. |
| 4 | Kreisdiagramm mit explodierten Scheiben
Kreisdiagramm mit explodierten Scheiben. |
Ein Sankey-Diagramm ist ein Visualisierungswerkzeug und wird verwendet, um einen Fluss von einem Wertesatz zu einem anderen darzustellen. Verbundene Objekte werden als Knoten und die Verbindungen als Links bezeichnet. Sankeys werden verwendet, um eine Viele-zu-Viele-Zuordnung zwischen zwei Domänen oder mehreren Pfaden durch eine Reihe von Stufen anzuzeigen.
| Sr.Nr. | Diagrammtyp & Beschreibung |
|---|---|
| 1 | Grundlegende Sankey-Tabelle
Grundlegende Sankey-Tabelle. |
| 2 | Mehrstufiges Sankey-Diagramm
Mehrstufiges Sankey-Diagramm. |
| 3 | Anpassen des Sankey-Diagramms
Kundenspezifisches Sankey-Diagramm. |
Sankey-Diagramme, Streudiagramme, Stufenbereichsdiagramme, Tabellen, Zeitleisten, Baumkarten und Trendlinien werden zum Zeichnen streuungsbasierter Diagramme verwendet. In diesem Abschnitt werden die folgenden Arten von streuungsbasierten Diagrammen erläutert.
| Sr.Nr. | Diagrammtyp & Beschreibung |
|---|---|
| 1 | Grundstreuung
Grundlegendes Streudiagramm. |
| 2 | Materialstreudiagramm
Materialstreudiagramm. |
| 3 | Streudiagramm mit zwei Y-Achsen
Materialstreudiagramm mit doppelter Y-Achse. |
| 4 | Top X Axis Scatter Chart
Materialstreudiagramm mit X-Achse oben. |
Ein gestuftes Flächendiagramm ist ein stufenbasiertes Flächendiagramm. Wir werden die folgenden Arten von Stufenbereichsdiagrammen diskutieren.
| Sr.Nr. | Diagrammtyp & Beschreibung |
|---|---|
| 1 | Grundlegendes Stufen-Diagramm
Grundlegendes Diagramm für abgestufte Bereiche. |
| 2 | Gestapeltes gestuftes Diagramm
Gestapeltes Stufenbereichsdiagramm. |
| 3 | 100% gestapeltes Stufen-Diagramm
100% gestapeltes Stufenbereichsdiagramm. |
Das Tabellendiagramm hilft beim Rendern einer Tabelle, die sortiert und ausgelagert werden kann. Tabellenzellen können mithilfe von Formatzeichenfolgen oder durch direktes Einfügen von HTML als Zellenwerte formatiert werden. Numerische Werte sind standardmäßig rechtsbündig ausgerichtet. Boolesche Werte werden als Häkchen oder Kreuzzeichen angezeigt. Benutzer können einzelne Zeilen entweder mit der Tastatur oder der Maus auswählen. Spaltenüberschriften können zum Sortieren verwendet werden. Die Kopfzeile bleibt während des Bildlaufs fest. Die Tabelle löst Ereignisse aus, die der Benutzerinteraktion entsprechen. Wir haben die Konfiguration zum Zeichnen dieses Diagramms bereits im Kapitel Google Charts-Konfigurationssyntax gesehen . Schauen wir uns also das vollständige Beispiel an.
Konfigurationen
Wir haben verwendet Table Klasse zum Anzeigen eines tabellenbasierten Diagramms.
//table chart
var chart = new google.visualization.Table(document.getElementById('container'));Beispiel
googlecharts_table_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['table']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var options = {
showRowNumber: true,
width: '100%',
height: '100%'
};
// Instantiate and draw the chart.
var chart = new google.visualization.Table(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Ergebnis
Überprüfen Sie das Ergebnis.
Zeitleisten zeigen, wie eine Reihe von Ressourcen im Laufe der Zeit verwendet werden. Wir werden die folgenden Arten von Zeitplandiagrammen diskutieren.
| Sr.Nr. | Diagrammtyp / Beschreibung |
|---|---|
| 1 | Grundlegendes Zeitplandiagramm
Grundlegendes Zeitplandiagramm |
| 2 | Zeitleisten-Diagramm mit Datenbeschriftungen
Zeitleisten-Diagramm mit Datenbeschriftungen |
| 3 | Zeitleisten-Diagramm ohne Zeilenbeschriftung
Zeitleisten-Diagramm ohne Zeilenbeschriftung |
| 4 | Timelines Diagramm Färbung
Benutzerdefiniertes Zeitplandiagramm |
TreeMap ist eine visuelle Darstellung eines Datenbaums, in dem jeder Knoten null oder mehr untergeordnete Elemente und ein übergeordnetes Element (mit Ausnahme des Stamms) haben kann. Jeder Knoten wird als Rechteck angezeigt und kann gemäß den von uns zugewiesenen Werten dimensioniert und gefärbt werden. Größen und Farben werden relativ zu allen anderen Knoten im Diagramm bewertet. Das folgende Beispiel zeigt ein Baumkarten-Diagramm. Wir haben die Konfiguration zum Zeichnen dieses Diagramms bereits im Kapitel Google Charts-Konfigurationssyntax gesehen . Schauen wir uns also das vollständige Beispiel an.
Konfigurationen
Wir haben verwendet TreeMap Klasse, um das Baumkartendiagramm anzuzeigen.
//TreeMap chart
var chart = new google.visualization.TreeMap(document.getElementById('container'));Beispiel
googlecharts_treemap.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript" src = "https://www.google.com/jsapi">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['treemap']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['Global', null, 0, 0],
['America', 'Global', 0, 0],
['Europe', 'Global', 0, 0],
['Asia', 'Global', 0, 0],
['Australia', 'Global', 0, 0],
['Africa', 'Global', 0, 0],
['USA', 'America', 52, 31],
['Mexico', 'America', 24, 12],
['Canada', 'America', 16, -23],
['France', 'Europe', 42, -11],
['Germany', 'Europe', 31, -2],
['Sweden', 'Europe', 22, -13],
['China', 'Asia', 36, 4],
['Japan', 'Asia', 20, -12],
['India', 'Asia', 40, 63],
['Egypt', 'Africa', 21, 0],
['Congo', 'Africa', 10, 12],
['Zaire', 'Africa', 8, 10]
]);
var options = {
minColor: '#f00',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black',
showScale: true
};
// Instantiate and draw the chart.
var chart = new google.visualization.TreeMap(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Ergebnis
Überprüfen Sie das Ergebnis.
Eine Trendlinie ist eine Linie, die einem Diagramm überlagert ist, um die Gesamtrichtung der Daten anzuzeigen. Google Charts kann automatisch Trendlinien für Sankey-Diagramme, Streudiagramme, Stufenbereichsdiagramme, Tabellen, Zeitleisten, TreeMap, Trendlinien, Balkendiagramme, Säulendiagramme und Liniendiagramme generieren. Wir werden die folgenden Arten von Trendliniendiagrammen diskutieren.
| Sr.Nr. | Diagrammtyp & Beschreibung |
|---|---|
| 1 | Grundlegendes Trendliniendiagramm
Grundlegendes Trendliniendiagramm. |
| 2 | Exponentielles Trendliniendiagramm
Exponentielles Trendliniendiagramm. |
| 3 | Polynom-Trendliniendiagramm
Polynom-Trendliniendiagramm. |