Auf dieser Seite sind die verschiedenen Möglichkeiten zum Instanziieren und Zeichnen eines Diagramms auf der Seite aufgeführt. Jede Methode hat die folgenden Vor- und Nachteile.
Inhalt
Chart.draw()
Dies ist die grundlegende Methode, die im Beispiel für ein Hello-Diagramm in dieser Dokumentation behandelt wird. Es sind drei grundlegende Schritte erforderlich:
- Laden des gstatic libraryloaders, der Google Visualization und der Chart-Bibliotheken
- Daten vorbereiten
- Diagrammoptionen vorbereiten
- Instanziieren Sie die Diagrammklasse und übergeben Sie einen Ziehpunkt an das Seitencontainerelement.
- Optional registrieren, um Diagrammereignisse zu erhalten. Wenn Sie Methoden im Diagramm aufrufen möchten, sollten Sie auf das Ereignis „ready“ warten.
- Rufen Sie
chart.draw()auf und übergeben Sie die Daten und Optionen.
Vorteile:
- Sie haben die vollständige Kontrolle über jeden Schritt des Prozesses.
- Sie können sich registrieren, um alle im Diagramm ausgelösten Ereignisse zu beobachten.
Nachteile:
- Ausführlich
- Sie müssen alle erforderlichen Diagrammbibliotheken explizit laden.
- Wenn Sie Abfragen senden, müssen Sie den Callback manuell implementieren, auf Erfolg prüfen, den zurückgegebenen
DataTableextrahieren und an das Diagramm übergeben.
Beispiel:
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var data;
var chart;
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create our data table.
data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
chart = new google.visualization.PieChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
function selectHandler() {
var selectedItem = chart.getSelection()[0];
var value = data.getValue(selectedItem.row, 0);
alert('The user selected ' + value);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="width:400; height:300"></div>
</body>
</html>
ChartWrapper
ChartWrapper ist eine Convenience-Klasse, die das Laden aller geeigneten Diagrammbibliotheken übernimmt und das Senden von Abfragen an Chart Tools-Datenquellen vereinfacht.
Vorteile:
- Viel weniger Code
- Lädt alle erforderlichen Diagrammbibliotheken
- Vereinfacht das Abfragen von Datenquellen, indem das
Query-Objekt erstellt und der Callback für Sie verarbeitet wird. - Übergeben Sie die Container-Element-ID, um getElementByID aufzurufen.
- Daten können in verschiedenen Formaten gesendet werden: als Array von Werten, als JSON-Literal-String oder als
DataTable-Handle
Nachteile:
ChartWrapperpropagiert derzeit nur die Ereignisse „select“, „ready“ und „error“. Wenn Sie andere Ereignisse abrufen möchten, müssen Sie auf das umschlossene Diagramm zugreifen und die Ereignisse dort abonnieren. Beispiele finden Sie in derChartWrapper-Dokumentation.
Beispiele:
Hier sehen Sie ein Beispiel für ein Säulendiagramm mit lokal erstellten Daten, die als Array angegeben sind. Sie können mit der Arraysyntax keine Diagrammlabels oder Datum/Uhrzeit-Werte angeben. Sie könnten aber manuell ein DataTable-Objekt mit diesen Werten erstellen und dieses an das Attribut dataTable übergeben.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current'); // Don't need to specify chart libraries!
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
['', 700, 300, 400, 500, 600, 800]],
options: {'title': 'Countries'},
containerId: 'vis_div'
});
wrapper.draw();
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="vis_div" style="width: 600px; height: 400px;"></div>
</body>
</html>
Hier ein Beispiel für ein Liniendiagramm, bei dem die Daten über eine Google-Tabelle abgerufen werden. Der Code muss den Callback nicht verarbeiten.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current');
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'LineChart',
dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
query: 'SELECT A,D WHERE D > 100 ORDER BY D',
options: {'title': 'Countries'},
containerId: 'vis_div'
});
wrapper.draw()
// No query callback handler needed!
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="vis_div" style="width: 600px; height: 400px;"></div>
</body>
</html>
In Kombination mit dem automatischen Laden kann dies zu sehr kompaktem Code führen:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current'); // Don't need to specify chart libraries!
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'LineChart',
dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
query: 'SELECT A,D WHERE D > 100 ORDER BY D',
options: {'title': 'Countries'},
containerId: 'vis_div'
});
wrapper.draw()
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="vis_div" style="width: 600px; height: 400px;"></div>
</body>
</html>
Diagrammeditor mit ChartWrapper verwenden
Mit dem in Google Tabellen integrierten Dialogfeld „Diagrammeditor“ können Sie ein Diagramm entwerfen und dann den serialisierten ChartWrapper-String anfordern, der das Diagramm darstellt. Sie können diesen String dann kopieren und einfügen und wie oben unter ChartWrapper beschrieben verwenden.
Sie können einen Diagrammeditor in Ihre eigene Seite einbetten und Methoden zur Verfügung stellen, damit Nutzer eine Verbindung zu anderen Datenquellen herstellen und den String ChartWrapper zurückgeben können. Weitere Informationen finden Sie in der ChartEditor-Referenzdokumentation.
DrawChart()
DrawChart ist eine globale statische Methode, die ein ChartWrapper-Element umschließt.
Vorteile:
- Wie
ChartWrapper, aber etwas kürzer.
Nachteile:
- Es wird kein Handle zum Wrapper zurückgegeben, sodass keine Ereignisse verarbeitet werden können.
<DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current'); // Don't need to specify chart libraries!
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
google.visualization.drawChart({
"containerId": "visualization_div",
"dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
"query":"SELECT A,D WHERE D > 100 ORDER BY D",
"refreshInterval": 5,
"chartType": "Table",
"options": {
"alternatingRowStyle": true,
"showRowNumber" : true
}
});
}
google.charts.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization_div" style="width: 600px; height: 400px;"></div>
</body>
</html>
Weitere Informationen
ChartEditor-Referenzdokumentation- Allgemeine
chart.draw()-Dokumentation ChartWrapper-ReferenzdokumentationDrawChart-Referenzdokumentation