<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// 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 the data table.
var 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.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="width:400; height:300"></div>
</body>
</html>
DataTable erstellen
Für alle Diagramme sind Daten erforderlich. Für Diagramme von Google Chart Tools müssen Daten in die JavaScript-Klasse google.visualization.DataTable eingeschlossen werden. Diese Klasse ist in der Google-Visualisierungsbibliothek definiert, die Sie zuvor geladen haben.
Eine DataTable ist eine zweidimensionale Tabelle mit Zeilen und Spalten, wobei jede Spalte einen Datentyp, eine optionale ID und ein optionales Label hat. Im obigen Beispiel wird die folgende Tabelle erstellt:
| Typ: String label: Belag |
Typ: Zahl label: Segmente |
|---|---|
| Mit Pilzen | 3 |
| Zwiebeln | 1 |
| Oliven | 1 |
| Zucchini | 1 |
| Peperoni | 2 |
Es gibt mehrere Möglichkeiten, eine DataTable zu erstellen. Eine Liste und einen Vergleich der einzelnen Verfahren finden Sie in DataTables und DataViews. Sie können Ihre Daten nach dem Hinzufügen ändern und Spalten und Zeilen hinzufügen, bearbeiten oder entfernen.
Sie müssen die DataTable Ihres Diagramms in einem Format organisieren, das für das Diagramm erwartet wird. So benötigen beispielsweise sowohl das Balkendiagramm als auch das Kreisdiagramm eine zweispaltige Tabelle, wobei jede Zeile ein Segment oder einen Balken darstellt. Die erste Spalte ist das Segment- oder Balkenlabel und die zweite Spalte der Segment- oder Balkenwert. Andere Diagramme erfordern andere und möglicherweise komplexere Tabellenformate. Informationen zum erforderlichen Datenformat finden Sie in der Dokumentation zu Ihrem Diagramm.
Anstatt eine Tabelle selbst auszufüllen, können Sie eine Website abfragen, die das Datenquellenprotokoll von Chart Tools unterstützt, z. B. eine Seite für Google Tabellen. Mit dem google.visualization.Query-Objekt können Sie eine Abfrage an eine Website senden und ein ausgefülltes DataTable-Objekt erhalten, das Sie an Ihr Diagramm übergeben können. Informationen zum Senden einer Abfrage finden Sie unter Datenquelle abfragen.