WordPress и визуализация данных

Опубликовано: 2022-02-04

У вас есть масса данных, которые вы хотите представить на своем веб-сайте WordPress в графическом формате? Возможно, какая-то статистика продаж или данные, которые показывают клиенту, как вы увеличили посещаемость его веб-сайта за несколько месяцев? Какой бы ни была причина, представление данных в визуальном виде значительно облегчает общение с аудиторией по основным вопросам, а также доставляет больше удовольствия… в конце концов, если вы не настоящий помешанный на числах, корпеющий над электронными таблицами с рядами чисел. никто не представляет себе много веселья!

Вам может понравиться идея представления данных в визуальной форме, но ключевой вопрос — «Как вы это делаете?». Возможно, вам захочется создать график или круговую диаграмму в какой-нибудь программе для графического дизайна (например, Canva), а затем разместить изображение на своем веб-сайте. Это, безусловно, сделает работу, но что, если бы был лучший способ?

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

Легкие графики

Плагин Easy charts — популярный бесплатный плагин, который выполняет свою работу. Он не обновлялся какое-то время, но это, похоже, больше из-за того, что он продолжает нормально работать «как есть», чем из-за какого-либо значительного пренебрежения.

Он хорошо представлен и довольно прост для начала работы. После установки перейдите прямо к ссылке меню «Добавить новый» в области администрирования Easy Charts.

Вы увидите, что вы можете добавлять данные в строки и столбцы (так же, как в Excel или других электронных таблицах. В качестве бонуса есть панель предварительного просмотра, чтобы вы могли видеть результаты на лету.

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

  • Гистограмма
  • Диаграмма области
  • Столбчатая диаграмма с накоплением
  • Диаграмма с областями с накоплением
  • Процентная гистограмма
  • Диаграмма процентной площади
  • Круговая диаграмма
  • Пончиковая диаграмма
  • Пошаговая гистограмма
  • Диаграмма водопада
  • Линейный график
  • Карта полярных областей

Когда вы создадите свою диаграмму, вам будет предоставлен шорткод, который вы затем сможете вставить в сообщение или на страницу. Кроме того, вы можете добавить свою диаграмму непосредственно из визуального редактора, если вы его используете, с помощью кнопки быстрой вставки «Простые диаграммы».

Плагин был разработан с использованием библиотеки Javascript uvCharts и создает диаграммы с переходами SVG и CSS3. В качестве приятного бонуса вы также можете загружать любые диаграммы, которые вы создаете, в виде файла изображения. Наконец, вы также заметите, что диаграммы адаптивны… это необходимо в современном мире мобильного веб-дизайна.

Визуализатор

Плагин Visualizer — еще один популярный выбор для создания красивых, адаптивных диаграмм и диаграмм для вашего веб-сайта. С более чем 40 000 установок и множеством отличных отзывов это отличный вариант.

После установки и активации плагина вы должны увидеть его в списке в меню WordPress. Нажмите «Визуализатор -> Добавить новую диаграмму», чтобы добавить свою первую диаграмму.

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

У вас есть 6 бесплатных шаблонов на выбор:

  • Стол
  • Пирог/пончик
  • Линия
  • Область
  • гео
  • Бар

Вы можете загрузить свои данные в формате CSV локально или импортировать данные из удаленного файла CSV или электронной таблицы Google. Вы, вероятно, захотите сначала загрузить CSV-файл шаблона, чтобы убедиться, что ваши данные структурированы таким образом, что подключаемый модуль их поймет. Кроме того, вы можете импортировать данные из удаленного источника JSON или добавить данные вручную.

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

После того, как вы создали свою диаграмму, вы можете скопировать связанный с ней шорткод или экспортировать ее в виде CSV или изображения. Подключаемый модуль Visualizer использует Google Visualization API, DataTables.net и ChartJS для выполнения вышеуказанного.

wpDataTables

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

После установки и активации перейдите в «wpDatatables -> Создать диаграмму», чтобы начать.

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

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

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

В бесплатной версии мы можем использовать формат файла CSV, Excel, XML или JSON или предоставить сериализованный объект PHP.

Разместите свой сайт с Pressidium

60- ДНЕВНАЯ ГАРАНТИЯ ВОЗВРАТА ДЕНЕГ

ПОСМОТРЕТЬ НАШИ ПЛАНЫ

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

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

Код PHP, который выводит сериализованный массив, должен выглядеть так:

 <?php include('wp-blog-header.php'); header("HTTP/1.1 200 OK"); $return_array = array(); $posts_query = new WP_Query( array( 'post_type' => 'post', 'post_status' => 'publish' ) ); $pages_query = new WP_Query( array( 'post_type' => 'page', 'post_status' => 'publish' ) ); $posts = $posts_query->found_posts; $pages = $pages_query->found_posts; $return_array[] = array( 'Type' => 'Posts', ' Count' => $posts ); $return_array[] = array( 'Type' => 'Pages', 'Count' => $pages ); echo serialize( $return_array ); ?>

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

Мы сохранили код в файле, который мы назвали test.php , и для целей этого примера мы поместим его в корневую папку нашей установки WordPress.

Вернувшись в админку, мы заполним путь к файлу следующим образом:

Сохраняем изменения и вуаля.

Теперь мы можем установить таблицу в качестве источника для диаграммы, выбрать тип диаграммы и сохранить диаграмму. Просто как тот! Заключительные шаги — следовать за Мастером до его завершения, которое будет включать в себя настройку доступных параметров, чтобы получить желаемый дизайн для вашей диаграммы. После этого вы можете опубликовать его.

Вывод

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