Перейти к основному содержимому

Гистограмма

Гистограмма показывает прямоугольные столбцы на графике, высота которых варьируется в соответствии с их числовым значением и имеет равную ширину. Ее можно использовать для отображения категориальной информации.

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

Добавление гистограммы​

Добавление графика состоит из нескольких шагов:

  1. Подготовка данных
  2. Добавление виджета гистограммы

1. Подготовка данных​

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

  1. Документы Firestore
  2. Списки чисел

1.1 Документы Firestore​

Если вы используете Firebase как бэкенд, вы можете создать коллекцию и добавить список документов. Каждая запись документа может быть использована для построения столбцов на графике. Поэтому необходимо добавить как минимум два поля (одно с типом данных String, а другое с типом данных Double) в документ, которое будет являться метками, и значениями координаты Y для построения столбца.

На рисунке ниже показана примерная коллекция, которая отображает два столбца (доходы и расходы) для каждого года.

bar-collection-to-document.avif

warning

Вышеуказанная схема коллекции используется для упрощения. Вы вольны использовать свою собственную схему, которая лучше всего подходит для вас.

Вот как данные используются для построения столбцов на графике:

firestore-data.avif

1.2 Списки чисел​

Виджет гистограммы может построить столбец, используя список меток и чисел. Вам потребуются как минимум два отдельных списка с типами данных String и Double. Один список хранит список меток для отображения на оси X, в то время как другой хранит список значений на оси Y. Виджет графика использует обе переменные для построения столбца.

к сведению

Переменная может быть переменной состояния приложения или переменной вывода действия вызова API.

На рисунке ниже показаны образцы переменных состояния приложения, которые отображают два столбца (доходы и расходы) для каждого года.

app-state-variable.avif

warning

Количество значений в переменной оси Y должно соответствовать количеству меток в переменной оси X.

Вот как список чисел используется для построения столбцов на графике:

app-state-variable-2.avif

Для создания переменной состояния приложения найдите инструкции здесь.

2. Добавление виджета гистограммы​

Чтобы добавить виджет гистограммы в ваш проект:

  1. Перетащите виджет Chart из вкладки Base Elements (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
  2. Перейдите в панель свойств и установите Тип графика на Гистограмму.
  3. Для гистограммы одиночный Набор данных графика представляет собой столбец, нарисованный на графике. Столбец нарисован, предоставив данные для этого. Чтобы показать первый столбец, откройте раздел Данные графика 1 и установите Источник данных на Документы Firestore или Списки чисел.
  4. Если вы выбираете Документы Firestore:
    1. Убедитесь, что у вас есть доступ к списку документов. Список документов можно получить с помощью запроса к коллекции на любом виджете верхнего уровня, таком как виджет Страница или Колонка. Вы также можете запросить коллекцию на самом виджете графика. Чтобы запросить коллекцию на странице:
      1. Выберите страницу, а затем нажмите на вкладку Запрос к бэкенду (справа от вашего экрана).
      2. Установите Тип запроса на Запрос коллекции.
      3. Прокрутите вниз, чтобы найти выпадающий список Коллекция и установите его на вашу коллекцию.
      4. Установите Тип запроса на Список документов.
      5. Для упорядочения меток можно выполнить сортировку запроса.
      6. Нажмите Сохранить.
    2. Установите источник на документы collection_name > Документы (Список/) и нажмите Подтвердить (например, документы транзакции > Документы (Список/)).
    3. Установите Поле меток столбцов, значения которых будут использоваться в качестве меток, и разместите их горизонтально слева направо (например, день, неделя, месяц, год).
    4. Установите Поле значений столбцов, значения которых будут использоваться для построения столбцов на графике. Это нарисует столбцы для первого набора данных графика (например, данные доходов).
  5. Если вы выбираете Списки чисел:
    1. Под пунктом Метки столбцов нажмите на НЕ УСТАНОВЛЕНО и установите переменную, значения которой будут использоваться в качестве меток и размещаться горизонтально слева направо (например, день, неделя, месяц, год).
    2. Дополнительные опции отображаются в зависимости от выбранного источника. Например, если вы выбираете Состояние приложения, будет отображено поле Доступный параметр, позволяющее выбрать фактическую переменную.
    3. Под пунктом Значения столбцов нажмите на НЕ УСТАНОВЛЕНО и установите переменную, значения которой будут использоваться для построения столбцов на графике. Это нарисует столбцы для первого набора данных графика (например, данные доходов).
  6. Нажмите Добавить данные, чтобы отобразить столбцы для нескольких категорий (например, доход и расход). Столбцы для каждой новой категории отображаются рядом с предыдущим. Примечание: При нажатии Добавить данные вы можете установить только Поле значений столбцов, так как Поле меток столбцов уже предоставлено в первом Наборе данных графика.
  7. Прокрутите вниз до раздела Настройки графика и отрегулируйте параметры Ширина и Высота.

Настройка столбцов​

Вы можете настроить внешний вид столбцов, чтобы они соответствовали вашему дизайну.

Настройка столбца для каждого набора данных графика​

Вы можете настроить столбец для каждого конкретного набора данных графика, чтобы пользователи могли легко распознать информацию.

Для настройки столбца для каждого набора данных графика:

  1. Выберите виджет Chart из дерева виджетов или области холста.
  2. Перейдите в панель свойств и откройте Набор данных графика > Свойства столбца.
  3. Чтобы изменить Цвет столбца, щелкните на квадрат рядом с уже выбранным цветом, выберите любой темный/светлый цвет, а затем нажмите Использовать цвет или щелкните на уже выбранном цвете и напрямую введите шестнадцатеричный код.
  4. Чтобы добавить границу вокруг столбца, введите значение Ширина границы и измените его Цвет границы.

Настройка всех столбцов​

Для изменения всех столбцов вместе:

  1. Чтобы изменить ширину столбцов, прокрутите вниз до Настройки стиля столбца > Ширина столбца и введите значение.
  2. Чтобы добавить пространство между двумя столбцами или двумя категориями столбцов (если у вас есть несколько наборов данных графика), введите значение в свойство Интервал групп.
  3. Если у вас есть несколько наборов данных графика и вы хотите добавить пространство между двумя смежными столбцами, можно ввести значение в свойство Интервал столбцов.
  4. Чтобы объединить несколько наборов данных графика и отобразить их в виде одного столбца, активируйте Группировать столбцы.
  5. Чтобы изменить способ распределения столбцов в горизонтальном направлении, выберите один из вариантов Основной выравнивание оси.

Настройка графика​

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