Презентация «Инструкция по созданию геограмм с помощью сервиса Google Charts»

Создание интерактивных карт с помощью API Google Charts

Переходим по ссылке: https://developers.google.com/chart/interactive/docs/gallery/geochart

Выбираем подходящий тип диаграммы.

Копируем html-код под выбранной диаграммой.

Вставляем скопированный код в программу блокнот (или в любую аналогичную программу, например, notepad++)

var data = google.visualization.arrayToDataTable([ ['Country', 'Popularity'], ['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700] ]); Редактируем в тексте массив стран. Можно использовать русские названия стран.

var data = google.visualization.arrayToDataTable([ ['Страны', 'Площадь территории, млн. км. кв.'], ['Россия', 17.1], ['Канада', 10], ['Китай', 9.6], ['США', 9.5], ['Бразилия', 8.5], ['Австралия', 7.7], ['Индия', 3.3] ]); Так, например, чтобы создать карту крупнейших по площади стран, необходимо изменить код следующим образом:

Сохраняем отредактированный документ как web-страницу. Для этого в меню «файл» выбираем пункт «сохранить как»

В появившемся диалоговом окне пишем имя файла с указанием расширения html (например, 1.html), меняем тип файла на «Все файлы» и выбираем кодировка UTF-8. Затем выбираем место сохранения и нажимаем кнопку сохранить.

Открываем полученный файл – карта готова. Важно помнить, что данная карта будет отображаться только при наличии Интерне-соединения.

Чтобы получить версию для работы в offline режиме сохраняем открытую web-страницу (сочетание клавиш Ctrl+S) в новое место или под новым именем.

Выбираем тип сохранения «Веб-страница полностью». Вместе с новым сохраненным файлом появится папка с скриптами и таблицами стилей, которые будут использоваться при отсутствии Интернет соединения.

Для вставки карты в запись блога необходимо скопировать полученный код, предварительно удалив парные теги <html></html> <head> </head> <body> </body> и вставить в режиме «html» (может быть другое названия в зависимости от CMS блога.

<div id="regions_div" style="width: 900px; height: 500px;"></div> Размер карты можно варьировать. Для этого необходимо поменять часть кода. width: 900px задает длину карты, равную 900 пикселей height: 500px задает высоту карты равную 500 пикселей

var options = { colorAxis: {colors: ['#FF6A00', 'purple']}, }; При редактировании кода можно поменять некоторые настройки визуализации в разделе var options = {}; Так, например, для смены бело-зеленной схемы карты, необходимо добавить функцию colorAxis. Цвет задается также как в HTML.

В итоге получаем следующее изображение:

var options = { region: '142', }; Для того чтобы отображать не карту мира а отдельного региона добавляем функцию region. В данном случае код региона 142 обозначает Азию. Полный список регионов можно просмотреть на странице https://developers.google.com/chart/interactive/docs/gallery/geochart в разделе справочной информации.

В итоге получаем следующее изображение:

Полный список функций представлен на странице https://developers.google.com/chart/interactive/docs/gallery/geochart в разделе справочной информации.