1.6.3. GanttChart

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<chart:ganttChart id="ganttChart"
                  additionalSegmentFields="task"
                  balloonDateFormat="JJ:NN"
                  brightnessStep="7"
                  categoryField="category"
                  colorField="color"
                  columnWidth="0.5"
                  datasource="taskSpansDs"
                  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 - щелчок по элементу графика правой клавишей мыши.

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

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