Введение#

Элемент управления Chart предназначен для представления информации в виде различных видов графиков.

Поддерживаемые типы диаграмм#

Элемент управления Chart поддерживает несколько типов диаграмм (Advanced jQuery Chart Widget), основными из которых являются:

графики с прямыми и сглаженными линиями;
ступенчатые графики;
столбчатая диаграмма;
область;
пузырьковая диаграмма;
круговая диаграмма.

Настройка элемента управления осуществляется с помощью специальных элементов управления SeriesGroup и Series: групп наборов данных и самих наборов, соответственно. Группа наборов данных (SeriesGroup) задаёт один конкретный тип диаграммы, отображаемый в элементе управления, а поля данных, по которым строятся диаграммы, задаются с помощью Series (наборов). В одном элементе управления Chart можно добавлять несколько типов диаграмм и в каждом из типов может использоваться несколько наборов данных. Данные в элемент управления Chart передаются либо с помощью механизма привязки данных, либо напрямую устанавливая свойство dataSource. Элемент управления работает только с источниками данных в виде массивов объектов.

Для иллюстрации приведём отрывок из демонстрационной формы:

<Chart editorWidth="12" id="chartCol" width="100%" title="Заголовок (свойство title)" description="Информация по использованию техники" height="300px" colorScheme="scheme01">
  <SeriesGroup displayValueAxis="false" unitInterval="30" type="column" orientation="vertical">
    <Series dataField="factNumber" displayText="Факт. поездки"/>
    <Series dataField="planNumber" displayText="Запланир. поездки"/>
  </SeriesGroup>
  <SeriesGroup displayValueAxis="false" unitInterval="30" type="stackedcolumn" orientation="vertical">
    <Series dataField="processedSheets" displayText="Обработано листов"/>
    <Series dataField="unprocessedSheets" displayText="Не обработано листов"/>
  </SeriesGroup>
</Chart>

Данный элемент управления в примере используется для представления набора данных об использовании различной техники. Рассмотрим приведённые настройки элемента управления. В нем задаются два вида диаграмм: простая столбчатая (column) и объединённая столбчатая (stackedcolumn). В каждой диаграмме используется по два набора данных. В свойстве набора данных dataField указывается нужное поле объекта, находящегося в массиве источника данных самого элемента управления Chart. Значение этого поля из каждого элемента массива будет использовано для построения диаграммы.

Установка данных#

Главная задача при использовании элемента управления Chart - правильно сформировать массив объектов, который должен выступать в роли источника данных элемента управления. Элемент управления не обрабатывает самостоятельно переданные ему данные, поэтому при необходимости, например, сортировать или группировать данные по каким-либо критериям, делать это нужно до передачи их в элемент управления.

Устанавливать данные можно с помощью запроса.

Данные из запроса#

Рассмотрим данные и процесс передачи их в элемент управления Chart, настройки которого были представлены выше.

В примере производится загрузка запроса, возвращающего фиксированный набор данных со следующей структурой данных:

шифр типа техники;
подразделение, к которому оно привязано;
числа плановых и фактических поездок;
числа обработанных и необработанных путевых листов;

Элемент управления, представленный в примере выше (с id - chartCol) настроен для отображения данных, сгруппированных по подразделениям, то есть по полю department объекта. Обработка данных производится в методе processData().

pieGraphLoader() {
  return [
    { Value: 25, Day: 'Понедельник' },
    { Value: 30, Day: 'Вторник' },
    { Value: 20, Day: 'Среда' },
    { Value: 20, Day: 'Четверг' },
    { Value: 15, Day: 'Пятница' },
    { Value: 35, Day: 'Суббота' },
    { Value: 21, Day: 'Воскресенье' }
  ]
}
setPieDataSource() {
  this.controls.chartPie.dataSource = ko.mapping.fromJS([
    { Value: 25, Day: 'Понедельник' },
    { Value: 30, Day: 'Вторник' },
    { Value: 20, Day: 'Среда' },
    { Value: 20, Day: 'Четверг' },
    { Value: 15, Day: 'Пятница' },
    { Value: 35, Day: 'Суббота' },
    { Value: 21, Day: 'Воскресенье' }
  ])
}

При первичной загрузке данных все показатели по каждому подразделению складываются. В результате элемент управления выводит данные в следующем виде (Рисунок 1).

Также этот же элемент управления можно использовать для отображения данных в разрезе по каждому виду техники. Для этого следует несколько иначе сформировать данные:

codeSelected() {
  const { codeVal } = this.controls.codeSelect.value || {}
  if (codeVal) {
    const reducedRows = this.importedData.reduce((result, row) => {
      if (row.code === codeVal) {
        const _rI = result.findIndex(fRow => fRow.code === codeVal &&
          fRow.department === row.department)
        if (_rI === -1) {
          result.push(row)
        } else {
          result[_rI].planNumber += row.planNumber
          result[_rI].factNumber += row.factNumber
          result[_rI].processedSheets += row.processedSheets
          result[_rI].unprocessedSheets += row.unprocessedSheets
        }
      }
      return result
    }, [])
    this.controls.chartCol.dataSource = ko.mapping.fromJS(reducedRows)
    this.controls.chartCol.title = codeVal
  } else {
    this.controls.chartCol.dataSource = this.processData()
    this.controls.chartCol.title = 'Всего'
  }
}

В этом методе, который используется в качестве обработчика изменения выбранного шифра вида техники, используется тот же исходный набор данных, полученный при первой загрузке запроса. Набор данных сохраняется в отдельном свойстве класса формы - this.importedData.

1
2
3

get importedData() {
  return this._importedData
}

Только данные теперь группируются не только по подразделениям, но и по шифру техники. Если в элементе управления Lookup, который используется для выбора нужного шифра, значение было сброшено, то в элемент управления Chart устанавливаются данные, сгруппированные исходным образом (только по подразделениям)

Можно также устанавливать источник данных напрямую из кода, например, с помощью DataAdapter или простым массивом. В демонстрационной форме элементу управления с id chartPie данные передаются следующим образом:

Макет формы:

<Chart editorWidth="12" id="chartPie" title="Заголовок (свойство title)" description="Описание (свойство description)" height="300px" colorScheme="scheme01" width="100%">
  <SeriesGroup displayValueAxis="false" unitInterval="30" type="pie" orientation="vertical">
    <Series dataField="Value" displayText="Day"/>
  </SeriesGroup>
</Chart>

Класс формы:

setPieDataSource() {
  this.controls.chartPie.dataSource = ko.mapping.fromJS([
    { Value: 25, Day: 'Понедельник' },
    { Value: 30, Day: 'Вторник' },
    { Value: 20, Day: 'Среда' },
    { Value: 20, Day: 'Четверг' },
    { Value: 15, Day: 'Пятница' },
    { Value: 35, Day: 'Суббота' },
    { Value: 21, Day: 'Воскресенье' }
  ])
}

Результат: