2.5.3. GanttChart

Компонент GanttChart позволяет вам создать диаграмму Ганта.

ДЕМОНСТРАЦИЯ
gantt chart
Рисунок 16. GanttChart

XML-имя компонента: chart:ganttChart.

Элементы chart:ganttChart:

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

  • graph – элемент, содержащий коллекцию вложенных элементов chart:graph, описывающих графы диаграммы.

    • атрибут type определяет тип графа и может быть: линией, столбцом, пунктиром, кривой, OHLC и японской свечой.

    • атрибут valueField указывает ключ из коллекции пар ключ-значение, полученной из data provider.

  • valueAxis – элемент, описывающий ось значений. Если данные диаграммы основаны на значениях дат или времени, для оси значений можно указать тип date.

Атрибуты chart:ganttChart:

  • segmentsField – поле сегментов диаграммы.

  • additionalSegmentFields – список дополнительных полей для сегментов, соответствующих некоторым атрибутам сущности, которые необходимо дополнительно загрузить из data provider. Этот атрибут используется аналогично атрибуту additionalFields.

  • endField/endDateField – конечное значение или конечная дата диаграммы.

  • startField/startDateField – начальное значение или начальная дата диаграммы.

  • startDate – начальная дата диаграммы, если выбран тип оси date.

  • categoryField – поле категорий диаграммы.

Связь с данными:

Вы можете указать для диаграммы контейнер данных с типом CollectionContainer. В примере ниже атрибуты start и end сущности указаны в качестве значений атрибутов startDateField и endDateField диаграммы:

<chart:ganttChart id="ganttChart"
                  additionalSegmentFields="task"
                  balloonDateFormat="JJ:NN"
                  brightnessStep="7"
                  categoryField="category"
                  colorField="color"
                  columnWidth="0.5"
                  dataContainer="taskSpansDc"
                  endDateField="end"
                  height="100%"
                  marginRight="70"
                  period="DAYS"
                  rotate="true"
                  segmentsField="segments"
                  startDate="2016-01-01"
                  startDateField="start"
                  theme="LIGHT"
                  width="100%">
    <chart:graph balloonText="&lt;strong&gt;[[task]]&lt;/strong&gt;: [[open]] - [[value]]"
                 fillAlphas="1"
                 lineAlpha="1"
                 lineColor="WHITE"/>
    <chart:valueAxis type="DATE"/>
    <chart:valueScrollbar autoGridCount="true"
                          color="BLACK"/>
    <chart:chartCursor cursorAlpha="0"
                       cursorColor="#55bb76"
                       fullWidth="true"
                       valueLineAlpha="0.5"
                       valueBalloonsEnabled="false"
                       valueLineBalloonEnabled="true"
                       valueLineEnabled="true"
                       valueZoomable="true"
                       zoomable="false"/>
    <chart:export/>
</chart:ganttChart>
Слушатели событий GanttChart:

  • AxisZoomListener – масштабирование оси графика.

  • CategoryItemClickListener – щелчок по категории на оси категорий.

  • ChartClickListener – щелчок по холсту.

  • ChartRightClickListener – щелчок по холсту правой клавишей мыши.

  • CursorPeriodSelectListener – выбор периода отображения курсором.

  • CursorZoomListener – масштабирование области графика курсором.

  • GraphClickListener – щелчок по графику.

  • GraphItemClickListener – щелчок по элементу графика.

  • GraphItemRightClickListener – щелчок по элементу графика правой клавишей мыши.

  • RollOutGraphListener – разворачивание графика.

  • RollOutGraphItemListener – разворачивание элемента графика.

  • RollOverGraphListener – сворачивание графика.

  • RollOverGraphItemListener – сворачивание элемента графика.

  • ZoomListener – масштабирование холста.

Для более подробной информации об этом типе диаграмм смотрите документацию AmCharts.