Как вставить диаграмму на сайт

Красивые диаграммы для сайта — анимация на диаграмме и графике

Бывают случаи, когда на лендинге, да и вообще на сайте необходимо представить определенный вид информации. С помощью данной библиотеки вы сможете создавать графики и диаграммы для сайта — это не так сложно, как кажется. Необходимо один раз разобраться (в помощь Вам примеры в данной статье). Затем лишь ввести свои данные и наслаждаться красивыми и анимированными графиками. Такие вещи всегда привлекают внимание.

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

Все 3 примера анимированных графиков можно посмотреть ниже:

Посмотреть примерСкачать

Как использовать красивые графики в своих целях?

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

Создаются такие красивые графики с помощью библиотеки — Chartist.js .

А с применением CSS3 анимации они "оживают" и притягивают внимание. Теперь представьте реакцию посетителей при виде такого на обычном лендинге! Ведь анимацией при прокрутке уже никого не удивишь, а вот подобные элементы всегда будут повышать качество сайта.

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

1 этап. Подключаем необходимые стили и скрипты

Файлы стилей и скриптов можно скачать и разместить на своем хостинге, но гораздо удобнее просто вставить 2 строчки в HTML и подключить все, что нужно:

Если размещаете в конце документа данные строки (это делается для ускорения загрузки страницы ), то не забывайте прописать атрибут property со значением stylesheet у элемента <link> . Это поможет избежать ошибок валидации .

2 этап. Контейнер на странице для графика

На этом этапе задаем тег, в котором будет находиться наш график:

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

3 этап. Задаем значения графика (JS)

Для начала я приведу сразу полный код, который создает вот такой график:

А вот тот, собственно, сам код:

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

• Строка 1 — в этой строке обратите внимание на значение между одинарными кавычками. Здесь указывается селектор блока, в котором у нас будет находится график или диаграмма.
• Строка 2 — через запятую в одинарных кавычках прописываем названия одного деления по оси X.
• Строки с 3 по 6 — здесь задаются значения по оси Y для каждой линии на графике. Одна строка значений в квадратных скобках (в этом скрипте 4-я и 5-я строки) соответствует одной линии.
• Строка 8 — указав значение true , мы растянули график на всю ширину "блока-родителя".
• Строки с 9 по 11 — задаем внутренний отступ справа. Это делается для того, чтобы описание делений по оси X не обрезалось и помещалось в один блок.

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

Пример 1. Анимированный график

Но как же создать такой график, как на изображении выше (изображение анимированное, если у Вас нет анимации, то подождите, пока загрузится) выше?

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

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

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

Пример 2. Анимация выделения главной линии на графике

Здесь (на изображении выше) присутствует анимация. Если Вы ее не видите, то, возможно, у Вас просто не загрузилась картинка, просто подождите.

Это классный способ показать изменения и привлечь внимание к конкретной линии на графике. Все сделано на CSS3. Был использован следующий код для анимации:

Пример 3. Анимация в двух направлениях

Ну и последний пример с анимацией CSS3 — это анимация на графике в двух направлениях.

Для такого эффекта необходимо использовать следующий CSS код и анимацию:

Этими примерами я хотел показать, что создать красивый и, главное, выделяющийся график действительно просто. Достаточно лишь знать хотя бы основы CSS3 анимации. Об этом можно почитать по ссылке ниже.

Изучите внимательно данную статью, и тогда сможете создать любую анимацию на CSS3: CSS3 анимация для самых маленьких .

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

[ВИДЕО] Возможности библиотеки Chartist.js

Вывод

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

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

Создание столбчатых диаграмм с помощью JavaScript

Современный мир буквально переполнен данными, и нам желательно уметь представлять их графически для быстроты и удобства восприятия. Одной из наиболее распространённых техник визуализации данных являются столбчатые диаграммы, и в этой статье я покажу вам, как можно легко создавать их интерактивные версии в JavaScript.

Гистограмма является очень простым, но мощным способом представления данных в случаях, когда нужно сравнить значения. В этом руководстве вы научитесь создавать разные их виды – простые, групповые, стековые и 100% стековые гистограммы, а также эффективно кастомизировать их с помощью всего нескольких строк JS-кода.

Будучи любителем крикета, я внимательно следила за чемпионатом мира ICC T20 2022 среди мужчин, проходившим осенью в Австралии, и в итоге решила взять данные для иллюстраций именно с него. Гистограммы, которые мы построим в ходе этого урока, позволят оценить статистику отбиваний мяча, а конкретно количество очков, заработанных десятью ведущими отбивающими в рамках турнира. Начнём!

1. Базовая гистограмма в JS

Базовую гистограмму можно легко построить всего в четыре шага. Ниже я покажу, что нужно сделать на каждом из них, а также объясню каждую строчку кода.

1. Создание контейнера.
2. Внесение файлов скриптов.
3. Подготовка данных.
4. Написание кода для визуализации.

▍ 1.1 Создание контейнера

Первым делом нужно настроить место для гистограммы.

Если у вас уже есть веб-страница, куда вы хотите её поместить, то просто откройте свой HTML-файл. Если же таковой нет, создайте. После этого добавьте в неё блочный HTML-элемент и присвойте ему ID. Также установите его ширину, высоту и прочие параметры стилизации, согласно вашим нуждам.

Я создала простейшую HTML-страницу, добавила элемент <div> с ID «контейнера» и установила его ширину/высоту равными 100%, чтобы итоговая гистограмма заполнила всю страницу:

▍ 1.2 Внесение файлов скриптов

Самый простой способ быстро создать интерактивную гистограмму для веба – это использовать одну из существующих библиотек JavaScript (англ.). Эти библиотеки представляют наборы готового кода для генерации диаграмм, что позволяет визуализировать данные (англ.) путём минимальных усилий.

Этапы создания гистограммы во всех библиотеках, по сути, остаются одинаковыми. Какую бы вы ни выбрали, добавьте её к веб-странице, указав соответствующие JS-файлы в теге <script> раздела <head> . После этого добавьте ещё один тег <script> в любом месте раздела <head> или <body> — здесь будет размещён код для построения гистограммы.

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

▍ 1.3 Подготовка данных

Далее нужно подготовить данные, которые вы хотите визуализировать.

Я взяла статистику по набору очков десятью ведущими бэтсменами (отбивающий мяч игрок) на упомянутом чемпионате по крикету с сайта ESPNcricinfo и сопоставила итоговые показатели этих бэтсменов в простом многомерном массиве. Естественно, вы можете использовать другой формат данных вроде JSON, XML, CSV и т. д.

▍ 1.4 Написание кода для визуализации

Поле организовано, игроки готовы, жребий брошен – настало время начинать матч! Создание гистограммы с помощью подходящей библиотеки JS (англ.) подобно выбиванию шести очков в крикете – максимальная отдача при минимуме усилий. Ниже я покажу, как можно всё реализовать буквально в нескольких строках кода.

Первым делом я добавляю функцию anychart.onDocumentReady() в тег <script> раздела <body> . Всё остальное будет помещаться в эту функцию.

Затем я создаю экземпляр гистограммы, используя встроенную функцию, и добавляю набор подготовленных данных.

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

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

Вот как выглядит весь код JS в теге <script> :

▍ Результат 1: базовая гистограмма

Вуаля! Простая и функциональная гистограмма готова! Её интерактивная версия вместе с исходным кодом доступна на Playground.

Гистограммы помогают нам проводить сравнение. В нашем случае она показывает, что Virat Kohli прилично вырвался по очкам при том, что между остальными игроками разрыв оказался небольшим.

Но это только начало. Теперь мне также интересно узнать, каким образом каждый из игроков заработал все свои очки. Говоря конкретнее, я хочу выяснить, сколько очков из общего количества было набрано за счёт 6-, 4-очковых ударов, а также путём успешного пробегания до противоположного края питча. Эту информацию можно полноценно отразить с помощью группированной или стековой гистограммы. Далее я продемонстрирую вам, как создавать ту и другую, сопроводив их прекрасной визуализацией.

2. Базовая группированная гистограмма

Группированную гистограмму, как и её простой вариант, с помощью JS можно создать быстро и непринуждённо. По факту основа здесь остаётся той же, и вам достаточно просто поменять данные.

▍ Добавление разных свойств данных

Вместо общих значений мы внесём в гистограмму количество очков, заработанных каждым из 10 ведущих бэтсменов путём 6-, 4-очковых ударов и перебежек до противоположного края питча. Эти данные я взяла с уже упомянутого ресурса ESPNcricinfo и организовала их в датасет:

▍ Сопоставление данных

Далее необходимо сопоставить эти данные с тремя группами, каждая из которых отражает свойство. Первая группа отражает очки, заработанные путём пробегания до противоположного края питча. Вторая показывает очки, полученные путём 4-очковых ударов, а третья — очки, заработанные 6-очковыми ударами.

▍ Создание групп

Теперь можно создать три группы с соответствующими им данными.

▍ Результат 2: группированная гистограмма

Базовая группированная гистограмма готова! Её интерактивную версию вместе с исходным кодом можно найти на Playground.

Группированная гистограмма прекрасно отражает разделение заработанных очков по свойствам каждой категории (то есть каждого игрока). Однако нам также интересно видеть и общие показатели игроков, так что теперь мы создадим стековую гистограмму.

3. Базовая стековая гистограмма

Чтобы превратить столбцы группированной гистограммы в стековое представление, потребуется всего одна короткая строчка JS-кода.

▍ Установка режима стекинга значений

Активируем режим стекинга значений по оси Y.

▍ Результат 3: стековая гистограмма

Готово! Теперь у нас есть базовая стековая гистограмма. Её интерактивная версия вместе с исходным кодом доступна на Playground.

А теперь давайте её украсим!

4. Кастомизация стековой гистограммы

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

▍ Корректировка свойств

При наведении курсора на один из сегментов интерактивного столбца всплывающая подсказка автоматически показывает значения отражаемого им свойства. Но какое из них к чему относится? Давайте проименуем свойства, чтобы всё стало понятно.

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

Для этого я создам функцию, которая будет получать каждое свойство, его название и связанный с ним цвет. Кроме того, я добавлю в эту функцию атрибут перехода ( stroke ), который будет применяться к каждому свойству, делая между ними небольшой отступ.

Теперь я настрою три свойства с помощью только что созданной функции и присвою каждому из них соответствующее название и цвет.

▍ Добавление легенды

Чтобы ещё больше повысить читаемость этой гистограммы, будет нелишним добавить легенду, которая покажет, какой цвет и к какому свойству относится. Это легко сделать, просто включив опцию легенды. Я скорректирую лишь размер шрифта и отступы.

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

▍ Проработка подписей, всплывающей подсказки и заголовка

Как видите, некоторые имена игроков на оси X не видны. Чтобы это исправить, я поверну их подписи.

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

Кроме того, можно отображать в подсказке значения всех свойств вместе, используя режим объединения ( union ).

Наконец, мы немного увеличим заголовок гистограммы, изменим цвет его шрифта и добавим отступы.

▍ Результат 4: стековая гистограмма после кастомизации

Вот и всё! Наша стековая гистограмма кастомизирована. Взгляните, насколько красивой и информативной она стала! Также оцените её интерактивное представление на Playground, где вы можете дополнительно поиграться с кодом, внести собственные данные и так далее.

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

5. 100% стековая гистограмма

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

▍ Переключение режима стекинга столбцов

Чтобы получить представление столбчатой гистограммы в виде процентов, нужно лишь изменить режим стекинга с value на percent .

▍ Результат 5: 100% стековая гистограмма

Готово. Перед вами последний пример визуализации данных в этом руководстве. Также приглашаю оценить его интерактивную версию вместе с исходным кодом на Playground.

Заключение

В этом руководстве я показала, как создавать столбчатые диаграммы с помощью JavaScript (HTML) в разных вариациях: простые, групповые, стековые и 100% стековые. При этом вы также узнали, как их можно кастомизировать.

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

Желаю вам успеха в создании других красивых гистограмм и прочих визуализаций данных!

Красивый JS график на сайт: лёгкая библиотека для ваших проектов

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

• D3.js (238 kB)
• Chart.js (154kB) (65kB)
• Highcharts JS (229kB) (399kB)
• amCharts (249kB)

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

В этой статье хочу представить вашему вниманию простенькую библиотеку для создания вот таких линейных графиков. Вес библиотеки получился сравнительно небольшим: всего 18 kB в сжатом состоянии. Данная библиотека основана на оригинальном скрипте dopyo. На всякий случай приведу ссылку dopyo.js

В библиотеке liteChart я постарался убрать повторяющийся код (скрипт стал легче), добавил градиенты, заливки, улучшил визуальное отображение и ещё кое-что по мелочам. Вот что получилось:

Пример графика

Если вам необходимо ещё более простое решение, рекомендую воспользоваться онлайн сервисом для создания графика. Вам не понадобится подключать дополнительные скрипты. Просто введите данные, получите код диаграммы и вставьте на свой сайт. Профит! А кому нужно более гибкое управление, читайте дальше.

Лёгкий старт

Шаг 1:

Скачайте библиотеку и подключите её к своему проекту:

Не имеет значения где вы её подключите, но лучше, если в «подвале» страницы. Думаю, нет смысла объяснять почему.

Шаг 2:

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

Шаг 3:

Заполняем график и вставляем его в контейнер:

Функция-конструктор liteChart принимает 2 параметра:

id (String) — обязательный
Уникальный идентификатор графика

settings (Object)
Объект содержащий данные о настройках графика. В приведённом выше примере параметр settings пустой, а значит используются настройки по умолчанию, — предустановленные.

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

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

Анимация animate

show (true/false)
Включить или выключить анимацию.
По умолчанию: true

duration (число)
Продолжительность анимации в секундах.
По умолчанию: 0.5

Оси координат axisX и axisY

show (true/false)
Показывать или отключить ось координаты.
По умолчанию: true

color (String)
Задаёт цвет оси координат. Можно использовать цвета hex, rgb или rgba.
По умолчанию: #e9edf1

width (число)
Толщина оси координат в пикселах.
По умолчанию: 2

value (String)
Дополнительная подпись к значениям оси координат.
По умолчанию: null

minValue (число)
Минимальная величина оси координаты. Если значения values передаваемые в метод addLegend меньше установленного значения minValue, график обрезается. Если установлено 0, ось координат рассчитывается автоматически.
По умолчанию: 0

maxValue (число)
Максимальная величина оси координаты. Если значения values передаваемые в метод addLegend больше установленного значения maxValue, график обрезается. Если установлено 0, ось координат рассчитывается автоматически.
По умолчанию: 0

Смещение графика по eventCoord

x и y (число)
Смещение графика по осям x и y.
По умолчанию: 0

Заполнение поля диаграммы fill

fill (null, «origin» или «gradient»)
Задаёт способ заполнения поля диаграммы. Выбирается одно из 3 значений: null — без заполнения, «origin» — сплошная заливка, «gradient» — градиентная заливка.
По умолчанию: «gradient»

Сетка координат gridX и gridY

show (true/false)
Показывать или отключить сетку координат.
По умолчанию: true

interval (число)
Не описано…
По умолчанию: 0

fill (число)
Не описано…
По умолчанию: 1

stroke (String)
Задаёт цвет линий сетки координат. Можно использовать цвета hex, rgb или rgba.
По умолчанию: «#e9edf1»

width (число)
Задаёт толщину линий сетки координат.
По умолчанию: 2

dasharray (число/строка)
Управляет видом пунктирной обводки линий сетки координат.
По умолчанию: «0 10.04»

linecap (строка)
Свойство определяет как будут выглядеть концы линий сетки координат. Возможные значения: butt, round, square.
По умолчанию: «round»

Подписи к осям координат labels

show (true/false)
Показывать или отключить подписи к осям координат.
По умолчанию: true

fontColor (string)
Цвет подписей. Можно использовать цвета hex, rgb или rgba.
По умолчанию: «#c5c6d0»

fontSize (число)
Размер шрифта подписей.
По умолчанию: 12

fontFamily (string)
Шрифт подписей.
По умолчанию: «sans-serif»

fontWeight (string)
Толщина шрифта.
По умолчанию: «normal»

Настройки линий графика line

width (число)
Толщина линий графика.
По умолчанию: 3

style (string)
Тип линий графика. Одно из 2 значений: curve — изогнутые линии, straight — прямые линии.
По умолчанию: «curve»

shadow (true/false)
Отображать или скрыть тень от линии.
По умолчанию: true

dasharray (число/string)
Управляет видом пунктирной обводки линий графика.
По умолчанию: null

Настройки точек графика point

show (true/false)
Показывать или отключить точки.
По умолчанию: true

radius (число)
Величина радиуса точки.
По умолчанию: 5

strokeWidth (число)
Толщина обводки точки.
По умолчанию: 5

stroke (string)
Цвет обводки точки. Можно использовать цвета hex, rgb или rgba.
По умолчанию: «#ffffff»

Значения valueOnliteChart

show (true/false)
Отображать или скрыть значения над точками графика.
По умолчанию: false

Примеры

#1 График без кастомных настроек

Наш график будет выглядеть примерно так:

Пример графика по умолчанию

#2 Прямые линии с подписями по осям

Пример графика с настройками

#3 График со сплошной заливкой

Пример графика

Послесловие

Если вы разбираетесь в CSS, вы можете добавить анимации к линиям или изменить оформление графиков под свои потребности. Многие элементы имеют css классы и вы легко можете управлять внешним видом.

Как создавать красивые диаграммы и полезные диаграммы в WordPress

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

Что замечательно, так это то, что вам не нужно беспокоиться о работе со сложным программным обеспечением для построения диаграмм, поскольку вы можете делать это благодаря простым плагинам WordPress для построения таблиц и диаграмм. Итак, здесь мы должны объяснить, какие из этих плагинов являются лучшими, и мы также рассмотрим, как создавать красивая графика и формы в wordpress.

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

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

В противном случае вот преимущества создания диаграмм и графики на WordPress с помощью плагинов:

• Он объединяет весь ваш график и построитель в одну область. Если вы регулярно строите графики или диаграммы, это сэкономит вам много времени.
• Это позволяет вам вернуться и отредактировать диаграмму при необходимости. Изображение ограничивает количество быстрых исправлений и требует, чтобы вы нашли старый файл, который вы использовали для построения графика.
• Некоторые графики и диаграммы имеют интерактивные функции, которые были бы невозможны с изображением.

В целом, добавление макета в WordPress упрощает процесс, но по-прежнему предоставляет вам большинство функций, которыми вы должны поделиться в своем блоге.

5 мощных плагинов для создания диаграмм и диаграмм на WordPress

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

1. wpDataTables
2. Диаграммы и графики WordPress Lite
3. Диаграммы WordPress
4. Интерактивные карты, диаграммы, графики
5. UberChart

1. wpDataTables

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

wpDataTables — это платное дополнение, от 44 долларов за лицензию. В настоящее время у него более 13 продаж на CodeCanyon с рейтингом 000 из 4.5 звезд, поэтому вы можете быть уверены, что есть много людей, счастливых использовать его. Некоторые из его функций включают:

1. Все зависит от типа используемого устройства, а это означает, что он будет отображаться в красивом диапазоне для каждого устройства.
2. Плагин wpDataTables предлагает три различных механизма построения диаграмм: Google Charts, Highcharts и Chart.js. Это позволяет вам представлять диаграммы простым и гибким способом с множеством опций для их настройки.
3. С автоматическим обновлением таблиц и графиков в реальном времени
4. Предварительный просмотр ваших диаграмм в фоновом режиме вместе с таблицей

2. Диаграммы и графики WordPress Lite

Если вы хотите отображать данные и информацию в своем блоге WordPress с помощью красивых графиков и диаграмм, не ищите ничего, кроме лучших, добавьте Диаграммы и графики WordPress Lite. Он отлично справляется с созданием красивых и интерактивных изображений, предоставляя вам полную свободу настройки вывода, чтобы он соответствовал вашим потребностям: вы можете изменять цвета, настраивать шрифты, скрывать текст, добавлять текст — все это даже после того, как вы опубликовал макет. Отображение диаграмм в ваших сообщениях и страницах так же просто, как загрузка электронной таблицы и добавление автоматически сгенерированного шорткода плагина на вашу страницу.

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

Он включает девять типов диаграмм, поддержку коротких кодов и возможность импорта большого количества данных с помощью CSV. Есть как бесплатная версия, так и платная. Версия Pro стоит не менее 74 долларов (лицензия на один сайт) и предоставляет инструменты для импорта из других диаграмм. Версия Pro включает некоторые другие функции:

• Возможность предоставить пользователям возможности редактирования
• Создайте свою схему
• Автоматическая синхронизация с вашим файлом онлайн
• Дополнительные типы диаграмм
• Вы можете получить доступ к прямому редактору

Плагин Lite по-прежнему очень мощный. Вот несколько схем, которые вы можете составить:

1. линейный график
2. круговая диаграмма
3. гистограмма
4. вертикальная диаграмма
5. диаграмма с областями
6. географическая карта
7. таблица диаграммы
8. полоса
9. столы
10. Комбо-диаграмма
11. диаграмма рассеяния
12. Я немец

3. Диаграммы WordPress

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

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

1. Линия
2. Лента
3. Пирог
4. радар
5. Полярный регион
6. виды пончиков

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

4. Интерактивные карты, диаграммы, графики

Если в настоящее время на вашем веб-сайте есть подключаемый модуль Visual Composer, это может быть надстройка. Интерактивные карты, диаграммы, графики отличительный для вас. Это дополнение к Visual Composer, поэтому нет никаких причин для его использования.

Надстройка продается за 12 долларов и предлагает интерактивные карты, графики и диаграммы, которые размещаются в интерфейсе Visual Composer. Расширение включает векторные иконки, шрифты Google, неограниченное количество цветов и широкий спектр других функций для создания и настройки графиков, таблиц и диаграмм. Расширение содержит стандартные графики и графики, такие как круговые и линейные графики. Существует также уникальная функция карты для выделения определенных областей, будь то карта местности или карта мира.

5. UberChart

добавление UberChart Он более универсален, чем эти платные надстройки, потому что надстройка не требует Visual Composer. Расширение предоставляет 10 встроенных типов диаграмм, которые получают около 240 опций для настройки в диаграмме.

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

1. графики
2. Планы района
3. гистограммы
4. круговые диаграммы
5. кольцевые диаграммы
6. Графические пузыри

Самая впечатляющая часть этого плагина UberChart WordPress — это редактор электронных таблиц. Он позволяет копировать данные из любой программы, которую вы хотите (например, Excel), сочетая в себе более продвинутые функции Excel и универсальность UberChart.

Как создавать красивые диаграммы и диаграммы в WordPress

Один из наших любимых плагинов верстки — Диаграммы и графики WordPress Lite. Итак, мы просто проходим это руководство с объяснением этого дополнения. Другие плагины для построения графиков имеют аналогичные инструменты, но разные интерфейсы. Итак, я бы порекомендовал протестировать все из них, чтобы увидеть, какой из них вам подходит, wpDataTables также является очень мощным дополнением!

Шаг 1. Установите и активируйте WordPress Charts and Graphs Lite.

Шаг 2. Перейдите в библиотеку визуализатора и добавьте новый график.

Как мы вкратце упоминали выше, WordPress Charts and Graphs Lite также называют визуализатором. Страницу настроек найти довольно сложно, но все, что вам нужно сделать, это перейти в Медиа> Библиотека визуализатора. Нет никаких других настроек, которые вам нужно настроить перед тем, как начать работу с макетами WordPress.

Когда вы загрузите библиотеку визуализатора, вы увидите сообщение «Схемы не найдены». Это совершенно нормально, потому что мы еще не запускали графики. Следовательно, вы должны нажать кнопку «Добавить» вверху страницы.

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

Шаг 3. Импортируйте данные в схему WordPress.

Расширение автоматически вставляет данные, чтобы на диаграмме было что отображать. Однако для того, чтобы отправить свои данные, вам нужно будет импортировать их одним из пяти способов. Могли бы вы:

• Импорт данных из файла (вероятно, самый распространенный метод)
• Импортировать данные из URL
• Импорт из другой схемы
• Импорт из WordPress (доступно только в версии Pro)
• Импортировать данные вручную (доступно только в версии Pro)

Например, я собираюсь импортировать данные из файла CSV. Я создал его из файла Excel, который является одним из наиболее распространенных способов переноса данных в диаграмму или график WordPress. При импорте данных из файла нажмите кнопку «Выбрать файл», найдите файл на своем компьютере, а затем нажмите кнопку «Импорт» в панели управления WordPress.

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

Шаг 4: Настройте макет WordPress

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

Но мы можем начать с названия графика. Я напишу что-то вроде «Куда уходит ваше время?» Где мой планировщик определяет процент времени, которое люди тратят на определенные задачи в течение дня. Я также могу изменить шрифт, размер шрифта, цвет и расположение заголовка.

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

Помимо этого, все полностью зависит от типа графика, который вы пытаетесь построить, и элементов, которые вам нужно отобразить. Я собираюсь представить, что это схема WordPress для нескольких моих студентов. Итак, я бы дал им возможность распечатать и загрузить данные и графики.

Для этого перейдите на вкладку Front End Actions. Это откроет флажки, позволяющие пользователям печатать и копировать данные. Вы также можете предоставить им загружаемые таблицы Excel и CSV. После того, как вы закончили настройку графика, обязательно сохраните его.

Шаг 5. Скопируйте шорткод на страницу или в публикацию.

После сохранения диаграммы или графика WordPress вернитесь в библиотеку визуализатора. Вы увидите список диаграмм, и вы сможете отфильтровать их по типам диаграмм. Поскольку сейчас у меня только одна диаграмма, я сразу вижу, что это единственный вариант. Чтобы опубликовать схему WordPress на странице или в публикации, вы должны скопировать шорткод схемы и вставить его на нужную страницу или сообщение. Шорткод находится под предварительным просмотром диаграммы (см. Изображение ниже).

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

Шаг 6. Отобразите график WordPress в интерфейсе

Я рекомендую предварительно просмотреть диаграмму, прежде чем нажимать кнопку «Опубликовать». Таким образом, вы можете видеть то, что видят ваши пользователи, особенно графики и диаграммы WordPress, которые вместо этого могут быть сложными. Если вы посмотрите на снимок экрана ниже, вы увидите предварительный просмотр тестового графика в передней части веб-сайта. Кнопки печати и загрузки видны, макет WordPress имеет приятную анимацию при наведении курсора, а цвета и элементы заголовка выглядят красиво.

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

Вопросы о том, как создать инфографику в WordPress?

Все диаграммы и диаграммы wordpress имеют разные функции. Самое интересное в этих надстройках — это то, что у вас есть вся гибкость. Поэтому я рекомендую вам потратить некоторое время, чтобы проверить графики и понять, что можно сделать с каждой настройкой. Затем вы в конечном итоге станете мастером чертежей, и люди будут спрашивать вас, как это сделать. Если у вас есть какие-либо вопросы или идеи о том, как создавать макеты и графику WordPress, оставьте строку в комментариях ниже.