1.5.2.2.1. XML-дескриптор экрана
Откройте в CUBA Studio вкладку Screens и создайте экран в модуле web. Введите значение com/company/sampler/web/screens/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"
view="_local">
<query>
<![CDATA[select e from sampler$CountryGrowth e]]>
</query>
</collectionDatasource>
</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): <b>[[value]]</b>"
fillAlphas="0.9"
lineAlpha="0.2"
title="2014"
type="COLUMN"
valueField="year2014"/>
<chart:graph id="graph2015"
balloonText="GDP grow in [[category]] (2015): <b>[[value]]</b>"
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, olhc и candlestick. -
Атрибут `valueField`определяет ключ из набора пар, содержащихся в объектах DataItem, список которых хранится в экземпляре DataProvider, по которому будет взято значение.
-
Атрибут
fillAlphas
задает степень непрозрачности заполнения. -
Атрибут
lineAlpha
задает степень непрозрачности линии (или рамки колонки).
-
-
chart:export
– добавляет возможность сохранить полученный график.