Как сделать диаграммы и графики WordPress

Здравствуйте, уважаемые читатели XoZbloga! О том как сделать красивые диаграммы и графики на своем блоге WordPress вы узнаете в этой статье. Рассмотрим несколько плагинов для построения диаграмм и графиков, а также более подробно разберем пример работы с одним из этих плагинов.

Независимо от того, являетесь ли вы исследователем, собирающим данные о местных выборах, или учителем, который делится данными о местном населении, дикой природе со своим классом, нет лучше способа красиво и доходчиво донести информацию об этом чем диаграммы и графики. Эти визуальные инструменты превращают скучные, казалось бы, бесполезные данные в легко усваиваемую информацию. Что здорово, так это то, что вам не нужно беспокоиться о работе со сложным программным обеспечением для построения графиков, так как графики и диаграммы WordPress могут быть сделаны с помощью простых плагинов. Поэтому мы сейчас рассмотрим какие из этих плагинов являются лучшими и попробуем один из них.

3 Эффективных плагина WordPress для построения графиков и диаграмм

И так давайте пробежимся по списку достаточно хороших плагинов WordPress для создания графиков и диаграмм:
1. wpDataTables
2. WordPress Charts and Graphs Lite
3. WordPress Charts

1. wpDataTables

wpDataTables — очень надежный плагин WordPress! Не дайте названию обмануть вас. Этот плагин может сделать гораздо больше, чем просто создать типичные таблицы. Вы также можете создавать всевозможные диаграммы и графики. Он был специально разработан, чтобы позволить вам вводить большие объемы данных и обернуть все это в приятный графический для читателей.

wpDataTables является премиум плагином, стоимость $55 за лицензию. В настоящее время он имеет более 19000 продаж на CodeCanyon с 4,5 из 5-звезд, поэтому вы можете быть уверены, что его с удовольствием используют многие люди. Некоторые из его особенностей:

  • Масштабирование, графики одинаково хорошо будут смотреться на любом устройстве
  • Плагин wpDataTables имеет три различных движка: Google Charts, Highcharts, и Chart.js. Это позволяет отображать простые и гибкие диаграммы с большим количеством настраиваемых параметров
  • Автоматическое обновление таблиц и диаграмм в реальном времени
  • Предварительный просмотр диаграмм в интерфейсе вместе с таблицей

Однако не стоит расстраиваться по поводу цены этого плагина, так как есть бесплатная облегченная версия. Вот ссылочка на WordPress.

2. WordPress Charts and Graphs Lite

Что можно делать с этим плагином: вы можете изменить цвета, настроить шрифты, скрыть текст, добавить текст — все это даже после того, как диаграмма будет опубликована. Отображение диаграмм в ваших записях и страницах делается очень просто, вы создаете свою диаграмму, а потом с помощью шорткода размещаете ее на странице. Позже, если вы решите, что хотите изменить тип графика, скажем, блок-график на круговую диаграмму, просто нажмите кнопку «правка» и меняете переключатель. Да, это действительно так просто. Стоит также отметить, что графики одинаково хорошо отображаются на всех экранах устройств (настольные компьютеры, планшеты, мобильные телефоны) всех размеров, потомучто плагин является адаптивным.
Tables and Charts Manager for WordPress (Lite)
Плагин включает в себя девять типов диаграмм, поддержку шорткодов и возможность импорта нагрузок данных с CSV. Существует Lite и Pro версии. Вот некоторые характеристики про версии:

  • Возможность предоставить пользователям возможности редактирования
  • Создание приватной диаграммы
  • Автоматическая синхронизация с онлайн-файлом
  • Дополнительные типы диаграмм
  • Вы получаете доступ в онлайн-редактор

Скачать бесплатную версию плагина с сайта WordPress Visualizer: Tables and Charts Manager for WordPress (Lite)

3. WordPress Charts

Плагин WordPress Charts занимает третье место в этом топе, подходит для создания простых и легковесных конструкций с применением анимации и красочных вариантов оформления.
Плагин WordPress Charts
Плагин предлагает шесть уникальных шаблонов диаграмм и графиков, которые вы можете настроить и вставить свои собственные данные для отображения на своем сайте. Предлагаемый схемы:

  • Линейная
  • Столбцовая
  • Круговая
  • Липестковая
  • Полярная область
  • Кольцевая

Все эти диаграммы построены с использованием HTML5. Параметры настройки в значительной степени бесконечны. Причина, по которой этот плагин нравится, заключается в том, что он чрезвычайно легкий. Вы можете вставить десятки диаграмм во все свои записи на блоге и не иметь проблем.

Создание красивой диаграммы WordPress с помощью плагина

Будем использовать плагин WordPress Charts and Graphs Lite. Конечно другие плагины имеют похожие функции и настройки, но все же интерфейс у всех разный и охватить в одной статье все плагины сложно, поэтому могу порекомендовать попробовать каждый из них и определить, какой из них больше всего подходит именно вам.

Шаг 1: Установка и активация

Не будем заоострять внимание на этом пункте здесь все стандартно, находим плагин по наименованию на странице установки нового плагина либо загружаем его из заранее скачанного архива.

Шаг 2: Библиотека визуализатора и добавление нового графика

WordPress Charts and Graphs Lite также называют визуализатор. Найти страницу настроек этого плагина достаточно трудно, но все что вам нужно сделать, это перейти к Медиафайлы > Visualizer Library. Там нет никаких лишних настроек и ничего не помешает сразу приступить к созданию WordPress диаграмм.

Шаг 2: Библиотека визуализатора и добавление нового графика

После перехода в библиотеку визуализатора вы увидите сообщение «диаграммы не найдены». Это совершенно нормально, так как мы еще не сделали никаких диаграмм. Поэтому, необходимо нажать на кнопку Добавить в верхней части страницы.

Шаг 2: Библиотека визуализатора и добавление нового графика

Здесь показаны все типы диаграмм и графики WordPress, которые вы можете сделать с помощью плагина. Семь типов диаграмм и таблица предоставляются в бесплатной версии. Для примера выберем круговую диаграмму.

После того как выбран тип просто жмем далее:

Шаг 2: Библиотека визуализатора и добавление нового графика

Шаг 3: Импорт данных в диаграмму

По умолчанию плагин автоматически вставляет данные, так что ваша диаграмма не пустая. Однако для представления собственных данных необходимо импортировать их одним из шести способов.
Вы можете:

  • Импорт данных из файла (вероятно, наиболее распространенный метод)
  • Импорт данных из URL
  • Импорт из другой диаграммы (доступно только в версии Pro)
  • Импорт из WordPress (доступно только в версии Pro)
  • Импорт из базы данных (доступно только в версии Pro)
  • Импорт данных вручную (доступно только в Pro версии)

Шаг 3: Импорт данных в диаграмм

В этом примере я импортирую данные из CSV-файла. При импорте данных из файла нажмите кнопку Выбрать файл, найдите файл на своем компьютере, затем нажмите кнопку Импорт на панели инструментов WordPress. После этого должен появится предварительный просмотр того, как ваши данные будут выглядеть слева. Рекомендую во исключение всяких проблем с кодировкой и понимаем того как файл должен выглядеть внутри, скачать пример, ссылка на скачивание находится над кнопкой Выбрать файл. Вот так редактируем CSV-файла:

Шаг 3: Импорт данных в диаграмм

В итоге после импорта получаем следующий вид диаграммы:

Шаг 3: Импорт данных в диаграмм

Шаг 4: Кастомизация внешнего вида графика

Там есть небольшая ссылка ниже всех параметров импорта, которая называется Advanced с иконкой ключа. Нажмите на эту кнопку, чтобы открыть настройки кастомизации диаграммы. Есть довольно много вариантов, чтобы обыграть визуализацию, так что мы не будем рассматривать все опции, можете поиграться самостоятельно 🙂

Начнем с названия диаграммы. Я наберу что-то вроде «Моя тестовая диаграмма». Я также могу изменить шрифт, размер шрифта, цвет и расположение заголовка. Также укажу вариант вида в 3D и изменю цвета. В итоге получается что-то типа такого.

Шаг 4: Кастомизация внешнего вида графика

По мере продвижения по настройкам вы заметите несколько вкладок для таких вещей, как общие настройки, настройки элементов, действия интерфейса и многое другое. Вы, скорее всего, захотите решить, где будет находиться легенда, так как это существенная часть графика.

Кроме того количество и разнообразие настроек полностью зависит от того, какой тип графика вы пытаетесь сделать и какие элементы вам нужно отобразить. Давайте также укажем возможность распечатать и загрузить данные и график.

Шаг 4: Кастомизация внешнего вида графика

Для этого перейдите на вкладку Frontend action. При этом отображаются флажки, позволяющие пользователям печатать и копировать данные. Вы также можете дать им возможность загружать листы Excel и Csv. После завершения настройки графика убедитесь, что вы их сохранили — кнопка для этого снизу.

Шаг 5: Размещение диаграммы в записи с помощью шорткода

После сохранения диаграммы или графика WordPress вернитесь к библиотеке визуализатора. Вы увидите список диаграмм и сможете фильтровать их по типам. Поскольку сейчас у меня есть только один график, я могу сразу увидеть его как единственный вариант. Для того, чтобы опубликовать диаграмму WordPress на странице или в записи вы должны скопировать шорткод диаграммы и вставить его в нужную место текста страницы или записи. Шорткод находится под предварительным просмотром графика (см. скриншот ниже).

Шаг 5: Размещение диаграммы в записи с помощью шорткода

На этом пожалуй все! Теперь вы можете насладиться результатом своей работы. Рекомендую пробежаться по всем настройкам графиков и диаграмм, чтобы понять какие за что отвечают и ощутить все возможности этого плагина. Желаю успехов.

Результат размещения диаграммы на странице

P.S.: после того как вы закончите с оформлением дизайна вашего сайта и его наполнением контекстом, то встанет цель добавить сайт в поисковики, чтобы весь мир узнал о вашем творении. Рекомендую вам ознакомиться с этой статьей для понимая данной темы.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!