Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

Рисуем диаграмму с помощью Google Charts Категория: JavaScript
Название: Рисуем диаграмму с помощью Google Charts
Дата добавления: 02-07-2012
Раз просмотрено: 2706
Комментарии: 3
Рейтинг: * * * * * · · · · · (6 голосов)

Рисуем диаграмму с помощью Google Charts

Данные имеют огромное значение в интернете. Визуально, однако, данные могут быть очень скучными, и если вы не статист, то больше объемы данных вам будет трудно сравнивать и анализировать. Для представления данных семантика предлагает нам HTML-таблицы, поскольку они обеспечивают язык, который подходит для разметки данных и цифр. Тем не менее, за исключением красивых границ и полосатых строк, таблицы не предлагают нам ничего, чем мы можем улучшить представление наших данных.

По этой и другим причинам произошел большой рост в среде решений для создания графических схем и диаграмм. Такие инструменты, как Google Charts API позволяют нам преобразовывать скучные табличные данные в визуально богатые диаграммы, которые дополняют наши табличные данные, делая их легче для осмысления и понимания для наших пользователей и клиентов.

HTML5 диаграммы

До недавнего времени большинство онлайн сервисов для построения графиков динамически создавали статичные изображения, которые можно было вставлять на веб-страницу при помощи тега <img>.

Однако, с появлением HTML5, у нас есть пару альтернативных технологий, которые позволяют нам создавать более богатые, и интерактивные графики, которые выводят нас из рамок статичной графики и изображений. Пожалуй, наиболее популярными являются HTML5 тег <canvas> и SVG.

Тег <canvas>

Согласно спецификации Mozilla Developer, тег <canvas> — это HTML5 элемент, который может быть использован для создания графики при помощи скриптов. Он действует быстро и в отличие от статичных изображений может быть динамически перерисован на странице при помощи скриптов. Это делает его полезным для быстрой генерации графических визуализаций из HTML таблиц. А хорошо продуманный скрипт может даже добавить некоторые элементы интерактивности.

Также существуют некоторые отличные инструменты для создания графиков при помощи <canvas>. Среди них можно отметить jQuery плагин Visualize, а также excanvas.js от Google, которые создают динамические диаграммы, работающие даже в старых браузерах.

SVG диаграммы

Не смотря на то что тег <canvas> отлично справляется с визуализацией динамических диаграмм, его основным недостатком является то, что он является графическим API, основанным на пикселях. Используя его, вы не сможете прикреплять обработчики событий или управлять существующими объектами. Как только он нарисован, им никак нельзя управлять.

Альтернативной технологией является SVG. Несмотря на то, что эта технология, строго говоря, не являются частью спецификации HTML5, она имеет ряд преимуществ перед методом, основанном на <canvas>, для создания диаграмм в интернете. Подробнее об SVG вы можете почитать в статье «SVG на сайтах».

Главными преимуществами является то, что SVG является векторной графикой и описывается с помощью XML-синтаксиса. Это означает, что она поддерживает DOM, чьи атрибуты можно легко читать и динамически изменять с помощью скриптов. B хотя есть некоторые проблемы связанные с производительностью при работе с большими файлами, SVG является более подходящей технологией для создания графиков в интернете и Google придерживается того же мнения.

Google Charts API

Google поддерживает и развивает полнофункциональную библиотеку для работы с диаграммами под названием Google Charts API. Это очень мощный инструмент, который хорошо поддерживается и документируется. В целом, это отличный выбор для работы с графиками в интернете.

Хотя в первоначальная версия полагалась на изображения, улучшенный API теперь использует возможности HTML5 и SVG для визуализации различных динамических диаграмм, которые можно настроить и добавить к ним сложную интерактивность.

С обратной совместимостью с помощью VML для старых версий Internet Explorer, эти графики будут отображаться в целом ряде устройств, включая iOS и Android телефоны. И никакие плагины для этого не требуются.

Простая диаграмма с помощью Google Charts

Теперь, давайте нарисуем простую круговую диаграмму при помощи Google Charts API. Такие диаграммы, например, использует сервис статистики HotLog. Вы можете посмотреть демо на этой странице, а результат нашей работы будет выглядеть так:

Диаграмма нарисованная с помощью Google Charts
Диаграмма нарисованная с помощью Google Charts

Для начала, подключим необходимый скрипт для работы с Google Charts:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

Также, нам нужен контейнер, в котором будет создаваться диаграмма. Давайте создадим его, и присвоим ему идентификатор chart_div:

<div id="chart_div"></div>

Теперь, добавим на нашу страницу этот JavaScript код, который и будет отвечать за создание нашей круговой диаграммы. Код хорошо прокомментирован, поэтому излишние добавления не требуются:

// Закружаем необходимый пакет для работы с диаграммами:
google.load('visualization', '1.0', {'packages':['corechart']});
// Устанавливаем функцию, которая будет описывать диаграмму. В нашем случае это drawChart:
google.setOnLoadCallback(drawChart);

// Описываем саму функцию:
function drawChart() {
	var data = new google.visualization.DataTable();
	data.addColumn('string', 'Answer');
	data.addColumn('number', 'Result');

	// Задаем части диаграммы и их значения:
	data.addRows([
		['Программист', 28],
		['Веб-дизайнер', 12],
		['Дизайнер', 18],
		['Веб-мастер', 14],
	]);

	// Задаем заголовок, ширину и высоту диаграммы:
	var options = {
		'title':'Профессии людей, работающих с сайтами',
		'width':500,
		'height':400
	};

	// Рисуем круговую диаграмму:
	var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
	chart.draw(data, options);
}

Это интересно: «Типографика в веб-дизайне».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:
Валерий  •  2013-12-06 04:03:39
Отличная статья, спасибо большое!

такой вопрос, может стыкались - если, например, строить диаграмму динамически и возникнет ситуация, когда у ВЕБ-МАСТЕРА (исходя из примера) будет значение 0 - он вообще не будет отображаться в легенде. а хотелось бы его там видеть, ведь ситуации разные бываютюю
Валерий  •  2013-12-06 12:11:50
решил проблему с помощью сообщества. если кому полезно будет - нужно в опциях установить 'sliceVisibilityThreshold':0
makssteph  •  2014-01-17 07:08:26
Инвестирование без рисков – мечта, утопия?! Нет! Инвестирование без рисков – это реальность!

Такого на финансовом рынке еще действительно не было!

Уникальная программа <a href=https://milltrade.net/asset-management/mill-invest/?ref=527cb70fac928ed225000003>Mill-invest</a> от «Mill Trade» взорвала Интернет! Даже скептики вложили деньги в Mill-invest , т.к. доход не зависит от каких-либо внешних обстоятельств. Страхование рисков компания «Mill Trade» полностью взяла на себя. Заключается официальный договор.

<i><b>Внимание, важные цифры:</b></i>

Размер дохода – <b>7% гарантированно каждый месяц</b> для каждого инвестора!
3000$ - минимальный вклад, прибыль начисляется на Ваш счет один раз в месяц — до 7-го числа месяца, следующего за отчетным.

Специальных знаний в области инвестирования либо финансовых рынков не требуется.
Что еще нужно, чтобы Вы инвестировали? Конечно, нужна ссылка для перехода на официальный сайт компании «Mill Trade» с реквизитами для инвестирования: <a href=https://milltrade.net/asset-management/mill-invest/?ref=527cb70fac928ed225000003>программа Mill-invest</a>

Это лучшее предложение по инвестированию на финансовом рынке 2013 года! По итогам ежегодного международного конкурса Global Banking & Finance Review компания «Mill Trade» стала победителем в номинации <b>«Best New Investment Program Russia & Eastern Europe 2013»</b>

Вкладывайте свои деньги в программу Mill-invest и каждый месяц 2014 года, получая прибыль, убеждайтесь в правильности своего решения!