JavaScript UI виджет Chart

JavaScript виджет Chart включает несколько типов диаграмм, например линейные, Сплайн-диаграммы, двумерные, столбиковые, круговые, круговые 3D, кольцевые, точечные и лепестковые диаграммы. Вы можете менять вид элементов диаграмм, всплывающие подсказки, цвет, шкалу и т.д.

живое демо

  • Интеграция: jQuery, Angular, React, Vue.js, Backbone
  • Примеры интеграции с PHP, Node.js и .NET
  • Поддерживается во всех браузерах (IE8+)
  • Работает на устройствах с сенсорным экраном
  • Соответствует требованиям Секции 508
  • Удобная стилизация с помощью CSS

Типы JavaScript диаграмм

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

  • 2D, 3D кольцевые и круговые диаграммы для отображения долей целого
  • линейные и Сплайн-диаграммы для изменяющихся данных
  • столбиковые и составные столбиковые диаграммы для сравнений показателей в одной категории
  • двумерные диаграммы для сравнения двух или более величин
  • точечные и лепестковые диаграммы для сравнения наборов данных или сравнения данных со средним значением

Несколько диаграмм в одной

С Webix Chart вы сможете создавать диаграммы, включающие линии и столбцы. Вы также сможете скрывать или показывать части диаграммы по клику на легенду.

Сортировка

Данные в JavaScript Chart легко можно отсортировать, задав критерий и направление сортировки.

Отсортируйте данные в диаграмме

Фильтрация

Вы сможете легко фильтровать данные в JavaScript диаграммах Webix, используя API. Вам нужно только задать критерий для поиска данных.

Примените фильтр к данным в диаграмме

Легкая настройка

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

Легенда

Легенду виджета Chart также можно легко настроить. Например, вы можете добавить ярлыки для каждого элемента диаграммы.

Составные диаграммы

Составные диаграммы помогают анализировать отношения части к целому.

Составная столбиковая и и двумерная диаграммы

Диаграмма диапазонов (Rangechart)

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

Измените диапазон

Шкалы JS диаграмм

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

Заготовки стилей

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

Измените стиль диаграммы

Группировка

Разнородные данные можно легко сгруппировать. Так вы сможете визуализировать данные по определенным критериям.

Сгруппируйте данные по разным критериям

Добавление и удаление элементов

Webix позволяет пользователям взаимодействовать с диаграммами. Можно добавлять новые элементы диаграмм или удалять существующие.

Добавьте или удалите элементы диаграммы

Динамические чарты

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