TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Как добавить диаграммы на сайт WordPress?

66

Иногда вам нужно объяснить тему своим пользователям с большим количеством статистических данных. Вашему читателю будет скучно, если вы попытаетесь показать анализ технических данных в текстовом, графическом или видео формате. Хотя вы можете использовать таблицы, у него есть ограничения, например, размещение содержимого на меньшей площади. Лучше всего использовать диаграммы, как в презентациях PowerPoint или Keynote. Диаграмма – это полезный инструмент для демонстрации графического представления результатов анализа данных. Собираете ли вы данные исследования или делитесь анализом данных по определенной теме, нет лучшего инструмента для представления такой информации, чем диаграммы.

Преимущества добавления диаграмм в WordPress

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

Встраивание диаграмм в WordPress предлагает:

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

К счастью, существует множество плагинов WordPress для упрощения процесса публикации диаграмм на вашем веб-сайте. В этом посте мы сосредоточимся на том, как вы можете добавлять диаграммы на сайт WordPress с помощью плагина Visualizer WordPress. Мы также объясним другие параметры с помощью параметров индикаторов выполнения WPBakery Page Builder и Bootstrap.

Установите и активируйте плагин Visualizer

Как добавить диаграммы на сайт WordPress?

Плагин визуализатора

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

Создать и добавить диаграмму в WordPress

  • Чтобы добавить новые диаграммы, перейдите в меню «Медиа» на панели инструментов и выберите «Библиотека визуализатора».

Как добавить диаграммы на сайт WordPress?

Управлять диаграммами

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

Как добавить диаграммы на сайт WordPress?

Список графиков

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

Как добавить диаграммы на сайт WordPress?

Выберите тип диаграммы

  • В разделе «Данные диаграммы» вы можете импортировать данные из файла CSV или URL-адреса. В зависимости от того, где вы сохранили данные, выберите один из вариантов.

Как добавить диаграммы на сайт WordPress?

Импортировать данные

  • В нашем случае у нас есть данные в файле CSV. Итак, мы ищем файл и нажимаем «Импорт».

Как добавить диаграммы на сайт WordPress?

CSV-файл для диаграммы

  • Плагин автоматически сгенерирует для вас диаграмму.

Как добавить диаграммы на сайт WordPress?

Сгенерированная диаграмма

Настройка параметров диаграммы

  • В нижней части параметров данных диаграммы щелкните ссылку настройки «Дополнительно», чтобы открыть настройки диаграммы.

Как добавить диаграммы на сайт WordPress?

Расширенные настройки плагина

  • Это открывает панель «Настройки диаграммы» справа, предлагая различные параметры для настройки диаграммы.
  • В разделе «Общие настройки» вы можете добавить заголовок диаграммы, указать семейство шрифтов, размер и цвет, а также положение легенды.

Как добавить диаграммы на сайт WordPress?

Общие настройки

  • Разверните параметры «Круговая диаграмма» и для параметров 3D выберите «Да», если вы хотите 3D-чат.
  • Вы также можете установить текстовое содержимое фрагмента, начальный угол и порядок категорий среди других элементов диаграммы.

Как добавить диаграммы на сайт WordPress?

Настройки графика

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

Как добавить диаграммы на сайт WordPress?

Настройки макета

  • Внешние действия – разрешить / заблокировать печать, копирование или загрузку диаграммы или данных.
  • Настройки остатка – для улучшения видимости диаграммы и т.д.
  • После настройки параметров нажмите «Создать / сохранить диаграмму» внизу страницы.

Как добавить диаграммы на сайт WordPress?

Создать диаграмму

Предложение SEO: оптимизируйте свой сайт с помощью специальной 14-дневной бесплатной пробной версии Semrush Pro.

Встраивание диаграммы в страницу или публикацию WordPress

  • Добавьте новый или откройте существующий пост в визуальном редакторе. Выберите место, где вы хотите отобразить диаграмму.
  • Добавьте новый блок и выберите «Диаграмма визуализатора» под общими блоками.

Как добавить диаграммы на сайт WordPress?

Добавить диаграмму

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

Как добавить диаграммы на сайт WordPress?

Классический вариант

  • Нажмите на опцию «Показать существующую диаграмму», чтобы отобразить одну из ранее созданных диаграмм.

Как добавить диаграммы на сайт WordPress?

Выбрать диаграмму

  • Выберите диаграмму, которую вы хотите встроить, из списка библиотеки диаграмм.

Как добавить диаграммы на сайт WordPress?

Вставить диаграмму

  • Нажмите «Готово» внизу блока. Вы также можете настроить параметры диаграммы на правой боковой панели.

Как добавить диаграммы на сайт WordPress?

Готово вставка

  • Теперь нажмите кнопку «Предварительный просмотр», чтобы проверить диаграмму, а затем «Опубликовать», чтобы опубликовать диаграмму.

Как добавить диаграммы на сайт WordPress?

Внешний вид

По теме: Как установить WordPress локально на Mac с помощью MAMP?

Примечание:

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

2 Создание диаграмм с помощью WPBakery Page Builder

Есть много других вариантов, например использование Google Charts или других плагинов, таких как WPBakery Page Builder. Визуальный Composer или WPBakery Page Builder плагин предлагается как в комплекте плагин со многими популярными темами. Он предлагает несколько типов графиков с анимацией. Если у вас есть этот плагин, очень легко вставлять диаграммы за считанные минуты.

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

Как добавить диаграммы на сайт WordPress?

Графики конструктора страниц WPBakery

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

3 Использование индикаторов выполнения Bootstrap

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

Как добавить диаграммы на сайт WordPress?

Пример индикатора выполнения

Резюме

Диаграммы и графики могут повысить качество контента веб-сайта, увеличивая впечатления посетителей. Их можно использовать для обобщения сложных данных, результатов исследований или любого другого повествования, которое может показаться скучным читателям. Плагин Visualizer позволяет создавать, управлять и вставлять интерактивные диаграммы в страницы / публикации WordPress в течение минуты. Плагин удобен для пользователя и обладает широкими возможностями настройки, предлагая различные типы диаграмм для всех ваших потребностей в визуализации, от круговых диаграмм, точечных диаграмм до географических диаграмм. Кроме того, плагин бесплатный, но вы можете перейти на версию Pro, чтобы получить доступ к дополнительным функциям.

У вас также есть такие варианты, как диаграммы Google, Visual Composer или Bootstrap, в зависимости от ваших требований.

Источник записи: www.webnots.com

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