ui.chart

инструмент для создания различных графиков.

Библиотека поддерживает наиболее распространенные типы диаграмм: линейные, сплайн-диаграммы, диаграммы с областями, столбцовые, круговые, кольцевые (диаграммы-пончик), диаграммы разброса (точечные), радар-диаграммы.

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

На одном графике можно показывать несколько наборов данных.

Подробнее читайте в описательной документации 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"}
    ]
});

С чего начать

Methods
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 позволяет определить момент, когда операции над данными были сохранены на сервер
Events
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 срабатывает после двойного клика по элементу компонента
onKeyPress срабатывает после того, как пользователь нажал клавишу (для компонента, на котором сейчас фокус)
onLegendClick срабатывает после нажатия на элемент легенды
onLoadError срабатывает при возникновении ошибки во время загрузки данных (невалидный ответ с сервера)
onLongTouch срабатывает после того, как пользователь на достаточно долгое время задержит палец на экране (для устройств с сенсорным экраном)
onMouseMove срабатывает при наведении мыши на указанный компонент
onMouseMoving срабатывает при наведении указателя мыши на компонент
onMouseOut срабатывает, когда курсор мыши убирается с указанного элемента
onSwipeX срабатывает по горизонтальному свайпу
onSwipeY срабатывает по вертикальному свайпу
onTabFocus срабатывает после смещения фокуса на другой компонент с помощью клавиши Tab
onTimedKeyPress срабатывает через некоторое время после нажатия клавиши в текстовом поле
onTouchEnd срабатывает после завершения события touch
onTouchMove срабатывает по время движения пальца по сенсорному экрану
onTouchStart срабатывает после touch-события в компоненте webix
onViewResize срабатывает после того, как пользователь изменил размер компонента с помощью компонента resizer
onViewShow срабатывает, когда компонент появляется (вызов метода show())
Properties
alpha определяет прозрачность элементов графика
animate определяет анимацию для показа компонента в Multiview
animateDuration задает скорость анимации для отрисовки элементов диаграммы в динамическом режиме
ariaLabel задает ярлык Chart для скринридера
barWidth ширина столбцов диаграммы
border добавляет границы столбцам или области диаграммы
borderColor задает цвет границы области диаграммы
borderWidth определяет ширину границы области диаграммы
borderless скрывает или показывает границы компонента
cant определяет угол наклона круговой 3D диаграммы
cellWidth задает ширину деления шкалы диаграммы в динамическом режиме
color определяет цвета элементов диаграммы
container HTML-контейнер (или его ID), внутри которого компонент должен быть инициализирован
css имя CSS-класса, который будет присвоен HTML-элементу компонента, или объект со стилями
data данные для компонента (массив, типизированный массив, XML или CSV)
datathrottle устанавливает промежуток времени между запросами данных (период времени между завершением одного запроса и началом следующего запроса)
datatype тип загружаемых данных
disableLines убирает линии между точками на радар-диаграмме
disabled блокирует или разблокирует компонент
dynamic включает анимацию для графика
eventRadius задает зону, в пределах которой для элемента диаграммы срабатывают события мыши
fill заполняет область диаграммы указанным цветом фона
fixOverflow отключает корректировку значений, выходящих за пределы шкалы oY
gradient задает градиент для элементов диаграммы
gravity задает удельный (относительный) размер компонента
height задает высоту компонента
hidden скрывает компонент после его инициализации
id ID компонента
item задает вид пунктов на диаграмме
keyPressTimeout задержка между нажатием клавиши и обработчиком
label определяет вид и содержимое ярлыков для элементов диаграммы
labelOffset задает расстояние от ярлыков до границ секторов
legend задает легенду для диаграммы
line определяет линии диаграммы
lineColor устанавливает цвет для линий, разделяющих сектора круговой диаграммы
maxHeight задает максимальную высоту компонента
maxWidth задает максимальную ширину компонента
minHeight задает минимальную высоту компонента
minWidth задает минимальную ширину компонента
mouseEventDelay задержка между реальным действием мыши и вызовом связанных событий
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 определяет поле данных, значения из которого будет показано на вертикальной оси
Other
$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 конечный результат загрузки данных в компонент (промис)
Наверх