Создание инфографики в QGIS с использованием JavaScript - История изменений

Александр Мурый в 14:24, 7 декабря 2015

2015-12-07T14:24:05Z

← Предыдущая версия		Версия от 16:24, 7 декабря 2015
Строка 19:		Строка 19:
	онлайн-редактор '''Online Chart Maker''' позволяет создавать различные диаграммы и графики (сайт [http://live.amcharts.com/ http://live.amcharts.com/]).		онлайн-редактор '''Online Chart Maker''' позволяет создавать различные диаграммы и графики (сайт [http://live.amcharts.com/ http://live.amcharts.com/]).

	[[Файл:qgischart1.png\|~~800px~~]]		[[Файл:qgischart1.png\|600px]]

	После создания нужной диаграммы сохраним ее на жесткий диск кнопкой Save HTML [[Файл:qgischart2.png]] и сохраним файл как ''amcharts.editor.html''		После создания нужной диаграммы сохраним ее на жесткий диск кнопкой Save HTML [[Файл:qgischart2.png]] и сохраним файл как ''amcharts.editor.html''
Строка 85:		Строка 85:
	Убрав в html-файле background-color, получим прозрачность диаграммы:		Убрав в html-файле background-color, получим прозрачность диаграммы:

	[[Файл:qgischart6.png\|~~800px~~]]]]		[[Файл:qgischart6.png\|600px]]]]

	Также можно создать множество других html-файлов и меняя содержимое таблиц в ''csv''-файле получать динамически меняющиеся диаграммы и графики:		Также можно создать множество других html-файлов и меняя содержимое таблиц в ''csv''-файле получать динамически меняющиеся диаграммы и графики:

	[[Файл:qgischart7.jpg\|~~800px~~]]]]		[[Файл:qgischart7.jpg\|600px]]]]

	Результат редактирования html-файла [[Файл:qgischarts.zip\|qgischarts.zip]].		Результат редактирования html-файла [[Файл:qgischarts.zip\|qgischarts.zip]].

Александр Мурый в 14:22, 7 декабря 2015

2015-12-07T14:22:52Z

← Предыдущая версия		Версия от 16:22, 7 декабря 2015
Строка 1:		Строка 1:
	{{Статья\|~~Черновик~~}}		{{Статья\|Опубликована\|qgis-infographics-javascript}}

	==Введение==		==Введение==

Gimran в 04:30, 27 ноября 2015

2015-11-27T04:30:13Z

← Предыдущая версия		Версия от 06:30, 27 ноября 2015
Строка 7:		Строка 7:

	Для этого будут использованы:		Для этого будут использованы:
	* пакет '''Denwer''' (для создания локального сервера, сайт [http://www.denwer.ru/ http://www.denwer.ru/] )		* пакет '''Denwer''' (для создания локального сервера, сайт [http://www.denwer.ru/ http://www.denwer.ru/])
	* онлайн-редактор '''Online Chart Maker''' (сайт [http://live.amcharts.com/ http://live.amcharts.com/]] )		* онлайн-редактор '''Online Chart Maker''' (сайт [http://live.amcharts.com/ http://live.amcharts.com/]])
	* офисный пакет '''LibreOffice''' (для редактирования таблиц, сайт [https://ru.libreoffice.org/ https://ru.libreoffice.org/] )		* офисный пакет '''LibreOffice''' (для редактирования таблиц, сайт [https://ru.libreoffice.org/ https://ru.libreoffice.org/])
	* ГИС приложение '''QGIS''' в сборке '''NextGIS QGIS''' (для создания картографического материала и визуализации диаграмм и графиков, сайт [http://nextgis.ru/nextgis-qgis/ http://nextgis.ru/nextgis-qgis/] )		* ГИС приложение '''QGIS''' в сборке '''NextGIS QGIS''' (для создания картографического материала и визуализации диаграмм и графиков, сайт [http://nextgis.ru/nextgis-qgis/ http://nextgis.ru/nextgis-qgis/])
	* текстовый редактор '''Notepad++''' (в том числе подсвечивает синтаксис html-файлов, сайт [https://notepad-plus-plus.org/ https://notepad-plus-plus.org/] )		* текстовый редактор '''Notepad++''' (в том числе подсвечивает синтаксис html-файлов, сайт [https://notepad-plus-plus.org/ https://notepad-plus-plus.org/])
			* Python (сайт [https://www.python.org/ https://www.python.org/])

	С незначительными изменениями, связанными с настройкой локального сервера, она может быть использована пользователями Linux.		С незначительными изменениями, связанными с настройкой локального сервера, она может быть использована пользователями Linux.

	~~==Локальный сервер==~~


	==Создание макета диаграммы==		==Создание макета диаграммы==
Строка 56:		Строка 54:
	[[Файл:qgischart3.png\|800px]]		[[Файл:qgischart3.png\|800px]]

	Теперь переместим файлы amcharts.editor.html и amcharts.csv на виртуальный сервер (в моем случае это папка, размещенная по адресу ''Z:\~~home~~\localhost\~~www~~'' ) и для проверки вызовем файл ''amcharts.editor.html'' в браузере (в примере это ''http://localhost/amcharts.editor.html''):		==Локальный сервер==
			Устанавливаем Python (сайт [https://www.python.org/ https://www.python.org/]) и пропишем (в Windows) его в PATH в настройках системы (см. про настройку [http://dimmdev.blogspot.ru/2012/01/path-windows-7-python-2x.html http://dimmdev.blogspot.ru/2012/01/path-windows-7-python-2x.html]) и перезагрузим компьютер.

			Теперь переместим файлы amcharts.editor.html и amcharts.csv на виртуальный сервер (в моем случае это папка, размещенная по адресу ''С:\localhost\'' ).

			В командной строке (cmd) перейдем в папку (пусть в нашем случае это будет ''С:\localhost\'') командой:

			cd С:\localhost\

			Теперь включим локальный сервер. В зависимости от версии ''Python'' надо выполнить команду

			python -m SimpleHTTPServer 8000

			или команду

			python -m http.server 8000

			После успешного выполнения команды, для проверки вызовем файл ''amcharts.editor.html'' в браузере (в примере это ''http://localhost/amcharts.editor.html''):

	[[Файл:qgischart4.png\|800px]]		[[Файл:qgischart4.png\|800px]]

Gimran в 12:00, 26 ноября 2015

2015-11-26T12:00:28Z

← Предыдущая версия		Версия от 14:00, 26 ноября 2015
Строка 8:		Строка 8:
	Для этого будут использованы:		Для этого будут использованы:
	* пакет '''Denwer''' (для создания локального сервера, сайт [http://www.denwer.ru/ http://www.denwer.ru/] )		* пакет '''Denwer''' (для создания локального сервера, сайт [http://www.denwer.ru/ http://www.denwer.ru/] )
	* библиотека '''D3.js''' (для визуализации диаграмм и графиков, сайт [http://d3js.org/ http://d3js.org/] )		* онлайн-редактор '''Online Chart Maker''' (сайт [http://live.amcharts.com/ http://live.amcharts.com/]] )
	* онлайн-редактор '''Online Chart Maker'''~~, использующий библиотеку D3.js~~ (сайт [http://live.amcharts.com/ http://live.amcharts.com/]] )
	* офисный пакет '''LibreOffice''' (для редактирования таблиц, сайт [https://ru.libreoffice.org/ https://ru.libreoffice.org/] )		* офисный пакет '''LibreOffice''' (для редактирования таблиц, сайт [https://ru.libreoffice.org/ https://ru.libreoffice.org/] )
	* ГИС приложение '''QGIS''' в сборке '''NextGIS QGIS''' (для создания картографического материала и визуализации диаграмм и графиков, сайт [http://nextgis.ru/nextgis-qgis/ http://nextgis.ru/nextgis-qgis/] )		* ГИС приложение '''QGIS''' в сборке '''NextGIS QGIS''' (для создания картографического материала и визуализации диаграмм и графиков, сайт [http://nextgis.ru/nextgis-qgis/ http://nextgis.ru/nextgis-qgis/] )
Строка 17:		Строка 16:

	==Локальный сервер==		==Локальный сервер==
	Здесь я использовал пакет '''Denwer'''. Вы можете использовать любой локальный сервер или разместить html-файлы на удаленном сервере.

	~~Скачиваем и настраиваем '''Denwer''' с сайта [http://www.denwer.ru/ http://www.denwer.ru/]~~

	Установка и настройка локального сервера в Denwer описана на сайте в разделе документации и здесь не будем его рассматривать.

	~~По окончании установки и настройки запускаем локальный сервер.~~

	==Создание макета диаграммы==		==Создание макета диаграммы==
	~~Библиотека~~ '''~~D3.js~~''' ~~прозволяет~~ создавать различные диаграммы и графики~~, но требует знаний '''javascript''', поэтому создадим диаграмму в онлайн-редакторе '''Online Chart Maker'''~~ (сайт [http://live.amcharts.com/ http://live.amcharts.com/]).		онлайн-редактор '''Online Chart Maker''' позволяет создавать различные диаграммы и графики (сайт [http://live.amcharts.com/ http://live.amcharts.com/]).

	[[Файл:qgischart1.png\|800px]]		[[Файл:qgischart1.png\|800px]]

Gimran: Новая страница: «{{Статья|Черновик}} ==Введение== Базовые инструменты по созданию диаграмм и графиков в '''QGI…»

2015-11-26T11:55:05Z

Новая страница: «{{Статья|Черновик}} ==Введение== Базовые инструменты по созданию диаграмм и графиков в '''QGI…»

Новая страница

{{Статья|Черновик}}

==Введение==
Базовые инструменты по созданию диаграмм и графиков в '''QGIS''' очень примитивны и не дают возможность создать красивую инфографику.

Целью данной статьи является описание того, как создать динамически обновляемую инфографику средствами '''QGIS'''. В данной статье рассматривается создание инфографики в операционной системе Windows средствами открытых и бесплатных сервисов и ПО.

Для этого будут использованы:
* пакет '''Denwer''' (для создания локального сервера, сайт [http://www.denwer.ru/ http://www.denwer.ru/] )
* библиотека '''D3.js''' (для визуализации диаграмм и графиков, сайт [http://d3js.org/ http://d3js.org/] )
* онлайн-редактор '''Online Chart Maker''', использующий библиотеку D3.js (сайт [http://live.amcharts.com/ http://live.amcharts.com/]] )
* офисный пакет '''LibreOffice''' (для редактирования таблиц, сайт [https://ru.libreoffice.org/ https://ru.libreoffice.org/] )
* ГИС приложение '''QGIS''' в сборке '''NextGIS QGIS''' (для создания картографического материала и визуализации диаграмм и графиков, сайт [http://nextgis.ru/nextgis-qgis/ http://nextgis.ru/nextgis-qgis/] )
* текстовый редактор '''Notepad++''' (в том числе подсвечивает синтаксис html-файлов, сайт [https://notepad-plus-plus.org/ https://notepad-plus-plus.org/] )

С незначительными изменениями, связанными с настройкой локального сервера, она может быть использована пользователями Linux.

==Локальный сервер==
Здесь я использовал пакет '''Denwer'''. Вы можете использовать любой локальный сервер или разместить html-файлы на удаленном сервере.

Скачиваем и настраиваем '''Denwer''' с сайта [http://www.denwer.ru/ http://www.denwer.ru/]

Установка и настройка локального сервера в Denwer описана на сайте в разделе документации и здесь не будем его рассматривать.

По окончании установки и настройки запускаем локальный сервер.

==Создание макета диаграммы==
Библиотека '''D3.js''' прозволяет создавать различные диаграммы и графики, но требует знаний '''javascript''', поэтому создадим диаграмму в онлайн-редакторе '''Online Chart Maker''' (сайт [http://live.amcharts.com/ http://live.amcharts.com/]).

[[Файл:qgischart1.png|800px]]

После создания нужной диаграммы сохраним ее на жесткий диск кнопкой Save HTML [[Файл:qgischart2.png]] и сохраним файл как ''amcharts.editor.html''

==Редактирование HTML-файла==
Откроем файл в текстовом редакторе '''Notepad++''' и после тега <html> допишем отдельной строчкой:
<meta charset="windows-1251">
- для поддержки кириллицы в кодировке '''Windows-1251'''.

После тегов ''<script>'' добавим следующую строку:
<script src="http://cclb.epac.to/amcharts/plugins/dataloader/dataloader.min.js" type="text/javascript"></script>

Эта строка отвечает за чтение сторонних файлов (в нашем случае мы будем читать 'csv''-файл).

Код, заключенный между ''"dataProvider": [ … ]'' заменим на:
"dataLoader": {
"url": "amcharts.csv",
"format": "csv",
"delimiter": ",",
"useColumnNames": true
}
где в '''url''' - ссылка на файл ''amcharts.csv'' с таблицей данных,

в '''format''' - расширение файла csv,

в '''delimiter''' – разделитель запятая,

в '''useColumnNames''' – true означает, что мы используем наименования колонок.

В нашем случае, в файле должно быть две колонки, упомянутых в нашем шаблоне : для '''titleField''' колонка с названием ''country'' и для '''valueField''' – колонка с названием ''labs''.

Создадим файл ''amcharts.csv'' (в кодировке '''UTF-8''' и с разделителем запятая) в приложении '''LibreOffice Calc''' из офисного пакета '''LibreOffice''' эти колонки и заполним таблицу:

[[Файл:qgischart3.png|800px]]

Теперь переместим файлы amcharts.editor.html и amcharts.csv на виртуальный сервер (в моем случае это папка, размещенная по адресу ''Z:\home\localhost\www'' ) и для проверки вызовем файл ''amcharts.editor.html'' в браузере (в примере это ''http://localhost/amcharts.editor.html''):

[[Файл:qgischart4.png|800px]]

==Подготовка макета в NextGIS QGIS==
Теперь откроем проект в '''NextGIS QGIS''' и создадим макет для печати.

В макете нажмем кнопку «'''Добавить html-документ'''» и пропишем адрес нашего файла на локальном сервере:

[[Файл:qgischart5.png|800px]]]]

==Заключение==
Убрав в html-файле background-color, получим прозрачность диаграммы:

[[Файл:qgischart6.png|800px]]]]

Также можно создать множество других html-файлов и меняя содержимое таблиц в ''csv''-файле получать динамически меняющиеся диаграммы и графики:

[[Файл:qgischart7.jpg|800px]]]]

Результат редактирования html-файла [[Файл:qgischarts.zip|qgischarts.zip]].