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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Предложение SEO: Получите специальную 14-дневную бесплатную пробную версию с SEMrush для анализа вашего сайта.

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

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

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

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

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

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

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

Связанный: Как установить WordPress локально на Mac с помощью MAMP?

Примечание:

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

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

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

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

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