xAxis

определяет поле данных, значение из которого будет отображено на горизонтальной оси

object xAxis;

Example

webix.ui({
    view:"chart",
    ...
    xAxis:{
        title: "Years",
        template: "#year#",
        lines: true
    }
});

Related samples

Bar Chart: Axes

Details

Это свойство применимо только к диаграммам типа bar, line, area, scatter, radar.
Только атрибут 'template' является обязательным.

Атрибуты свойства xAxis различаются для разных типов диаграмм:

template	(string,function) определяет подписи для насечек на шкале	bar, stackedBar, line, spline, area, stackedArea, scatter, barH, stackedBarH, radar
title	(string) подпись для оси	bar, stackedBar, line, spline, area, stackedArea, scatter, barH, stackedBarH
lines	(boolean, function) включает/отключает вертикальные линии на диаграмме (значение по умолчанию зависит от типа диаграммы)	bar, stackedBar, line, spline, area, stackedArea, scatter, barH, stackedBarH, radar
lineColor	(string,function) цвет вертикальных линий (работает, если lines:true) (по умолчанию "#edeff0")	bar, stackedBar, line, spline, area, stackedArea, scatter, barH, stackedBarH, radar
color	(string) цвет линии оси (по умолчанию "#edeff0")	bar, stackedBar, line, spline, area, stackedArea, scatter, barH, stackedBarH
start	(number) минимальное значение шкалы	barH, stackedBarH
end	(number) максимальное значение шкалы	barH, stackedBarH
step	(number) шаг шкалы	barH, stackedBarH

Если атрибуты end, start и step не заданы, они будут рассчитаны автоматически.
Однако вы можете контролировать минимальное значение шкалы, используя свойство origin. Например, если вы установите origin:0, шкала начнется с '0', даже если минимальное значение в наборе данных больше.

Атрибут 'template', заданный как функция

Функция в 'template' вызывается для каждого элемента диаграммы и принимает в качестве параметра объект элемента.

template: function(obj){
    //возвращает название месяца
    return webix.Date.dateToStr("%F")(obj.date); 
}

Атрибут 'lineColor', заданный как функция

Вы можете задать линиям разные цвета, если зададите lineColor как функцию.

Функция будет вызываться для каждого элемента диаграммы. Функция принимает в качестве параметра объект элемента и должна возвращать строку с кодом цвета.

lineColor:function(obj){
    return (obj.year%2 ? "#e9eef9" : "#f3f7ff"); //разные цвета линий для нечетных и четных лет
}

Атрибут 'lines', заданный как функция

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

Функция 'lines' будет вызываться для каждого элемента диаграммы. Функция принимает в качестве параметра объект элемента и должна возвращать true (показать линию) или false (скрыть линию).

lines:function(obj){
    return (obj.year%2 ? true : false); // скрывает линии для нечетных лет
}