Графики и диаграммы
На сайтах иной раз приходится использовать разные диаграммы, что позволяют наглядно и доступно донести данные до пользователя. Раньше подобные графики делали в Excel, а затем вставляли на сайт картинкой. Но мы ведь живём в век информационных технологий, поэтому хочется вставить диаграмму быстро, просто, да ещё чтобы она была при этом интерактивной и красивой. И вот пришёл Гугл и дал нам такой сервис.
Набор возможных графиков доступен на этой странице. Для каждого графика есть множество параметров, которые позволяют настроить всё по своему вкусу: цвета, положение, заголовки, анимацию и многое другое. Можно обойтись и минимальным набором, если нет желания вдаваться в эти тонкости или когда полностью устраивает стандартный вид графика.
https://google-developers.appspot.com/chart/interactive/docs/gallery
Рассмотрю только два типа графиков — круговую и линейную диаграмму. Остальные типы подключаются по аналогии и разобравшись как добавлять один график, уже легче работать и с другими.
Круговая диаграмма
Такая диаграмма напоминает торт, разрезанный на разного размера куски. Общая сумма всех частей составляет 100%, части делят круг пропорционально своим значениям.
В примере 1 показан код для отображения состава воздуха в виде круговой диаграммы.
Пример 1. Круговая диаграмма
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Круговая диаграмма</title>
<script src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Газ', 'Объём'],
['Азот', 78.09],
['Кислород', 20.95],
['Аргон', 0.93],
['Углекислый газ', 0.03]
]);
var options = {
title: 'Состав воздуха',
is3D: true,
pieResidueSliceLabel: 'Остальное'
};
var chart = new google.visualization.PieChart(document.getElementById('air'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="air" style="width: 500px; height: 400px;"></div>
</body>
</html>Результат примера показан на рис. 1.
Рис. 1. Вид круговой диаграммы
В том месте документа, куда мы добавляем диаграмму, вставляем следующий код.
<div id="air" style="width: 500px; height: 400px;"></div>Ширину и высоту диаграммы задаём через стили и добавляем идентификатор для работы скрипта. Этот же идентификатор должен быть указан в document.getElementById.
Параметры диаграммы состоят из двух блоков: собственно данные для отображения (переменная data) и настройки (переменная options). Первая строка в data задаёт названия последующих колонок и хотя она никак не выводится, без неё отображение происходит некорректно. В options пишется заголовок диаграммы, также можно указать трёхмерность и другие настройки, все они являются необязательными и если не заданы, то принимаются по умолчанию.
Диаграмма получается интерактивной, её части подсвечиваются если навести на них курсор или на легенду.
Примеры, список параметров и описание круговой диаграммы доступны по этому адресу: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart
Гистограмма
Гистограмма — это столбчатая диаграмма, которая удобна для сравнения разных значений между собой. В качестве примера возьмём добычу нефти в XIX веке в России и США (рис. 2). На оси абсцисс (горизонтальная ось) нанесены годы, на оси ординат (вертикальная ось) — добыча нефти в тысячах тонн. Высота прямоугольников соответствует указанному значению.
Рис. 2. Гистограмма
Принцип создания этого типа диаграммы аналогичен предыдущему — добавляем тег <div>, связываем его со скриптом, в котором хранятся данные для графика и параметры отображения (пример 2).
Пример 2. Гистограмма
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Гистограмма</title>
<script src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Год', 'Россия', 'США'],
['1860', 1.3, 70],
['1885', 2000, 3120],
['1901', 12170, 9920]
]);
var options = {
title: 'Добыча нефти',
hAxis: {title: 'Год'},
vAxis: {title: 'Тыс. тонн'}
};
var chart = new google.visualization.ColumnChart(document.getElementById('oil'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="oil" style="width: 500px; height: 400px;"></div>
</body>
</html>Для начала добавляем тег <div> и указываем ему желаемую ширину и высоту с помощью стилей. Также важен идентификатор через который скрипт будет вставлять выбранный график в элемент <div>. Сам скрипт в сравнении с предыдущим примером сохраняет свою структуру и состоит из двух редактируемых частей — собственно данные для отображения на графике и различные его настройки. Через параметры hAxis и vAxis добавим для наглядности заголовки осей.
Остальные параметры вы можете посмотреть по этому адресу: https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart
Резюме
Удобно, что сервис ориентирован на пользователей разного уровня подготовки. Можно скопировать прилагающиеся примеры и сразу же получить готовый график стандартного вида. Те пользователи, что станут досконально разбираться во множестве параметров, будут вознаграждены графиками сделанными по их вкусу и подобию дизайна сайта.
Сами графики выводятся достаточно оперативно, к тому же вызываемые файлы при первой загрузке кэшируются, поэтому последующее отображение графиков на сайте происходит быстрее. Поддерживаются все браузеры, включая старые версии Internet Explorer.
Документация сервиса на русский язык не переведена и доступна только на английском, что способно отпугнуть некоторых пользователей. На это есть только одна мантра — учите языки.