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

Приветствую всех!

Давно хотел написать про эту тему, но все никак руки не доходили. Но теперь вот дошли и я предлагаю вам свою новую статью о том, как создавать красивые диаграммы и графики в WordPress.

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

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

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

Преимущества создания диаграмм и графиков в WordPress

Вам может быть интересно, почему вы не можете просто разработать график или диаграмму, скажем, в Excel, а затем сделать снимок экрана, чтобы разместить его в своем блоге. Иногда этот метод работает нормально, но иногда это огромная трата. Основная причина, по которой вы бы выбрали Excel или другую программу построения диаграмм – это когда вам нужна расширенная функция, недоступная через плагин WordPress.

Иначе, вот преимущества создания диаграмм и графиков WordPress с помощью плагинов:

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

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

10 эффективных плагинов для диаграмм и графиков WordPress в 2020 году

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

1. wpDataTables

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

wpDataTables

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

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

2. Visualizer

Visualizer – это универсальное решение для диаграмм и таблиц от ThemeIsle.

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

Если вы используете классический редактор WordPress, вы увидите кнопку для визуализатора на панели инструментов: при использовании Гутенберга визуализатор будет доступен в главном меню блока. Убедитесь, что режим “Визуальный редактор” выбран в обеих настройках, чтобы увидеть кнопку визуализатора.

Visualizer

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

Как ни странно, вы можете вставлять графики, которые вы создали ранее, когда Гутенберг активирован – вы просто не можете создавать новые.

вы можете вставлять графики

Переключение на классический редактор позволяет увидеть все параметры графика, включая параметры премиум-графика, которые недоступны в бесплатной версии.

на классический редактор

Данные могут быть загружены для вашей таблицы или диаграммы из файла CSV. Вы можете загрузить это напрямую или импортировать из URL.

импортировать из URL

Премиум версия визуализатора доступна от £57 в год. Он добавляет еще четыре типа графиков: калибр, подсвечник, временная шкала и комбо.

Одна из самых крутых функций премиум-версии – это возможность создавать диаграммы из постов, страниц и других пользовательских типов постов. Дополнительные параметры также доступны для диаграмм, и это добавляет функциональность для создания приватных диаграмм и для пользователей для редактирования диаграмм.

Хотя премиум-версия Visualizer добавляет много полезных опций, я подозреваю, что большинство пользователей WordPress будут довольны функциями, доступными в бесплатной версии.

3. Easy Charts

Easy Charts – это бесплатное решение для работы с диаграммами, разработанное с использованием библиотеки javascript uvCharts.

Всего доступно 12 типов диаграмм: гистограмма, столбчатая гистограмма, ступенчатая гистограмма, процентная гистограмма, площадная диаграмма, линейная диаграмма, круговая диаграмма, кольцевая диаграмма, диаграмма полярных областей и водопадная диаграмма.

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

Для вашего графика отображается шорткод. Однако, если вы предпочитаете, вы можете вставить диаграммы с помощью кнопки “Easy Charts” на странице редактора и просто выбрать ту, которую хотите вставить.

Easy Charts

Если вы сохранили свои данные, вы сможете увидеть предварительный просмотр диаграммы.

Изменив тип диаграммы в области конфигурации, а затем сохранив диаграмму снова, вы можете увидеть, как ваши данные выглядят во всех 12 типах диаграмм.

Изменив тип диаграммы

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

Количество вариантов

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

С тонной опций, 12 типов диаграмм и несколько готовых цветовых схем, Easy Charts – отличный выбор.

4. WordPress Graphs & Charts

Разработан с использованием HTML5, javascript framework Vue.JS и Chart.js, WordPress Graphs & Charts – это простое решение, которое поддерживает восемь типов диаграмм.

Доступные типы диаграмм: круговая диаграмма, кольцевая диаграмма, диаграмма полярных областей, гистограмма, линейная диаграмма, радарная диаграмма, пузырьковая диаграмма и точечная диаграмма.

Если классический редактор активирован, вы увидите кнопку “Вставить график” на панели инструментов редактора. К сожалению, когда Гутенберг активен, нет блока, доступного для “WordPress Graphs & Charts”. Это, очевидно, проблема, которая должна быть решена, так как Гутенберг активен по умолчанию в WordPress сейчас.

WordPress Graphs & Charts

Когда вы нажмете на кнопку “Вставить график”, вам будет предложено добавить график. Затем можно выбрать тип графика, который вы хотите использовать.

Вставить график

Мне нравится, как плагин позволяет добавлять данные в диаграмму. Всякий раз, когда вы добавляете данные, определяете метки или меняете цвета, изменения немедленно обновляются в окне предварительного просмотра диаграммы справа. В этом отношении он работает аналогично настройщику WordPress.

Когда вы закончите, диаграмма будет вставлена в область содержимого с помощью шорткода. Вы можете вернуться и редактировать свои диаграммы в любое время, нажав на кнопку “Вставить график” еще раз. Там будет отображаться список созданных вами диаграмм.

отображаться список

“WordPress Graphs & Charts” является хорошей альтернативой для “WordPress Charts” (который уже не доступен для скачивания). Это базовый плагин, который не позволяет изменять тип созданных диаграмм, а также не позволяет загружать данные через CSV-файлы.

Несмотря на эти ограничения, легко рекомендовать “WordPress Graphs & Charts” всем, кто просто хочет добавить простые диаграммы и графики к своему контенту. Надеюсь, они добавят поддержку Гутенберга в будущем.

5. Responsive Charts

Responsive Charts – это доступное решение для диаграмм, которое позволяет создавать семь анимированных типов диаграмм.

Все диаграммы создаются с помощью Charts.js. Семь типов диаграмм: круговая диаграмма, кольцевая диаграмма, гистограмма, линейная диаграмма, диаграмма полярных областей, радарная диаграмма и индикаторы выполнения начальной загрузки.

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

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

Responsive Charts

Данные могут быть вставлены вручную в нижней части страницы в нескольких наборах данных.

Если вы предпочитаете, вы можете загрузить данные непосредственно через CSV-файл. Шаблон CSV предоставляется, чтобы помочь вам увидеть, как данные могут быть организованы перед загрузкой.

данные могут быть организованы

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

К счастью, диаграммы, которые вставляются в ваш сайт, выглядят великолепно.

выглядят великолепно

Хотя это и не бесплатно, а стоит $16 “Responsive Charts” является довольно доступным решением. Он имеет много полезных вариантов стиля и позволяет загружать большие объемы данных с помощью CSV-файлов.

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

6. amCharts: Charts and Maps

По сравнению с другими плагинами в этой статье, “amCharts: Charts and Maps” ориентирован больше на продвинутых пользователей WordPress, чем на новичков. Плагин был разработан javascript сервисом для диаграмм и карт amCharts.

Доступны девять типов диаграмм: XY-диаграмма, круговая диаграмма, срезанная диаграмма, диаграмма Сэнки, радарная диаграмма, калибровочная диаграмма, хордовая диаграмма, древовидная карта и карта.

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

Charts and Maps

Для каждого типа диаграммы можно определить библиотеки ресурсов Javascript по умолчанию, используемые HTML и Javascript. Эти настройки будут использоваться в качестве отправной точки для любой новой диаграммы, которую вы выберете. Затем вы можете изменить данные по своему усмотрению.

изменить данные

Как только вы узнаете, как это работает, вы оцените, насколько мощными могут быть amCharts.

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

конкретного типа диаграммы

Проверьте “amCharts: Charts and Maps”, если вы продвинутый пользователь, который хочет больше контроля над используемыми библиотеками Javascript.

Если вы используете основной сервис amCharts, вы также должны проверить плагин “Amcharts Embed WordPress” от Rami Yushuvaev, который позволяет вам вставлять диаграммы, созданные с помощью плагина.

7. M Chart

M Chart – это бесплатный плагин WordPress, который позволяет вам использовать Chart.js или любую библиотеку Highcharts.

Страница общих настройки позволяет решить, следует ли просматривать диаграммы и разрешено ли удаленное встраивание диаграмм.

Доступны только четыре типа диаграмм: линейная диаграмма, столбчатая диаграмма, гистограмма и круговая диаграмма.

M Chart

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

Если вам предпочтительнее, вы можете загрузить данные с помощью CSV-файла.

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

плагинов для диаграмм

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

Предварительный просмотр

Высота диаграммы может быть определена, и вы можете выбрать отображение надписи.

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

выбираете единицу измерения

M Chart – это отличное бесплатное решение для диаграмм. Легко добавлять данные и вставлять заполненные диаграммы в свой контент, используя шорткоды.

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

8. UberChart

UberChart – это передовое решение для работы с диаграммами, которое продается по цене 30 долларов США и предлагает 240 настраиваемых параметров на диаграмму и 30 настраиваемых параметров на набор данных.

Всего доступно десять типов диаграмм: линейные диаграммы, диаграммы областей, гистограммы, горизонтальные гистограммы, круговые диаграммы, кольцевые диаграммы, радарные диаграммы, диаграммы полярных областей, точечные диаграммы и пузырьковые диаграммы.

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

UberChart

Данные могут быть импортированы через файл CSV или скопированы и вставлены непосредственно в область данных из электронных таблиц, таких как Excel.

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

множество вариантов отладки

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

настройки стиля

С сотнями опций, хорошим выбором типов диаграмм, поддержкой нескольких языков и WordPress Multisite, UberChart является одним из лучших решений для диаграмм, доступных сегодня.

Проверьте страницу примеров диаграмм Uber, чтобы увидеть качество диаграмм и графиков, которые могут быть созданы с помощью плагина.

9. WP Charts and Graphs

Предпоследним в моем списке является бесплатный плагин “WP Charts and Graphs”. Этот базовый плагин поддерживает шесть типов диаграмм: круговая диаграмма, диаграммы полярных областей, пончиковая диаграмма, линейная диаграмма, гистограмма и радарная диаграмма.

Все, что вам нужно сделать, это добавить заголовки и соответствующие им данные, а затем нажмите кнопку Создать.

WP Charts and Graphs

Когда вы нажмете кнопку создать, предварительный просмотр диаграммы будет отображаться вместе с шорткодом, который вам нужно будет вставить на страницу для отображения диаграммы.

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

изменения в диаграмме

“WP Charts and Graphs” беззастенчиво основной. Там нет выделенной страницы настроек, нет страницы, на которой перечислены ранее созданные диаграммы и нет способа изменить используемые цвета.

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

10. Interactive Maps, Charts, Graphs – For VC

Если на вашем веб-сайте в настоящее время имеется плагин “Visual Composer”, плагин “Interactive Maps, Charts, Graphs” может быть для вас. Это дополнение к “Visual Composer”, так что нет никаких причин, чтобы получить его иначе.

Interactive Maps

Аддон продается за $12, который затем предоставляет интерактивные карты, диаграммы и графики, все упакованные в интерфейс “Visual Composer”. В дополнение входят векторные иконки, шрифты Google, неограниченное количество цветов и широкий набор других функций для создания и настройки диаграмм и графиков. В надстройке есть стандартные диаграммы и графики, такие как круговые и линейные графики. Есть также уникальная функция карты для выделения определенных областей, будь то локальная карта или карта мира.

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

Один из моих любимых плагинов для диаграмм – “WordPress Charts и Graphs Lite”. Поэтому мы с вами собираемся пройти этот урок только с этим плагином. Другие плагины для диаграмм имеют похожие инструменты, но разные интерфейсы. Поэтому я бы рекомендовал протестировать все из них, чтобы увидеть, какой из них подходит вам, так как wpDataTables также очень надежен!

Шаг 1: Установите и активируйте плагин WordPress Charts и Graphs Lite

Достаточно просто.

Шаг 2. Перейдите в библиотеку визуализатора и добавьте новый график

Как я кратко упомянул выше, плагин “WordPress Charts and Graphs Lite” также называется “Visualizer”. Довольно сложно найти страницу настроек, но все, что вам нужно сделать, это перейти в “Медиа – Visualizer Library”. Нет никаких других настроек, которые вы должны настраивать перед началом работы с вашими диаграммами WordPress.

Visualizer Library

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

Добавить новую

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

выбрать круговую диаграмму

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

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

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

Импорт данных

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

Это должно показать вам предварительный просмотр слева того, как ваши данные будут выглядеть. Хорошей новостью является то, что вы всегда можете вернуться и настроить форматирование в вашем CSV-файле и попробовать еще раз. На следующем шаге также есть множество инструментов для настройки, чтобы все выглядело немного лучше.

Шаг 4: Настройте свою диаграмму WordPress

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

Но мы можем начать с заголовка диаграммы. Я напишу что-то вроде “Куда уходит ваше время?”, поскольку в моей таблице указан процент времени, которое люди тратят на выполнение определенных задач в течение дня. Я также могу изменить шрифт, размер шрифта, цвет и расположение заголовка.

Настройте свою диаграмму

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

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

распечатать и загрузить

Для этого перейдите на вкладку “Frontend Actions”. Это показывает флажки, позволяющие пользователям печатать и копировать данные. Вы также можете предоставить им загружаемые таблицы Excel и CSV. Как только вы закончите настраивать свой график, убедитесь, что вы сохранили его.

Шаг 5. Скопируйте шорткод на страницу или пост

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

Скопируйте шорткод

Скопировав шорткод, создайте страницу или публикацию или перейдите к уже опубликованной. Найдите, куда вы хотите добавить график и вставьте шорткод.

Шаг 6: Просмотр графика WordPress в веб-интерфейсе

Я бы порекомендовал предварительно просмотреть график перед нажатием кнопки “Опубликовать”. Таким образом, вы узнаете, что происходит с вашими пользователями, тем более что диаграммы и графики WordPress могут быть довольно привередливыми. Если вы посмотрите на скриншот ниже, вы увидите превью моего тестового графика на веб-сайте. Кнопки “Печать” и “Загрузка” видны, диаграмма WordPress имеет отличную анимацию при прокрутке, а цвета и элементы заголовка выглядят хорошо.

цвета и элементы заголовка

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

Последние мысли

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

Все диаграммы и графики WordPress имеют разные функции. Самое замечательное в этих плагинах – это то, что у вас есть вся гибкость в мире. Поэтому я рекомендую вам потратить время на тестирование ваших графиков и понимание того, что делает каждая настройка параметров. Затем вы в конечном итоге станете мастером графиков, и люди будут спрашивать вас, как это сделать. Если у вас есть какие-либо вопросы или мысли о том, как создавать диаграммы и графики WordPress, оставьте строку в комментариях ниже.

Используете ли вы любой из этих плагинов? Знаете ли вы о каких-либо других замечательных плагинах для вставки диаграмм и графиков?

Жду ваших ответов.

А у меня все – до скорых встреч!

Вам понравилась статья?
плохохорошо (Пока оценок нет)
Загрузка...
Обо мне
Юрич:
Занимаюсь созданием сайтов на WordPress более 6 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на WordPress, шаблон для сайта или лендинг - не стесняйтесь - пишите. Рад буду помочь!
2 комментария к статье "Как создавать красивые диаграммы и графики в WordPress"
  1. Юрич: 22.11.2019 в 11:34 -

    Добрый день, Николай!
    После описания плагинов есть практическая часть на примере одного плагина из списка. Просто прочтите внимательнее)))

  2. Николай: 22.11.2019 в 11:29 -

    Безусловно, ваша статья обширная и интересная. Однако мне больше пришлось бы по душе, если вы в коротком обзоре представили один плагин с пошаговой инструкцией создания графиков и диаграмм. А так глаза разбегаются и не знаешь куда примкнуть и что делать.