Google Charts - Konfigurationssyntax
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.