Skip to main content

Графики

Компоненты графиков/диаграмм.

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

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

Базовые свойства компонентов#

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
x-field-idСтрокаКлюч значений по оси x
x-positiontop bottomПоложение оси xbottom
x-has-labeltrue falseНаличие подписи оси xfalse
y-field-idСтрокаКлюч значений по оси y
y-positionleft rightПоложение оси yleft
y-has-labeltrue falseНаличие подписи оси yfalse
y-minЧислоМинимальное значение по оси y
y-maxЧислоМаксимальное значение по оси y
grid-stroke-dasharrayСтрокаПаттерн линий сетки
grid-horizontaltrue falseНаличие горизонтальных линий сеткиtrue
grid-verticaltrue falseНаличие вертикальных линий сеткиtrue
tooltip-separatorСтрокаРазделитель между названием и значением
legend-icon-typeline square rect circle cross diamond star triangle wyeТип иконок элементов легендыline

Пример


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

<areas>#

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

Пример

<areas>    <area field-id="uv" color="#ffcccc" stack-id="pv"/>    <area field-id="uv2" color="#ccccff" stack-id="pv2"/></areas>

<bars>#

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

Пример

<bars>    <bar field-id="uv" color="#ffcccc" stack-id="pv"/>    <bar field-id="uv2" color="#ccccff" stack-id="pv2"/></bars>

<lines>#

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

Пример

<lines>    <line field-id="uv" color="#ffcccc"/>    <line field-id="uv2" color="#ccccff"/></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СтрокаЦвет круговой области
has-labeltrue falseНаличие подписи значенийfalse

Пример

<pie outer-radius="100" name-field-id="name" value-field-id="data" color="#ac8213"/>

Элементы графиков/диаграмм#

<area>#

Область.

Атрибуты

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

Пример

<area field-id="uv" color="#8884d8"/>

<bar>#

Столбцы.

Атрибуты

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

Пример

<bar field-id="uv" color="#8884d8"/>

<line>#

Линия.

Атрибуты

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

Пример

<line field-id="uv" line-type="monotone" color="#8884d8"/>