Google Диаграмма
Галерея Google Chart предоставляет большое количество готовых к использованию типов диаграмм, от простых линейных диаграмм до сложных иерархических древовидных карт:
- Точечная диаграмма
- Линейный график
- Гистограмма / столбчатая диаграмма
- Диаграмма области
- Круговая диаграмма
- Пончиковая диаграмма
- Организационная диаграмма
- Карта / Географическая карта
Как использовать диаграмму Google?
Чтобы использовать Google Chart на своей веб-странице, добавьте ссылку на загрузчик диаграмм:
<script
src="https://www.gstatic.com/charts/loader.js">
</script>
Google Chart прост в использовании.
Просто добавьте элемент <div> для отображения диаграммы:
<div id="myChart" style="max-width:700px; height:400px"></div>
Элемент <div> должен иметь уникальный идентификатор.
Затем загрузите API Google Graph:
- Загрузите API визуализации и пакет corechart.
- Установите функцию обратного вызова для вызова при загрузке API.
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);
Это все!
Линейный график
Исходный код
function drawChart() {
// Set Data
var data = google.visualization.arrayToDataTable([
['Price', 'Size'],
[50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
[110,10],[120,11],[130,14],[140,14],[150,15]
]);
// Set Options
var options = {
title: 'House Prices vs Size',
hAxis: {title: 'Square Meters'},
vAxis: {title: 'Price in Millions'},
legend: 'none'
};
// Draw Chart
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}
Графики рассеяния
Чтобы построить точечный график с теми же данными, измените google.visualization на ScatterChart:
var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));
Гистограммы
Исходный код
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Contry', 'Mhl'],
['Italy', 55],
['France', 49],
['Spain', 44],
['USA', 24],
['Argentina', 15]
]);
var options = {
title: 'World Wide Wine Production'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}
Круговые диаграммы
Чтобы преобразовать столбчатую диаграмму в круговую , просто замените: google.visualization
. Гистограмма
с:
google.visualization. Круговая диаграмма
var chart = new google.visualization.PieChart(document.getElementById('myChart'));
3D пирог
Чтобы отобразить круговую диаграмму в 3D, просто добавьте is3D: true к параметрам:
var options = {
title: 'World Wide Wine Production',
is3D: true
};