<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>
Optionen angeben
Jedes Diagramm verfügt über viele anpassbare Optionen, darunter Titel, Farben, Linienstärke, Hintergrundfüllung usw. Das Chart Tools-Team hat zwar hart an der Standarddarstellung des Diagramms gearbeitet, aber Sie können Ihr Diagramm anpassen, z. B. indem Sie Titel oder Achsenbeschriftungen hinzufügen.
Sie können benutzerdefinierte Optionen für Ihr Diagramm festlegen, indem Sie ein JavaScript-Objekt mit den Attributen option_name/option_value definieren. Verwenden Sie die Optionsnamen, die in der Dokumentation des Diagramms aufgeführt sind. Die Dokumentation jedes Diagramms enthält eine Reihe anpassbarer Optionen. Zu den für das Kreisdiagramm verfügbaren Optionen gehören beispielsweise "Legende", "Titel" und "is3D". Für alle Optionen ist ein dokumentierter Standardwert vorhanden.
Das folgende Objekt definiert die Legendenposition, den Diagrammtitel, die Diagrammgröße und eine 3D-Option für ein Kreisdiagramm:
var options = {
'legend':'left',
'title':'My Big Pie Chart',
'is3D':true,
'width':400,
'height':300
}
Aktualisieren Sie das Optionsobjekt im obigen Beispiel mit diesen Werten, um zu sehen, wie sie sich auf das Diagramm auswirken.
Diagrammgröße angeben
Eine sehr häufig eingestellte Option ist die Diagrammhöhe und -breite. Du kannst die Diagrammgröße an zwei Stellen angeben: im HTML-Code des Container-<div>-Elements oder in den Diagrammoptionen. Wenn Sie die Größe an beiden Orten angeben, richtet sich das Diagramm in der Regel nach der im HTML-Code angegebenen Größe. Wenn Sie weder im HTML-Code noch als Option eine Diagrammgröße angeben, wird das Diagramm möglicherweise nicht richtig gerendert.
Die Angabe der Größe an einer der anderen Stellen hat ihre Vorteile:
- Größe in HTML angeben: Es kann einige Sekunden dauern, bis ein Diagramm geladen und gerendert wird. Wenn Sie die Größe des Diagrammcontainers bereits in HTML festgelegt haben, springt das Seitenlayout beim Laden des Diagramms nicht hin und her.
- Größe als Diagrammoption festlegen – Wenn die Diagrammgröße im JavaScript-Code angegeben ist, können Sie das JavaScript kopieren und einfügen oder es serialisieren, speichern und wiederherstellen und die Größe des Diagramms einheitlich anpassen.