графики и диаграммы в wordpress лучшие плагины и скрипты

Графики и диаграммы в wordpress

Здравствуйте, сегодня рассмотрим топ wordpress плагинов и сервисов для создания графиков и диаграмм в wordpress.

Если вы постоянно создаете оригинальные графики/диаграммы и не хотите их потерять, то вам просто необходимо сохранять их на надежные носители информации, а если вам еще нужно хранить их в систематизированном виде, то диски — это идеальный вариант. К тому же вы можете произвести тиражирование дисков от 100 штук и поделиться своей информацией с друзьями и партнерами по бизнесу.

1. WordPress Charts
Последнее обновление: 2014-1-25
Количество загрузок: 32 617
Страница плагина: “wordpress.org/plugins/wp-charts/installation”

Установка плагина стандартная через панель управления wordpress: Админка — пункт «Плагины» — подпункт «Добавить новый» — в стоку поиска вводим «WordPress Charts», устанавливаем и активируем плагин.

После установки плагина WordPress Charts в вашей админке появиться новый виджет — WordPress Charts:

графики в wordpress

При создании же графиков в записях/страницах необходимо воспользоваться шорткодами, более подробно о них читайте здесь — «wordpress.org/plugins/wp-charts/installation», вот примеры:

Круговая диаграмма:

[wp_charts title="mypie" type="pie" align="alignright" margin="5px 20px" data="10,32,50,25,5"]

Кольцевая диаграмма:

[wp_charts title="mydough" type="doughnut" align="alignleft" margin="5px 20px" data="30,10,55,25,15,8" colors="69D2E7,#E0E4CC,#F38630,#96CE7F,#CEBC17,#CE4264"]

Полярная диаграмма:

[wp_charts title="mypolar" type="polarArea" align="alignright" margin="5px 20px" data="40,32,5,25,50,45" labels="one,two,three,four,five,six"]

Гистограмма:

[wp_charts title="barchart" type="bar" align="alignleft" margin="5px 20px" datasets="40,32,50,35 next 20,25,45,42 next 40,43, 61,50 next 33,15,40,22" labels="one,two,three,four"]

Линейная диаграмма (линейный график):

[wp_charts title="linechart" type="line" align="alignright" margin="5px 20px" datasets="40,43,61,50 next 33,15,40,22" labels="one,two,three,four"]

Радар-диаграмма (радиальные, лепестковая):

[wp_charts title="radarchart" type="radar" align="alignleft" margin="5px 20px" datasets="20,22,40,25,55 next 15,20,30,40,35" labels="one,two,three,four,five" colors="#CEBC17,#CE4264"]

графики и диаграммы в wordpress лучшие плагины и скрипты

Если вышеуказанного источника вам будет мало, то стоит сказать, что плагин WordPress Charts создан на основе скрипта chart.js, более подробно о его настройках читайте тут — «chartjs.org/docs/#line-chart-introduction».

Графикам можно придать анимацию, также они адаптируются под различные устройства.

2. Visualizer
Последнее обновление: 2014-6-4
Количество загрузок: 26 662
Страница плагина: “wordpress.org/plugins/visualizer”

Установка плагина стандартная через панель управления wordpress.

Здесь вы сможете создать уже 9 видов графиков, в отличие от предыдущего плагина здесь нет: кольцевой, полярной диаграммы (лепестковой), радар-диаграммы:

* Круговая диаграмма;
* Гистограмма;
* Линейчатая диаграмма;
* Линейный график (2 вида);
+ Гео-диаграмма;
+ Свечной график;
+ Точечная диаграмма;
+ Индикаторная диаграмма.

Здесь вам нужно будет сначала создать диаграмму/график в табличном редакторе (Microsoft Exсel, OpenOffice Calc и др.), а потом сохранить ее в формате CSV, после загрузить его на сайт wordpress (Админка — Медиафайлы — Visualizer Library:

grafiki3

Скопировать шорткод (находится под графиком) и вставить его в запись/страницу.

3. Easy Chart Builder for WordPress
Последнее обновление: 2013-4-26
Количество загрузок: 28 597
Страница плагина: “wordpress.org/plugins/easy-chart-builder”

Установка плагина стандартная через панель управления wordpress.

После активации плагина в админке, в пункте «Настойки» появится новый подпункт «Easy Chart Builder», здесь можно настроить размеры отображения диаграмм/графиков (ширину, высоту и др), цвета отображения линий, столбцов и т.д., прописать CSS стили для графиков/диаграмм.

Сами же графики/диаграммы вставляются в записи/страницы с помощью шорткодов, о создании которых можно прочитать здесь: «dyerware.com/main/products/easy-chart-builder/easy-chart-builder-plugin-for-wordpress.html».

4. Charts Ninja: Create and add Chart & Graphs to your website on-the-fly
Последнее обновление: 2014-1-26
Количество загрузок: 3 047
Страница плагина: “wordpress.org/plugins/charts-ninja-graphs-and-charts”

Здесь создания графика/диаграммы происходит на внешнем сайте.

Установка плагина стандартная через панель управления wordpress.

После активации плагина в «Редакторе записи/страницы» у вас появиться новая кнопочка:

как создать диаграмму график в wordpress

При нажатии на кнопку выскакивает сообщение с просьбой ввести id графика.

Поэтому переходим на «chartsninja.com/charts/wizard» и создаем график/диаграмму:

графики в wordpress

После сохранения графика вам высветиться сообщение с id графиком:
grafiki6

5. RJ Quickcharts
Последнее обновление: 2015-1-9
Количество загрузок: 5 305
Страница плагина: “wordpress.org/plugins/rj-quickcharts”

Позволяет создать диаграммы/графики за пару минут.
Пожалуй, самый простой из всех выше представленных плагинов.
Позволяет создать 3 вида самых распространенных диаграмм:
— Гистограмма
— Линейная Диаграмма
— Круговая Диаграмма

Установка плагина стандартная через админку wordpress.

После активации плагина в админке появиться новый пункт «RJ Quickcharts».
Интерфейс создания диаграмм/графиков простой и понятный:

grafiki7

Графики/диаграммы в записи/страницы можно вставить с помощью шорткода, например:

[show-rjqc id="1"]

или же заходим в «Редактор записи», нажимаем кнопку «Добавить медиафайл», слева выбираем пункт «Insert Quickcharts» и напротив нужного графика, справа от него нажимаем кнопку «Insert»:

grafiki8

Также есть отличные платные плагины wordpress для создания графиков/диаграмм:

1. Responsive Charts
Страница плагина: «codecanyon.net/item/responsive-charts/7082323?ref=auctionking0509»

2. Google Chart WordPress Plugin
Страница плагина: «codecanyon.net/item/google-chart-wordpress-plugin/6197635?ref=auctionking0509»

PS: Также советую прочитать мою более позднюю статью — Создаем Графики, Диаграммы, Графические схемы и др на сайте.

Добавить комментарий