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

0

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

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

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

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

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

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

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

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

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

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

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

  • Visualizer: Tables and Charts Manager for WordPress
  • WordPress Graphs & Charts
  • amCharts: Charts and Maps
  • UberChart
  • Interactive Maps, Charts, Graphs – For VC
  • 1. wpDataTables

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    3. Easy Charts

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

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

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

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

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

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

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

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

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

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

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

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

    4. WordPress Graphs & Charts

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

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

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

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

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

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

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

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

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

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

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

    5. Responsive Charts

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

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

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

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

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

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

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

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

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

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

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

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

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

    6. amCharts: Charts and Maps

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

    Комментарии закрыты.