Wykresy Google - składnia konfiguracji
W tym rozdziale pokażemy konfigurację wymaganą do narysowania wykresu za pomocą Google Chart API.
Krok 1: Utwórz stronę HTML
Utwórz stronę HTML z bibliotekami Google Chart.
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>Tutaj containerdiv służy do przechowywania wykresu narysowanego za pomocą biblioteki Google Chart. Tutaj ładujemy najnowszą wersję API corecharts przy użyciu metody google.charts.load.
Krok 2: Utwórz konfiguracje
Biblioteka wykresów Google używa bardzo prostych konfiguracji przy użyciu składni json.
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);Tutaj dane reprezentują dane json, a opcje reprezentują konfigurację używaną przez bibliotekę Google Chart do rysowania wykresu za pomocą elementu div kontenera przy użyciu metody draw (). Teraz skonfigurujemy różne parametry, aby utworzyć wymagany ciąg json.
tytuł
Skonfiguruj opcje wykresu.
// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014',
'width':550,
'height':400};Tabela danych
Skonfiguruj dane, które mają być wyświetlane na wykresie. DataTable to specjalny zbiór strukturalny tabel zawierający dane z wykresu. Kolumny tabeli danych reprezentują legendy, a wiersze reprezentują odpowiednie dane. addColumn () służy do dodawania kolumny, w której pierwszy parametr reprezentuje typ danych, a drugi parametr reprezentuje legendę. addRows () służy do odpowiedniego dodawania wierszy.
// 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]
]);Krok 3: Narysuj wykres
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);Przykład
Oto pełny przykład -
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>Poniższy kod wywołuje funkcję drawChart, aby rysować wykres po całkowitym załadowaniu biblioteki Google Chart.
google.charts.setOnLoadCallback(drawChart);Wynik
Sprawdź wynik.