Как создавать красивые диаграммы и графики в WordPress
Приветствую всех!
Давно хотел написать про эту тему, но все никак руки не доходили. Но теперь вот дошли и я предлагаю вам свою новую статью о том, как создавать красивые диаграммы и графики в WordPress.
Независимо от того, являетесь ли вы исследователем, собирающим данные о местных выборах, или учителем, делящимся данными о местной популяции дикой природы с вашим классом, нет более подходящих заменителей, чем диаграммы и графики. Эти визуальные инструменты превращают скучные, казалось бы бесполезные данные в легко усваиваемую информацию.
Замечательно то, что вам не нужно беспокоиться о работе со сложным программным обеспечением для построения графиков, поскольку графики и диаграммы в WordPress можно создавать с помощью простых плагинов. Поэтому я здесь, чтобы обрисовать, какие из этих плагинов являются лучшими, а также поговорим о том, как создавать красивые диаграммы и графики в WordPress.
Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится — тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.
Преимущества создания диаграмм и графиков в WordPress
Вам может быть интересно, почему вы не можете просто разработать график или диаграмму, скажем, в Excel, а затем сделать снимок экрана, чтобы разместить его в своем блоге. Иногда этот метод работает нормально, но иногда это огромная трата. Основная причина, по которой вы бы выбрали Excel или другую программу построения диаграмм — это когда вам нужна расширенная функция, недоступная через плагин WordPress.
Иначе, вот преимущества создания диаграмм и графиков WordPress с помощью плагинов:
В целом, плагин для диаграмм в WordPress не только упрощает процесс, но и предоставляет вам большинство функций, которые вам понадобятся для ваших сообщений в блоге.
10 эффективных плагинов для диаграмм и графиков WordPress в 2020 году
Прежде чем мы начнем статью о том, как создавать красивые диаграммы и графики в WordPress, я хотел бы пройтись по лучшим плагинам, чтобы достигнуть то, что вам нужно.
1. wpDataTables
wpDataTables — очень надежный плагин для WordPress! Не позволяй имени обмануть тебя. Это может сделать намного больше, чем просто создать ваши типичные таблицы. Вы можете создавать все виды диаграмм и графиков. Он был специально разработан, чтобы позволить вам вводить большие объемы данных и быстро превратить их в приятный графический дисплей для ваших читателей.
wpDataTables — это премиальный плагин, начинающийся с 44 долларов за лицензию. В настоящее время на CodeCanyon продано более 13 000 экземпляров с рейтингом 4,5 из 5 звезд, так что вы можете быть уверены, что многие люди с удовольствием пользуются им. Некоторые из его особенностей включают в себя:
2. Visualizer
Visualizer — это универсальное решение для диаграмм и таблиц от ThemeIsle.
В бесплатной версии вы можете создавать таблицы, круговые диаграммы, линейные диаграммы, территориальные диаграммы, географические диаграммы, гистограммы, столбчатые диаграммы и точечные диаграммы.
Если вы используете классический редактор WordPress, вы увидите кнопку для визуализатора на панели инструментов: при использовании Гутенберга визуализатор будет доступен в главном меню блока. Убедитесь, что режим «Визуальный редактор» выбран в обеих настройках, чтобы увидеть кнопку визуализатора.
К сожалению, когда использовался Гутенберг, я не смог создать новый график. Мне пришлось переключиться на классический редактор, чтобы увидеть доступные графики.
Как ни странно, вы можете вставлять графики, которые вы создали ранее, когда Гутенберг активирован — вы просто не можете создавать новые.
Переключение на классический редактор позволяет увидеть все параметры графика, включая параметры премиум-графика, которые недоступны в бесплатной версии.
Данные могут быть загружены для вашей таблицы или диаграммы из файла CSV. Вы можете загрузить это напрямую или импортировать из URL.
Премиум версия визуализатора доступна от £57 в год. Он добавляет еще четыре типа графиков: калибр, подсвечник, временная шкала и комбо.
Одна из самых крутых функций премиум-версии — это возможность создавать диаграммы из постов, страниц и других пользовательских типов постов. Дополнительные параметры также доступны для диаграмм, и это добавляет функциональность для создания приватных диаграмм и для пользователей для редактирования диаграмм.
Хотя премиум-версия Visualizer добавляет много полезных опций, я подозреваю, что большинство пользователей WordPress будут довольны функциями, доступными в бесплатной версии.
3. Easy Charts
Easy Charts — это бесплатное решение для работы с диаграммами, разработанное с использованием библиотеки javascript uvCharts.
Всего доступно 12 типов диаграмм: гистограмма, столбчатая гистограмма, ступенчатая гистограмма, процентная гистограмма, площадная диаграмма, линейная диаграмма, круговая диаграмма, кольцевая диаграмма, диаграмма полярных областей и водопадная диаграмма.
Диаграммы добавляются как пользовательский тип публикации, и вы добавляете данные через настраиваемую таблицу, которая позволяет легко изменять цифры. Столбцы и строки могут быть добавлены одним нажатием кнопки.
Для вашего графика отображается шорткод. Однако, если вы предпочитаете, вы можете вставить диаграммы с помощью кнопки «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.
Когда вы закончите, диаграмма будет вставлена в область содержимого с помощью шорткода. Вы можете вернуться и редактировать свои диаграммы в любое время, нажав на кнопку «Вставить график» еще раз. Там будет отображаться список созданных вами диаграмм.
«WordPress Graphs & Charts» является хорошей альтернативой для «WordPress Charts» (который уже не доступен для скачивания). Это базовый плагин, который не позволяет изменять тип созданных диаграмм, а также не позволяет загружать данные через CSV-файлы.
Несмотря на эти ограничения, легко рекомендовать «WordPress Graphs & Charts» всем, кто просто хочет добавить простые диаграммы и графики к своему контенту. Надеюсь, они добавят поддержку Гутенберга в будущем.
5. Responsive Charts
Responsive Charts — это доступное решение для диаграмм, которое позволяет создавать семь анимированных типов диаграмм.
Все диаграммы создаются с помощью Charts.js. Семь типов диаграмм: круговая диаграмма, кольцевая диаграмма, гистограмма, линейная диаграмма, диаграмма полярных областей, радарная диаграмма и индикаторы выполнения начальной загрузки.
Диаграммы могут быть вставлены в ваш контент с помощью шорткодов или непосредственно в шаблоны страниц с помощью PHP. В области настройки диаграммы можно задать имя диаграммы, выбрать тип диаграммы и задать ширину диаграммы.
Есть большая область настроек стиля с десятками опций. Здесь вы можете изменить поля, отступы, типографику и цвета.
Данные могут быть вставлены вручную в нижней части страницы в нескольких наборах данных.
Если вы предпочитаете, вы можете загрузить данные непосредственно через CSV-файл. Шаблон CSV предоставляется, чтобы помочь вам увидеть, как данные могут быть организованы перед загрузкой.
К сожалению, нет возможности просмотреть диаграмму во время ее создания. Вам нужно вставить шорткод в область содержимого, чтобы просмотреть его и увидеть все внесенные изменения.
К счастью, диаграммы, которые вставляются в ваш сайт, выглядят великолепно.
Хотя это и не бесплатно, а стоит $16 «Responsive Charts» является довольно доступным решением. Он имеет много полезных вариантов стиля и позволяет загружать большие объемы данных с помощью CSV-файлов.
Обязательно ознакомьтесь с демонстрацией адаптивных диаграмм администратора, чтобы лучше понять, что может сделать плагин.
6. amCharts: Charts and Maps
По сравнению с другими плагинами в этой статье, «amCharts: Charts and Maps» ориентирован больше на продвинутых пользователей WordPress, чем на новичков. Плагин был разработан javascript сервисом для диаграмм и карт