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

Откройте в CUBA Studio вкладку GENERIC UI и создайте экран в модуле web. Введите значение column3d-chart.xml в поле Descriptor. В полях Id, Controller Name и Messages Pack будут сгенерированы подходящие значения. Сохраните изменения. Далее перейдите на вкладку XML и замените ее содержимое на следующий код:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<window xmlns="http://schemas.haulmont.com/cuba/window.xsd"
        caption="msg://caption"
        class="com.company.sampler.web.screens.Column3dChart"
        messagesPack="com.company.sampler.web.screens"
        xmlns:chart="http://schemas.haulmont.com/charts/charts.xsd">
    <dsContext>
        <collectionDatasource id="countryGrowthDs"
                              class="com.company.sampler.entity.CountryGrowth"
                              refreshMode="NEVER"/>
    </dsContext>
    <layout>
        <chart:serialChart id="chart"
                           angle="30"
                           categoryField="country"
                           datasource="countryGrowthDs"
                           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"
    ...
    >

Диаграмма получает данные из источника countryGrowthDs, указанного в атрибуте datasource. Для отображения названий и значений используются атрибуты 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 – добавляет возможность сохранить полученный график.