графики и диаграммы в 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: Также советую прочитать мою более позднюю статью – Создаем Графики, Диаграммы, Графические схемы и др на сайте.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *