Google Chart / Google диаграммы
Галерея Google Chart предоставляет большое количество готовых к использованию типов диаграмм, от простых линейных диаграмм до сложных иерархических древовидных карт:
- Scatter Chart / Точечная диаграмма
- Line Chart / Линейная диаграмма
- Bar / Column Chart / Гистограмма/столбчатая диаграмма
- Area Chart / Диаграмма с областями
- Pie Chart / Круговая диаграмма
- Donut Chart / Кольцевая диаграмма
- Org Chart / Организационная диаграмма
- Map / Geo Chart / Карта / Географическая диаграмма
Как использовать Google Chart?
Чтобы использовать 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:
- Загрузите Visualization API и пакет corechart
- Установите функцию обратного вызова для вызова при загрузке API
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);
Это всё!
Линейный график
Исходный код
function drawChart() {
// Установить данные
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]
]);
// Установить параметры
var options = {
title: 'House Prices vs Size',
hAxis: {title: 'Square Meters'},
vAxis: {title: 'Price in Millions'},
legend: 'none'
};
// Нарисовать диаграмму
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.BarChart
на:
google.visualization.PieChart
var chart = new google.visualization.PieChart(document.getElementById('myChart'));
3D диаграмма
Чтобы отобразить круговую диаграмму в 3D, просто добавьте is3D: true к параметрам:
var options = {
title: 'World Wide Wine Production',
is3D: true
};
Красотища, неправда ли? 😀
