Графики

Библиотека компонентов

http://n2oapp.net/framework/config/schema/n2o-chart-1.0

Базовые свойства

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
x-field-id	Строка	Идентификатор поля выборки значений по оси x
x-position	top bottom	Положение оси x	bottom
x-has-label	true false	Наличие подписи оси x	false
y-field-id	Строка	Идентификатор поля выборки значений по оси y
y-position	left right	Положение оси y	left
y-has-label	true false	Наличие подписи оси y	false
y-min	Число	Минимальное значение по оси y
y-max	Число	Максимальное значение по оси y
grid-stroke-dasharray	Строка	Паттерн линий сетки
grid-horizontal	true false	Наличие горизонтальных линий сетки	true
grid-vertical	true false	Наличие вертикальных линий сетки	true
tooltip-separator	Строка	Разделитель между названием и значением
legend-icon-type	line square rect circle cross diamond star triangle wye	Тип иконок элементов легенды	line

Настройки

#Количество записей в запросе за данными
n2o.api.widget.chart.size = 20
#Наличие подписи оси x и y
n2o.api.widget.chart.axis.has_label = false
#Положение оси x
n2o.api.widget.chart.axis.x_position = bottom
#Положение оси y
n2o.api.widget.chart.axis.y_position = left
#Наличие горизонтальных линий сетки
n2o.api.widget.chart.grid.horizontal = true
#Наличие вертикальных линий сетки
n2o.api.widget.chart.grid.vertical = true
#Разделитель между названием и значением
n2o.api.widget.chart.tooltip.separator =
#Тип иконок элементов легенды
n2o.api.widget.chart.legend.icon_type = line

Пример

<bars x-field-id="xdata" y-field-id="ydata">
    ...
</bars>

<areas>

Диаграмма-область. Содержит описание областей

Тело

<area> - Список областей

<area>

Область

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
field-id	Строка	Идентификатор поля выборки значений области		!
label	Строка	Заголовок линии
line-type	basis basisClosed basisOpen linear linearClosed natural monotoneX monotoneY monotone step stepBefore stepAfter	Тип интерполяции линии	linear
color	Строка	Цвет области в формате HEX
stroke-color	Строка	Цвет линии в формате HEX
has-label	true false	Наличие подписи значений	false

Настройки

#Тип интерполяции линии
n2o.api.widget.chart.area.line_type = linear
#Наличие подписи значений
n2o.api.widget.chart.area.has_label = false

Пример

<areas x-field-id="name" grid-stroke-dasharray="3 3">
    <area field-id="expenses" line-type="monotone" color="#8884d8"/>
    <area field-id="income" line-type="monotone" color="#82ca9d"/>
</areas>

<bars>

Гистограмма. Содержит описание столбцов

Тело

<bar> - Список столбцов

<bar>

Столбцы

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
field-id	Строка	Идентификатор поля выборки значений столбцов		!
label	Строка	Заголовок столбцов
color	Строка	Цвет столбцов в формате HEX
has-label	true false	Наличие подписи значений	false

Настройки

#Наличие подписи значений
n2o.api.widget.chart.bar.has_label = false

Пример

<bars x-field-id="name" grid-stroke-dasharray="3 3">
    <bar field-id="expenses" color="#8884d8"/>
    <bar field-id="income" color="#82ca9d"/>
</bars>

<lines>

Линейный график. Содержит описание линий

Тело

<line> - Список линий

<line>

Линия

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
field-id	Строка	Идентификатор поля выборки значений линии		!
label	Строка	Заголовок линии
type	basis basisClosed basisOpen linear linearClosed natural monotoneX monotoneY monotone step stepBefore stepAfter	Тип интерполяции линии	linear
color	Строка	Цвет линии в формате HEX
has-label	true false	Наличие подписи значений	false

Настройки

#Тип интерполяции линии
n2o.api.widget.chart.line.type = linear
#Наличие подписи значений
n2o.api.widget.chart.line.has_label = false

Пример

<lines x-field-id="name" grid-stroke-dasharray="3 3">
    <line field-id="expenses" color="#8884d8" type="monotone"/>
    <line field-id="income" color="#82ca9d" type="monotone"/>
</lines>

<pie>

Круговая диаграмма

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
center-x	Число	Координата центра по x
center-y	Число	Координата центра по y
inner-radius	Число	Внутренний радиус	0
outer-radius	Число	Внешний радиус
start-angle	Число	Начальный угол графика (в градусах)	0
end-angle	Число	Конечный угол графика (в градусах)	360
name-field-id	Строка	Идентификатор поля выборки имен секторов
value-field-id	Строка	Идентификатор поля выборки значений секторов	value
tooltip-field-id	Строка	Идентификатор поля выборки тултипов секторов
color	Строка	Цвет круговой области в формате HEX
has-label	true false	Наличие подписи значений	false

Настройки

#Внутренний радиус
n2o.api.widget.chart.pie.inner_radius = 0
#Начальный угол графика (в градусах)
n2o.api.widget.chart.pie.start_angle = 0
#Конечный угол графика (в градусах)
n2o.api.widget.chart.pie.end_angle = 360
#Наличие подписи значений
n2o.api.widget.chart.pie.has_label = false

Пример

<pie center-x="150" center-y="120" inner-radius="50" outer-radius="80"
     name-field-id="name" value-field-id="value" color="#82ca9d" has-label="true"/>