инструмент для создания различных графиков.
Библиотека поддерживает наиболее распространенные типы диаграмм: линейные, сплайн-диаграммы, диаграммы с областями, столбцовые, круговые, кольцевые (диаграммы-пончик), диаграммы разброса (точечные), радар-диаграммы.
Вы можете настроить внешний вид диаграммы: задать другие цвета и темплейты, добавить всплывающие подсказок, изменить масштаб и добавить текстовые ярлыки.
На одном графике можно показывать несколько наборов данных.
Подробнее читайте в описательной документации chart.
var chart = webix.ui({
view:"chart",
type:"bar",
value:"#sales#",
label:"#sales#",
barWidth:35,
radius:0,
gradient:"falling",
data: [
{ id:1, sales:20, year:"02"},
{ id:2, sales:55, year:"03"},
{ id:3, sales:40, year:"04"},
{ id:4, sales:78, year:"05"}
]
});
| add | добавляет элемент в DataStore |
| addSeries | добавляет диаграмму на график |
| adjust | подстраивает размеры компонента под размеры HTML-контейнера |
| attachEvent | задает обработчик внутреннего события компонента |
| bind | связывает данные компонентов |
| blockEvent | временно блокирует вызов ВСЕХ событий вызывающего объекта |
| callEvent | вызывает внутреннее событие компонента |
| clearAll | удаляет все элементы из компонента |
| clearCanvas | очищает диаграмму |
| count | возвращает количество элементов, отображаемых в компоненте на момент вызова |
| define | переопределяет одну или несколько настроек компонента |
| destructor | разрушает компонент |
| detachEvent | удаляет обработчик события (который был задан ранее методом attachEvent) |
| disable | блокирует компонент (он становится серым, клики по нему не срабатывают) |
| enable | делает активным ранее заблокированный компонент |
| exists | проверяет, существует ли элемент с указанным ID |
| filter | фильтрует данные в компоненте |
| find | возвращает все элементы данных, соответствующие заданному критерию, или только первый из элементов |
| getChildViews | возвращает внутренние компоненты |
| getFirstId | возвращает ID первого элемента |
| getFormView | возвращает объект формы, которой принадлежит компонент |
| getIdByIndex | возвращает id элемента по указанному индексу |
| getIndexById | возвращает индекс элемента по заданному ID |
| getItem | возвращает объект элемента данных по заданному ID |
| getLastId | возвращает ID последнего элемента |
| getNextId | возвращает ID элемента, расположенного после указанного элемента на заданной относительной позиции |
| getNode | возвращает HTML-элемент компонента |
| getParentView | возвращает родительский компонент |
| getPrevId | возвращает ID элемента, расположенного до указанного элемента на заданной относительной позиции |
| getTopParentView | возвращает самого верхнего родителя |
| group | группирует данные по указанному полю |
| hasEvent | проверяет, есть ли у компонента обработчики указанного события |
| hide | скрывает компонент |
| hideSeries | скрывает одну из диаграмм компонента (для диаграмм с series) |
| isEnabled | проверяет, активен или заблокирован компонент |
| isVisible | проверяет, виден ли компонент |
| load | загружает данные из внешнего источника данных |
| loadNext | отправляет запрос на загрузку определённого количества строк данных (до конца имеющихся данных или до определённой позиции) |
| locate | получает id элемента по связанному с ним HTML событию |
| mapEvent | направляет события от одного компонента к другому |
| parse | загружает данные, доступные на клиенте |
| queryView | возвращает внутренние компоненты, которые удовлетворяют указанному условию |
| refresh | перерисовывает компонент или один из его элементов |
| remove | удаляет указанный элемент(ы) из DataStore |
| removeAllSeries | удаляет все диаграммы (серии) из компонента chart |
| render | отображает указанный элемент диаграммы или всю диаграмму |
| resize | перерисовывает компонент после изменения размеров |
| serialize | сериализует данные в массив JSON объектов |
| show | делает компонент видимым |
| showSeries | показывает скрытую ранее диаграмму (серию) |
| sort | сортирует DataStore |
| sync | позволяет синхронизировать данные (все или часть) двух компонентов или DataCollection |
| unbind | отменяет связывание компонентов |
| unblockEvent | отменяет блокировку событий, которая была вызвана командой 'blockEvent' |
| ungroup | разгруппировывает данные |
| updateItem | обновляет элемент данных (изменяет его поля) |
| waitSave | позволяет определить момент, когда операции над данными были сохранены на сервер |
| onAfterAdd | срабатывает после добавления элемента в DataStore |
| onAfterContextMenu | срабатывает после вызова контекстного меню |
| onAfterDelete | срабатывает после удаления элемента |
| onAfterLoad | срабатывает после завершения загрузки данных |
| onAfterRender | вызывается после завершения рендеринга диаграммы |
| onAfterScroll | срабатывает после прокрутки содержимого компонента webix |
| onAfterSort | срабатывает после сортировки данных |
| onBeforeAdd | срабатывает перед добавлением элемента в DataStore |
| onBeforeContextMenu | срабатывает перед вызовом контекстного меню |
| onBeforeDelete | срабатывает перед удалением элемента |
| onBeforeLoad | запускается непосредственно перед началом загрузки данных |
| onBeforeRender | срабатывает перед отрисовкой компонента |
| onBeforeSort | срабатывает перед сортировкой данных |
| onBindRequest | срабатывает, когда компонент готов получить данные из главного компонента |
| onBlur | срабатывает при смещении фокуса за пределы компонента |
| onDataRequest | срабатывает, когда данные с сервера запрашиваются для линейных данных (List, DataTable, DataView и т.д.) для динамической загрузки данных |
| onDataUpdate | срабатывает при обновлении элемента данных |
| onDestruct | происходит, когда компонент был разрушен деструктором |
| onEnter | срабатывает после нажатия клавиши Enter |
| onFocus | срабатывает после смещения фокуса на компонент |
| onItemClick | срабатывает после клика по элементу компонента |
| onItemDblClick | срабатывает после двойного клика по элементу компонента |
| onItemSingleClick | позволяет различать события одиночного и двойного клика |
| onKeyPress | срабатывает после того, как пользователь нажал клавишу (для компонента, на котором сейчас фокус) |
| onLegendClick | срабатывает после нажатия на элемент легенды |
| onLoadError | срабатывает при возникновении ошибки во время загрузки данных (невалидный ответ с сервера) |
| onLongTouch | срабатывает после того, как пользователь на достаточно долгое время задержит палец на экране (для устройств с сенсорным экраном) |
| onMouseMove | срабатывает при наведении мыши на указанный компонент |
| onMouseMoving | срабатывает при наведении указателя мыши на компонент |
| onMouseOut | срабатывает, когда курсор мыши убирается с указанного элемента |
| onSwipeX | срабатывает по горизонтальному свайпу |
| onSwipeY | срабатывает по вертикальному свайпу |
| onTabFocus | срабатывает после смещения фокуса на другой компонент с помощью клавиши Tab |
| onTimedKeyPress | срабатывает через некоторое время после нажатия клавиши в текстовом поле |
| onTouchEnd | срабатывает после завершения события touch |
| onTouchMove | срабатывает по время движения пальца по сенсорному экрану |
| onTouchStart | срабатывает после touch-события в компоненте webix |
| onViewResize | срабатывает после того, как пользователь изменил размер компонента с помощью компонента resizer |
| onViewShow | срабатывает, когда компонент появляется (вызов метода show()) |
| alpha | определяет прозрачность элементов графика |
| animate | определяет анимацию для показа компонента в Multiview |
| animateDuration | задает скорость анимации для отрисовки элементов диаграммы в динамическом режиме |
| ariaLabel | задает ярлык Chart для скринридера |
| barOffset | задает расстояние между столбцами, если они слишком широкие |
| barWidth | ширина столбцов диаграммы |
| border | добавляет границы столбцам или области диаграммы |
| borderColor | задает цвет границы области диаграммы |
| borderWidth | определяет ширину границы области диаграммы |
| borderless | скрывает или показывает границы компонента |
| cant | определяет угол наклона круговой 3D диаграммы |
| cellWidth | задает ширину деления шкалы диаграммы в динамическом режиме |
| color | определяет цвета элементов диаграммы |
| container | HTML-контейнер (или его ID), внутри которого компонент должен быть инициализирован |
| css | имя CSS-класса, который будет присвоен HTML-элементу компонента, или объект со стилями |
| data | данные для компонента (массив, типизированный массив, XML или CSV) |
| datathrottle | устанавливает промежуток времени между запросами данных (период времени между завершением одного запроса и началом следующего запроса) |
| datatype | тип загружаемых данных |
| disableLines | убирает линии между точками на радар-диаграмме |
| disabled | блокирует или разблокирует компонент |
| donutInnerText | задаёт текст внутри чарта donut |
| dynamic | включает анимацию для графика |
| eventRadius | задает зону, в пределах которой для элемента диаграммы срабатывают события мыши |
| fill | заполняет область диаграммы указанным цветом фона |
| fixOverflow | отключает корректировку значений, выходящих за пределы шкалы oY |
| gradient | задает градиент для элементов диаграммы |
| gravity | задает удельный (относительный) размер компонента |
| height | задает высоту компонента |
| hidden | скрывает компонент после его инициализации |
| id | ID компонента |
| item | задает вид пунктов на диаграмме |
| keyPressTimeout | задержка между нажатием клавиши и обработчиком |
| label | определяет вид и содержимое ярлыков для элементов диаграммы |
| labelOffset | задает расстояние от ярлыков до границ секторов |
| legend | задает легенду для диаграммы |
| line | определяет линии диаграммы |
| lineColor | устанавливает цвет для линий, разделяющих сектора круговой диаграммы |
| maxHeight | задает максимальную высоту компонента |
| maxWidth | задает максимальную ширину компонента |
| minHeight | задает минимальную высоту компонента |
| minWidth | задает минимальную ширину компонента |
| mouseEventDelay | задержка между реальным действием мыши и вызовом связанных событий |
| multilevel | позволяет использовать древовидную структуру для pie и donut |
| offset | определяет, будет ли первый элемент шкалы нарисован со смещением от начала шкалы |
| on | позволяет присоединять обработчики к внутренним событиям компонента |
| onClick | присоединяет обработчик клика для частей компонента с указанным классом CSS |
| onContext | свойство, используемое для определения пользовательских обработчиков контекстного клика (клика правой кнопкой мыши) для элементов в ячейках DataTable |
| onDblClick | обрабатывает двойные клики по областям и элементам компонентов (по названию их CSS-классов) |
| onMouseMove | обрабатывает событие mousemove для элементов компонента с указанным классом CSS |
| origin | задает начало шкалы |
| padding | задает отступы для содержимого диаграммы |
| pieHeight | высота круговой 3D диаграммы |
| pieInnerText | содержимое и вид ярлыков, которые отображаются внутри секторов круговой диаграммы |
| preset | свойство для выбора одного из подтипов для диаграммы |
| radius | радиус закругления для столбцов диаграммы типа bar |
| ready | обработчик, который вызывается сразу после того, как компонент полностью инициализирован |
| removeMissed | определяет что должно происходить с элементами данных при перезагрузке |
| save | определяет URL для сохранения данных |
| scale | тип шкалы диаграммы (логарифмическая или линейная шкала) |
| scheme | определяет схему для обработки данных |
| series | задает несколько диаграмм, которые нужно показать в одном компоненте chart |
| shadow | включает/отключает тень для круговой диаграммы |
| tooltip | задает тултип, который появится при наведении курсора на элемент |
| type | задает тип диаграммы |
| url | путь к данным, которые загрузятся в компонент сразу после инициализации |
| value | определяет поле данных, значения из которого будет показано на вертикальной оси |
| width | задает ширину компонента |
| x | положение центра круговой диаграммы по горизонтали |
| xAxis | определяет поле данных, значение из которого будет отображено на горизонтальной оси |
| xValue | поле данных, значения из которого будут отображены на горизонтальной оси |
| y | положение центра круговой диаграммы по вертикали |
| yAxis | определяет вертикальную ось |
| yValue | определяет поле данных, значения из которого будет показано на вертикальной оси |
| $getSize | возвращает текущий размер компонентов |
| $height | текущая высота компонента |
| $scope | область имен для событий и методов |
| $setNode | определяет HTML-элемент компонента |
| $setSize | задает размеры компонента |
| $skin | вызывается после применения скина |
| $tooltipIn | показывает тултип |
| $tooltipMove | определяет поведение тултипа в момент, когда курсор перемещается над компонентом или HTML-областью |
| $tooltipOut | определяет поведение тултипа в момент, когда курсор выходит за пределы компонента или HTML-области |
| $view | возвращает HTML-элемент компонента |
| $width | текущая ширина компонента |
| colormap | набор цветовых схем для элементов диаграммы |
| config | все настройки, заданные при инициализации компонента |
| data | DataStore компонента |
| name | возвращает имя компонента (свойство только для чтения) |
| on_click | переопределяет обработку кликов по элементам компонента |
| on_context | свойство, используемое для определения пользовательских обработчиков клика правой кнопкой мыши для элементов в компонентах |
| on_dblclick | определяет обработчики для двойных кликов по элементам компонентов (по названию их CSS-класса) |
| on_mouse_move | добавляет обработчик для события mousemove над элементами компонентов (по названию их CSS-класса) |
| presets | коллекция подтипов для диаграмм |
| waitData | конечный результат загрузки данных в компонент (промис) |