Как создать диаграммы в WordPress

В данном уроке поговорим о том как создавать диаграммы в Wordpress. Ничего сложного в этом нет, все создается с помощью плагина amCharts: Charts and Maps. Который устанавливается с официального сайта WordPress

[space]

1. Для начала заходим в Плагины -> Добавить новый. В поиске находим amCharts: Charts and Maps. Устанавливаем его и соответственно активируем.

2. После этого в админке Wordpress’a появляется новый пункт Charts & Maps

Пункт Диаграммы в меню WordPress

3. Ну а теперь рассмотрим создание круговой диаграммы.

4. Переходим по пункту  Charts & Maps -> Add New.

5. Прописываем название для будущего объекта диаграммы

[image url=”http://flabme.ru/wp-content/uploads/2014/09/nazvanie-diagrammy.jpg” link=”” title=”Название для диаграммы” size=”medium” target=”” lightbox=”true” align=”center” autoheight=”false” ]

6. Затем выбираем внизу (это самый простой шаблонный способ), какой тип диаграммы будем использовать и нажимаем Apply.

[image url=”http://flabme.ru/wp-content/uploads/2014/09/type_diagramm.jpg” link=”” title=”Тип диаграммы” size=”medium” target=”” lightbox=”true” align=”center” autoheight=”false” ]

7. В окне JavaSript появляется шаблон, в котором меняем данные на свои (здесь можно поиграться с параметрами, инструкцию по которым можно глянуть здесь), а в Resources подключаемые автоматически библиотеки, которые удалять не надо.

[image url=”http://flabme.ru/wp-content/uploads/2014/09/dannie-diagramma.jpg” link=”” title=”Данные для диаграммы” size=”medium” target=”” lightbox=”true” align=”center” autoheight=”false” ]

8. Вводим ID для диаграммы (диаграмм может быть много и они не должны пересекаться в названиях). После этого нажимаем на кнопку Опубликовать

9. Чтобы вставить диаграмму в запись просто вставляете код ниже, где в кавычках указываете ID, который задали в 8 пункте.

ID диаграммы

10. Типы диаграмм (чаще всего используются первые две)

Serial


Pie


XY


Funnel


Radar


Gauge


Stock


Map

Как вы поняли, сложного ничего в построении диаграмм в в Wordpress нет.