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

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

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

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

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

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

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

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

• Перейдите в «Добавить новый» плагин и найдите «Визуализатор». Установите и активируйте плагин.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Внешний вид

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

Примечание:

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

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

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

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

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

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

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

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

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

Резюме

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

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