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

Тем не менее, это далеко от реальности, если у вас есть надлежащий инструмент.

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

Какую таблицу тепловой карты мы можем создать? Ну, что-то вроде этого примера ниже:

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

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

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

Как создать таблицу тепловой карты с помощью wpDataTables

1 Создание таблицы с нуля

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

Чтобы начать создавать таблицу данных вручную, откройте панель администратора WordPress, перейдите в wpDataTables -> Создать таблицу, выберите третий вариант «Создать таблицу вручную» и нажмите «Далее».

Вам будет показан шаг мастера, который поможет вам создать структуру таблицы, в которой вы создадите 14 столбцов: период, год, а все остальные будут названиями месяцев (январь, февраль…). Для столбцов периода вы оставите тип столбца «Однострочная строка», а для всех остальных установите тип столбца «Целое число».

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

2 Создание тепловой карты таблицы из источника данных

Если у вас есть данные в каком-либо источнике данных, таком как Excel, CSV, JSON, электронная таблица Google, XML, сериализованный массив PHP или таблица в базе данных (источник SQL), вы будете использовать второй вариант в мастере таблиц.

Чтобы начать создание таблицы данных, связанной с существующим источником данных, откройте панель администратора WordPress, перейдите в wpDataTables -> Создать таблицу, выберите второй вариант «Создать таблицу данных, связанную с существующим источником данных»., и нажмите «Далее».

В зависимости от того, какой у вас источник, вы будете следовать инструкциям:

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

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

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

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

Чтобы настроить цветовую палитру данных таблицы простым и интуитивно понятным способом, мы используем условное форматирование. Для первого столбца мы устанавливаем условие, что если ячейка содержит 2, то «Установить класс CSS ячейки» на «сине-белый текст», чтобы у нас был белый цвет шрифта на синем фоне.

Затем мы создаем эти классы в поле «Пользовательский CSS» на вкладке «Настроить» в настройках таблицы следующим образом:


.wpdt-c .wpDataTablesWrapper .wpDataTable-1 td.blue{ background-color: #0083c2 !important;}

.wpdt-c .wpDataTablesWrapper .wpDataTable-1 td.white-text{ color: #FFFFFF !important;}

Как это:

Где номер 1 в .wpDataTable-1 — это идентификатор вашей таблицы, поэтому вам нужно будет изменить его для своей таблицы.

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

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


.wpdt-c .wpDataTablesWrapper .wpDataTable-2 td.white-text{ color: #FFFFFF !important;}

.wpdt-c .wpDataTablesWrapper .wpDataTable-2 td.black-text{ color: #000000 !important;}

Где номер 2 в .wpDataTable2 — это идентификатор вашей таблицы, поэтому вам нужно будет изменить его для своей таблицы.

Вот и все!

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

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

Теперь, что вам нужно сделать, это появиться на ваших страницах в интерфейсе. Как и в любом другом плагине, мы используем шорткоды для отображения таблиц на страницах пользователей или в сообщениях. Добавлять шорткоды очень просто, особенно если вы используете популярные конструкторы страниц, такие как Elementor, WP Bakery или Gutenberg.

Примеры тепловых карт таблицы

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

Мы также написали о нескольких связанных темах, таких как альтернативы DataTables, библиотеки таблиц JavaScript, как создать таблицу, таблицу опроса и плагины таблицы цен WordPress .

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