close

Вход

Забыли?

вход по аккаунту

?

Геограммы Google Charts

код для вставкиСкачать
Создание интерактивных карт с помощью API 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.
var options = {
colorAxis: {colors: ['#FF6A00', 'purple']},
};
Цвет задается также как в HTML.
В итоге получаем следующее изображение:
Для того чтобы отображать не карту мира а отдельного
региона добавляем функцию region.
var options = {
region: '142',
};
В данном случае код региона 142 обозначает Азию.
Полный список регионов можно просмотреть на странице
https://developers.google.com/chart/interactive/docs/gallery/
geochart в разделе справочной информации.
В итоге получаем следующее изображение:
Полный список функций представлен на странице
https://developers.google.com/chart/interactive/docs/gallery/
geochart в разделе справочной информации.
Спасибо за внимание!
Автор: Сысоев Александр Викторович – учитель географии
МБОУ «Обливская СОШ № 2» Обливского района Ростовской области
s.alexandr.v@gmail.com
Автор
s.alexandr.v
Документ
Категория
Образование
Просмотров
34
Размер файла
2 087 Кб
Теги
1/--страниц
Пожаловаться на содержимое документа