Вам не обов’язково бути аналітиком, щоб мати змогу включати дані на свій веб-сайт і в публікації. Додавання діаграм WordPress на ваш веб-сайт додає достовірності інформації, якою ви ділитеся. Візуальне представлення також є важливим способом доповнити письмові звіти та проілюструвати інформацію, якою ви ділитеся. Є чудові інструменти візуалізації даних, які дозволяють легко додавати діаграми, графіки та таблиці до WordPress.

Ці інструменти можуть допомогти навіть найнедосвідченішій людині оцінити дані та зробити висновки, підтверджені статистикою. Ці візуальні представлення легко створити за допомогою плагіна діаграм WordPress або плагіна графіків. Плагіни можуть допомогти спростити та практично автоматизувати процес створення графіків, діаграм і таблиць.

У цій статті надано список найкращих плагінів діаграм, доступних для WordPress, а також докладно про те, як ними користуватися та які переваги пропонують певні плагіни.

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

Плагіни WordPress Charts

wpDataTables

wpDataTables — плагін для таблиць і діаграм №1 у WordPress. Це дозволяє власникам сайтів створювати адаптивні таблиці серед інших типів таблиць і діаграм.

А створити таблицю дуже просто:

Ви надаєте дані таблиці
Налаштуйте та налаштуйте його
Опублікуйте його як таблицю чи діаграму в публікації чи на сторінці

Цей плагін для діаграми WordPress дозволяє легко імпортувати дані з широкого спектру джерел, включаючи Google Таблиці та Excel, а також файли CSV, XML і JSON.

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

Деякі з розширених функцій включають:

Список функцій для wpDataTables божевільний. Ви повинні перевірити сторінку функцій, які має плагін.

Ось відео про те, як використовувати Google Charts у WP за допомогою wpDataTables:

У нас є подібні посібники для Highcharts і Chart.js.

І ось деякі діаграми, які ви можете створити за допомогою нього (приклади Google Charts нижче)

Стовпчаста діаграма Google

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

Гістограма діаграми Google

Як пояснює Google: гістограма – це діаграма, яка групує числові дані в контейнери та відображає контейнери як сегментовані стовпці. Вони використовуються для зображення розподілу набору даних: тобто, як часто значення потрапляють у діапазони.

Google Area Chart

Діаграма з областями схожа на лінійну діаграму, але область під рядковою лінією забарвлена.

Кругова діаграма Google

Секторна діаграма відображає дані у форматі «зрізаного круга», де кожен зріз відповідає одному запису серії (ліва кругова діаграма). Якщо ви ввімкнете параметр 3D, кругова діаграма буде намальована так, ніби вона має три виміри (права кругова діаграма). діаграма).

Гістограма Google із накопиченням

Цей тип діаграми схожий на базову гістограму, але значення серії «складені» праворуч одне від одного на горизонтальних смугах.

Гістограма Google

І багато іншого. Ви можете перевірити їх на нашій сторінці прикладів Google Charts.

Якщо це не переконало вас спробувати wpDataTables, ви можете переглянути інші плагіни діаграм WordPress із цієї статті.

Легкі діаграми

Безкоштовний плагін EasyCharts розроблено з бібліотекою Javascript uvCharts. Він має дванадцять різних типів діаграм:

Гістограма
Гістограма з накопиченням
Підвищена гістограма
Відсоткова гістограма
Діаграма площ
Діаграма з областями накопичення
Відсоткова діаграма площі
Лінійна діаграма
Кругова діаграма
Кругла діаграма
Діаграма полярних областей
Водоспадна діаграма

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

Коли ваші дані в таблиці, і ви готові створити діаграму, EasyCharts надає вражаючу кількість параметрів налаштування. Ви можете налаштувати майже все, включаючи стиль, поля, мітки, типографіку та підписи.

Існує також кілька способів додати діаграму WordPress на свій веб-сайт. Одним із способів є використання короткого коду, який автоматично генерується в EasyCharts. Інший спосіб – скористатися кнопкою EasyCharts на сторінці редактора WordPress, яка дозволяє вибрати діаграму, яку ви хочете вставити. Нарешті, інформаційна сторінка в EasyCharts дозволяє завантажити діаграму як зображення, яке потім можна вставити на сторінку.

Чуйні діаграми

Responsive Charts — це доступне рішення для створення інтерактивних діаграм WordPress. Він використовує charts.js для створення діаграми за вашим вибором. Існує сім типів параметрів діаграми:

Радарна діаграма
Індикатор виконання Bootstrap
Кругла діаграма
Кругова діаграма
Гістограма
Полярна діаграма
Лінійна діаграма

Ви можете додати свої дані вручну та зберегти різні набори даних внизу сторінки. Крім того, ви можете імпортувати файл CSV зі своїми даними. Звідти ви виберете, який тип діаграми ви хочете, а потім налаштуєте його, зокрема назву, визначення ширини діаграми, відступів, кольорів, типографіки та полів.

Коли ви задоволені своєю діаграмою, ви можете вставити її на свій сайт WordPress. Responsive Charts генерує короткий код, який можна вставити на свою сторінку. Крім того, його можна додати через PHP як спеціальний шаблон сторінки.

Одним із недоліків адаптивних діаграм є те, що ви не можете бачити свої зміни в реальному часі. Ви повинні скопіювати та вставити оновлений шорткод на свою сторінку та попередньо переглянути сторінку, щоб побачити, як вона виглядає кожного разу, коли ви вносите зміни. Інший недолік полягає в тому, що немає безкоштовної версії цього плагіна діаграм WordPress, є лише платна версія преміум-класу. Однак це хороший варіант для візуалізації великих обсягів даних із великою кількістю налаштувань.

Графіки ніндзя

Charts Ninja — це безкоштовний веб-сайт для створення діаграм WordPress. Після створення облікового запису ви зможете ввести свої дані на веб-сайт для створення діаграми. Веб-сайт створить шорткод для ваших діаграм, які потім ви додасте в потрібне місце на своєму сайті WordPress. Пов’язаний плагін Charts Ninja в WordPress також безкоштовний, що допомагає конвертувати діаграми з короткого коду у їх візуальне представлення.

На жаль, ви будете обмежені лише гістограмами та круговими діаграмами з безкоштовним обліковим записом. Варіантів налаштування також дуже мало. Проте є можливість платити 2,99 доларів на місяць за доступ до додаткових функцій преміум-класу, включаючи додаткові типи діаграм і налаштування.

WP Responsive Table

WP Responsive Table використовує charts.js для створення будь-якого із семи різних типів діаграм:

Кругова діаграма
Кругла діаграма
Гістограма
Лінійна діаграма
Радарна діаграма
Індикатор виконання Bootstrap
Полярна діаграма

Це доступне рішення плагіна діаграм WordPress із різними параметрами стилю, включаючи поля, відступи, колірні схеми, типографіку тощо. Інформаційна панель адаптивна, її можна прокручувати горизонтально, що ідеально підходить для користувачів із невеликими екранами чи планшетами.

Ви можете додати свої дані вручну або завантаживши файл CSV. WP Responsive Table містить приклади файлів CSV і шаблонів даних, які гарантують ефективне форматування даних перед їх завантаженням.

Вставити діаграми WordPress на веб-сайт також легко. Використовуючи класичний редактор або редактор Гутенберга в WordPress, ви можете використовувати звичайний HTML, щоб додати діаграму на свою сторінку без необхідності короткого коду.

Таблиця ліги

Таблиця ліг – це відносно простий, але дуже універсальний плагін для діаграм WordPress. Це найкраще для обміну статистикою або порівняння в простій таблиці даних. Він також містить понад 100 різних варіантів сервірування столу, і його можна легко налаштувати відповідно до різноманітних потреб.

Вбудована електронна таблиця є інтерактивною та дозволяє користувачам переміщувати дані зі своїх зовнішніх електронних таблиць Excel або Google Sheets прямо в таблицю ліги. Звідти даними можна безпосередньо маніпулювати, включно з використанням формул або рівнянь, сортування стовпців, виділення клітинок або навіть використання спеціального коду.

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

TablePress

TablePress пропонує інтерактивний інтерфейс електронної таблиці, де ви можете вручну вводити дані для своєї таблиці. В електронній таблиці ви можете маніпулювати рядками, стовпцями та комірками, додаючи, видаляючи, об’єднуючи, вставляючи та дублюючи їх як завгодно.

Щоб додати таблицю, перейдіть до інтерфейсу TablePress і натисніть «Додати нову», а потім виберіть опцію «Таблиця». Праворуч ви побачите розділ даних діаграми, де ви можете натиснути «Дані вручну», щоб вручну ввести дані в таблицю. Ви зможете налаштувати свою таблицю за допомогою кодування CSS або замість цього вибрати одне з багатьох безкоштовних розширень плагінів.

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

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

Цей плагін діаграм WordPress має безкоштовну та платну професійну версії. Безкоштовна версія буде достатньою для більшості людей. Проте професійна версія дозволяє користувачам використовувати інтерактивний інтерфейс електронної таблиці для безпосереднього додавання та зміни даних.

Візуалізатор додається до медіа-бібліотеки в WordPress, куди ви можете завантажити свої дані у файлі CSV або в онлайн-каталог, як-от таблицю Google Sheets. Сумісні типи даних включають: рядок, число, логічне значення, дату та час. Потім ви можете створити діаграму, яку можна налаштувати на основі API візуалізації Google. Можна редагувати діаграми після їх створення, а також дублювати існуючі діаграми.

Готові діаграми додаються на вашу сторінку або публікацію WordPress шляхом вставки наданого короткого коду.

CSS3 адаптивний WordPress Порівняйте таблиці цін

Якщо ваш бізнес пропонує різні рівні цін на членство або якщо ви хочете створити порівняльні діаграми, то CSS3 Responsive WordPress Compare Pricing Tables стане ідеальним рішенням. Це може допомогти чітко сформулювати різні особливості багаторівневої системи ціноутворення або порівняти ціни ваших конкурентів.

Таблиці цін, створені за допомогою CSS3, можна легко налаштувати, з 20 різними варіантами кольорів, 60 різновидами стрічок і регульованими розмірами. Адміністратор може навіть приховати певні рядки чи стовпці від користувачів, щоб їх не було видно на інтерфейсі. Зміни вносяться в режимі реального часу, тому ви можете бачити, як вони виглядають. Цей плагін діаграми WordPress гарантує чітку, організовану та сучасну діаграму цін.

Немає обмежень щодо кількості рядків, стовпців або таблиць, які ви можете додати. Він також чуйний, що робить його ідеальним для користувачів мобільних пристроїв і планшетів.

Генератор таблиць даних

Від розробника плагіна Supsystic плагін Data Tables Generator пропонує як безкоштовні, так і преміум-версії. Однак лише преміальна версія дозволяє перетворювати таблиці даних на діаграми та графіки.

Цей плагін для діаграм WordPress використовує Google Chart для створення практично будь-яких типів діаграм, включаючи кругову, стовпчасту, круглу, лінійну тощо. Почніть із простого додавання даних за допомогою CSV, Excel, PDF або Google Sheets. Ви можете сортувати та редагувати дані у своїй таблиці без обмеження кількості стовпців або рядків. Налаштуйте клітинки, стовпці та рядки в таблиці відповідно до бажаного кольору, розміру та вирівнювання серед інших налаштувань.

Можливість інтеграції WooCommerce є унікальною функцією, включеною в плагін Data Tables Generator, який робить справді зручним створення таблиці з можливістю пошуку ваших продуктів, яку також можна сортувати.

Плагін Google Chart WordPress

Плагін Google Chart WordPress дозволяє використовувати Google Chart для створення адаптивних діаграм і графіків, які потім можна вставити на ваш сайт. Існує сім різних варіантів типу діаграми, кожен з яких можна налаштувати:

Кругова діаграма
Гістограма
Лінійна діаграма
Стовпчаста діаграма
Бульбашкова діаграма
Діаграма площ
Ступінчаста площинна діаграма

Налаштування можуть включати 3D-візуалізацію, складені діаграми, інтерактивні або адаптивні функції, зображення тощо. Google Chart зручно інтегровано з Google Sheets, що робить неймовірно простим використання даних із наявної електронної таблиці для створення діаграм і графіків. Щоб скористатися цією функцією, під час створення нової діаграми ви побачите опцію вставити URL-адресу в електронну таблицю Google Таблиць.

Створивши діаграму чи графік на свій смак, ви зможете скопіювати шорткод і вставити його на вибрану сторінку чи публікацію.

iChart

iChart — це дуже популярний безкоштовний варіант, який можна знайти в каталозі плагінів WordPress. Він дозволяє створювати сім різних типів діаграм: стовпчасту діаграму, секторну діаграму, лінійну діаграму, діаграму полярних областей, радарну діаграму або круглу діаграму.

Кожен із цих типів діаграм можна налаштувати відповідно до ваших потреб. Вони реагують на екрани різних розмірів, наприклад мобільні пристрої чи планшети, і ви навіть можете включити анімацію.

Діаграми можна оптимізувати так, щоб вони були меншими за 5 Кб, щоб зробити час завантаження ефективнішим. Їх також можна розмістити на бічній панелі вашого веб-сайту, а не на сторінці чи публікації.

iChart постійно розвивається та впроваджує нові функції, такі як різні колірні схеми, ключові таблиці та віджети.

M Діаграма

M Chart дозволяє використовувати бібліотеки Highchart або chart.js для створення саме тієї діаграми, яку ви бажаєте. Вибирайте лінійні, стовпчасті, секторні та стовпчасті діаграми, і коли діаграму буде створено, ви зможете додати її на свій сайт за допомогою автоматично створеного короткого коду.

Інтерактивна електронна таблиця в M Chart дозволяє легко змінювати й оновлювати дані, роблячи завдання керування наборами даних простим і зручним. Дані можна додати в електронну таблицю вручну або імпортувати файл CSV. Якщо ви вручну додаєте дані в M Chart, ви також можете зручно експортувати ці дані у файл CSV, що є унікальною функцією.

WP Business Intelligence

WP Business Intelligence — чудове рішення для відображення діаграм і таблиць, які оновлюються в режимі реального часу. Він розроблений із концепцією динамічних запитів, щоб представляти дані в режимі реального часу, коли вони змінюються та розвиваються. Ви можете використовувати будь-які внутрішні або зовнішні джерела бази даних для створення таблиць і діаграм. WPBI автоматично отримуватиме дані з цих баз даних, коли змінюватиме та оновлюватиме діаграми на вашому веб-сайті. Він сумісний з електронними таблицями та базами даних MySQL, Oracle, Microsoft SQL Server і PostgreSQL.

Це зручний інструмент звітування на веб-сайтах, яким потрібна найновіша інформація. Він також має зручний зовнішній інтерфейс, де відвідувачі вашого сайту можуть налаштувати вигляд таблиці або навіть завантажити ваші дані у форматі CSV.

Преміум діаграми для Elementor

Якщо ви користуєтеся редактором Elementor, то плагін Premium Charts може допомогти вам створити складні діаграми WordPress. Ви можете вибрати із семи різних типів діаграм, кожен з яких можна налаштувати відповідно до ваших цілей. Ви можете бачити зміни, які ви вносите у свою діаграму, у реальному часі, коли ви створюєте їх у Elementor.

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

amCharts: діаграми та карти

Цей плагін діаграми WordPress призначений для більш досвідчених користувачів WordPress. amCharts історично був дуже досвідченим сервісом Javascript для графіків і карт. Виберіть із дев’яти різних типів діаграм: діаграма XY, кругова діаграма, розрізана діаграма, діаграма Санкі, радарна діаграма, калібрувальна діаграма, хордова діаграма, деревовидна карта та карта. Це унікальні типи діаграм порівняно з багатьма іншими параметрами плагінів.

Розробляючи діаграми, ви можете визначити бібліотеки ресурсів Javascript, HTML і Javascript. Бібліотеки ресурсів Javascript можуть бути з віддаленого або локального джерела. Визначивши ці параметри, ви можете вибрати дані, які бажаєте відобразити візуально. Якщо ви вирішите перейти на інший тип діаграми, ви можете зробити це порівняно просто. Однак вам також потрібно буде перевизначити бажані налаштування для поля ресурсів, HTML і Javascript. В іншому випадку вони повернуться до вибору за замовчуванням на основі ваших налаштувань.

Вбудований засіб перегляду таблиць Google

Цей плагін діаграм WordPress унікальний тим, що ви можете використовувати набори даних, які зберігаються в хмарі, включаючи такі джерела, як Google Таблиці, MySQL або файл CSV. Плагін Inline Google Spreadsheet Viewer створює інтерактивні та настроювані діаграми, таблиці та графіки з вибраними вами даними.

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

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

Кінець роздумам про те, як створювати чудові діаграми WordPress за допомогою цих плагінів

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

Окрім вибору правильного плагіна, щоб ваші діаграми виглядали якнайкраще, є також плагіни, які можуть задовольнити певні потреби. Подумайте, чи оцінять ваші відвідувачі таблицю даних з можливістю пошуку чи сортування. Можливо, інтерактивна діаграма буде більш корисною для того, щоб вони найкраще зрозуміли дані. Деякі також мають параметри, за допомогою яких відвідувачі можуть завантажувати необроблені дані з вашого веб-сайту. Інші можуть оновлювати вашу графіку в режимі реального часу з хмарної або зовнішньої бази даних або електронної таблиці.

Якщо ваш бренд дотримується певних візуальних вказівок або колірних схем, вам може знадобитися плагін, який буде включати більше естетичних налаштувань. Більшість людей також матимуть кращий досвід роботи з адаптивними плагінами, які оптимізують розмір вашої графіки для різних екранів.

Якими б не були ваші потреби, один із цих плагінів обов’язково допоможе, оскільки вони є найкращими інструментами візуалізації даних, доступними для створення діаграм WordPress.

Якщо вам сподобалося читати цю статтю про те, як створювати чудові діаграми WordPress, ви повинні переглянути цю статтю про приклади Chart.js.

Ми також писали про кілька пов’язаних тем, як -от альтернативи Highcharts, типи діаграм і дизайни діаграм.

Джерело запису: wpdatatables.com