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

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

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

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

  3. Введите значение column3d-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">
    <data>
        <collection id="countryGrowthDc"
                    class="com.company.sampler.entity.CountryGrowth"
                    view="_local"/>
    </data>
    <layout>
        <chart:serialChart id="chart"
                           angle="30"
                           categoryField="country"
                           dataContainer="countryGrowthDc"
                           depth3D="60"
                           height="100%"
                           plotAreaFillAlphas="0.1"
                           startDuration="1"
                           width="100%">
            <chart:categoryAxis gridPosition="START"/>
            <chart:valueAxes>
                <chart:axis position="LEFT"
                            stackType="BOX_3D"
                            title="GDP growth rate"
                            unit="%"/>
            </chart:valueAxes>
            <chart:graphs>
                <chart:graph id="graph2014"
                             balloonText="GDP grow in [[category]] (2014): &lt;b&gt;[[value]]&lt;/b&gt;"
                             fillAlphas="0.9"
                             lineAlpha="0.2"
                             title="2014"
                             type="COLUMN"
                             valueField="year2014"/>
                <chart:graph id="graph2015"
                             balloonText="GDP grow in [[category]] (2015): &lt;b&gt;[[value]]&lt;/b&gt;"
                             fillAlphas="09."
                             lineAlpha="0.2"
                             title="2015"
                             type="COLUMN"
                             valueField="year2015"/>
            </chart:graphs>
            <chart:export/>
        </chart:serialChart>
    </layout>
</window>

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

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

Диаграмма получает данные из контейнера countryGrowthDc, указанного в атрибуте dataContainer. Для отображения названий и значений используются атрибуты country, year2014 и year2015 сущности CountryGrowth, список экземпляров которой находится в контейнере данных.

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

  • angle – определяет угол наклона диаграммы. Может принимать значения от 0 до 90.

  • balloonText – определяет текст всплывающей подсказки при наведении на колонку диаграммы. Доступны для использования тэги [[value]], [[title]], [[persents]], [[description]], а также ключи из DataItem, список которых хранится в экземпляре DataProvider, либо имена атрибутов сущности в контейнере данных. Для использования html тегов их нужно экранировать.

  • depth3D – толщина диаграммы. При использовании совместно с атрибутом angle позволяет создать эффект объема.

  • plotAreaFillAlphas – степень непрозрачности области графика.

  • startDuration – длительность анимации в секундах.

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

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

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

    • Атрибут gridPosition определяет будет ли линия сетки расположена по центру ячейки или от ее начала.

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

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

    • Установка атрибуту stackType значения BOX_3D говорит о том, что колонки гистограммы будут расположены одна позади другой.

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

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

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

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

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

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