2.6.4.1. XML-дескриптор экрана

Создадим новый экран для отображения диаграммы.

  1. Выберите New → Screen в контекстном меню элемента Generic UI в дереве проекта. После этого на экране отобразится страница создания стандартных экранов сущности.

  2. В списке доступных шаблонов выберите Blank screen и нажмите Next.

  3. Введите значение stackedarea-chart.xml в поле Descriptor name и нажмите Next.

  4. Перейдите на вкладку Text и замените ее содержимое на следующий код:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<window xmlns="http://schemas.haulmont.com/cuba/screen/window.xsd"
        caption="msg://caption"
        messagesPack="com.company.sampler.web"
        xmlns:chart="http://schemas.haulmont.com/charts/charts.xsd">
    <layout>
        <chart:serialChart id="chart"
                           categoryField="year"
                           height="100%"
                           marginLeft="0"
                           marginTop="10"
                           plotAreaBorderAlpha="0"
                           width="100%">
            <chart:chartCursor cursorAlpha="0"/>
            <chart:legend equalWidths="false"
                          periodValueText="total: [[value.sum]]"
                          position="TOP"
                          valueAlign="LEFT"
                          valueWidth="100"/>
            <chart:valueAxes>
                <chart:axis gridAlpha="0.07"
                            position="LEFT"
                            stackType="REGULAR"
                            title="Traffic incidents"/>
            </chart:valueAxes>
            <chart:graphs>
                <chart:graph fillAlphas="0.6"
                             hidden="true"
                             lineAlpha="0.4"
                             title="Cars"
                             valueField="cars"/>
                <chart:graph fillAlphas="0.6"
                             lineAlpha="0.4"
                             title="Motorcycles"
                             valueField="motorcycles"/>
                <chart:graph fillAlphas="0.6"
                             lineAlpha="0.4"
                             title="Bicycles"
                             valueField="bicycles"/>
            </chart:graphs>
            <chart:categoryAxis axisColor="#DADADA"
                                gridAlpha="0.07"
                                startOnAxis="true"/>
            <chart:export/>
        </chart:serialChart>
    </layout>
</window>

В корневой элемент дескриптора экрана добавлен атрибут xmlns:chart:

<window xmlns:chart="http://schemas.haulmont.com/charts/charts.xsd"
    ...
>

Компонент chart:serialChart содержит следующие атрибуты:

  • categoryField – ключ из набора пар, содержащихся в объектах DataItem, список которых хранится в экземпляре DataProvider, по которому будут взяты значения для подписи оси категорий.

Компонент chart:serialChart содержит следующие элементы:

  • chart:chartCursor – необязательный элемент, добавляющий курсор к диаграмме. Курсор следует за указателем мыши и показывает всплывающие подсказки со значениями элементов диаграммы, над которыми находится указатель мыши.

    • Атрибут cursorAlpha задает степень непрозрачности линий курсора.

  • chart:legend – определяет легенду графика.

    • Атрибут position определяет положение легенды относительно диаграммы.

    • Атрибут equalWidths определяет, должны ли все элементы легенды быть такой же ширины как самый широкий.

    • Атрибут periodValueText задает текст, который будет показан в значении легенды, когда пользователь не располагает указатель мыши ни над одним элементом данных. Теги должны состоять из пары значений – название поля (value / open / close / high / low) и значение периода, для которого должно быть показано значение – open / close / high / low / sum / average / count.

    • Атрибут valueAlign задает выравнивание значения. Возможные значения left и right.

    • Атрибут valueWidth задает ширину значения.

  • chart:valueAxes – элемент, описывающий вертикальные оси значений. В данном случае используется только одна ось, описываемая элементом chart:axis

    • Атрибут position задает положение оси значений относительно диаграммы.

    • Атрибут title задает заголовок оси значения.

    • Установка атрибуту stackType значения REGULAR говорит о том, что используется диаграмма с накоплением. По умолчанию значение этого атрибута – none, в таком случае используется диаграмма без накопления.

    • Атрибут gridAlpha задает степень непрозрачности линий сетки.

  • chart:graphs – элемент, описывающий графы диаграммы. Граф описывается элементом chart:graph.

    • Атрибут type задает тип графа и может быть: line, column, step line, smoothed line, ohlc и candlestick.

    • Атрибут valueField определяет ключ из набора пар, содержащихся в объектах DataItem, список которых хранится в экземпляре DataProvider, по которому будет взято значение.

    • Атрибут fillAlphas задает степень непрозрачности заполнения.

    • Атрибут lineAlpha задает степень непрозрачности линии (или рамки колонки).

    • Атрибут hidden определяет, будет ли граф отображаться.

  • chart:categoryAxis – элемент, описывающий ось категорий.

    • Установка атрибуту startOnAxis значения true дает указание начинать отрисовывать график сразу от оси значений. По умолчанию этот атрибут имеет значение false. В этом случае между осью значений и графиком имеется некоторый промежуток.

    • Атрибут gridAlpha задает степень непрозрачности линий сетки.

    • Атрибут axisColor задает цвет оси.

  • chart:export – добавляет возможность сохранить полученный график.