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

Столбчатая диаграмма

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

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

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

Добавление диаграммы включает следующие шаги:

  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. Перейдите на панель свойств и установите Chart Type в значение Bar.
  3. Для столбчатой диаграммы один Chart Data представляет собой Bar, отрисованный на диаграмме. Столбец отрисовывается путём предоставления данных для этого. Чтобы отобразить первый столбец, откройте раздел Chart Data 1 и установите Data Source в Документы Firestore или Список чисел.
  4. Если вы выбрали Firestore Documents:
    1. Убедитесь, что у вас есть доступ к списку документов. Список документов можно получить путём запроса коллекции на любом виджете верхнего уровня, таком как виджет Page или Column. Вы также можете выполнить запрос коллекции непосредственно на виджете Chart. Чтобы выполнить запрос коллекции на странице:
      1. Выберите page и затем перейдите на вкладку Backend Query (справа на экране).
      2. Установите Query Type в значение Query Collection.
      3. Прокрутите вниз, чтобы найти раскрывающийся список Collection, и установите его в вашу коллекцию.
      4. Установите Query Type в значение List of Documents.
      5. Чтобы упорядочить метки, вы можете применить сортировку к запросу.
      6. Нажмите Save.
    2. Установите Source в collection_name Documents > Documents (List/) и нажмите Confirm (например, transactions Documents > Documents (List/)).
    3. Установите Bar Labels Field, значения которого будут использоваться как метки и размещаться горизонтально слева направо (например, day, week, month, year).
    4. Установите Bar Values Field, значения которого будут использоваться для отрисовки столбцов на диаграмме. Это отрисует столбцы для первых данных диаграммы (например, данные о доходах).
  5. Если вы выбрали Numbers Lists:
    1. В разделе Bar Labels нажмите на UNSET и установите переменную, значения которой будут использоваться как метки и размещаться горизонтально слева направо (например, day, week, month, year).
    2. Дополнительные параметры отображаются в зависимости от выбранного источника. Например, если вы выберете App State, отобразится поле Available Option, которое позволяет выбрать фактическую переменную.
    3. В разделе Bar Values нажмите на UNSET и установите переменную, значения которой будут использоваться для отрисовки столбцов на диаграмме. Это отрисует столбцы для первых данных диаграммы (например, данные о доходах).
  6. Нажмите Add Data, чтобы отобразить столбцы для нескольких категорий (например, доход и расход). Столбцы для каждой новой категории отображаются рядом с предыдущими. Примечание: При нажатии Add Data можно установить только Bar Values Field, поскольку Bar Labels Field уже предоставлен в первом Chart Data.
  7. Прокрутите вниз до раздела Chart Properties и настройте свойства Width и Height.

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

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

Настройка столбца для отдельных данных диаграммы​

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

Чтобы настроить столбец для каждого набора данных диаграммы:

  1. Выберите виджет Chart из дерева виджетов или области холста.
  2. Перейдите на панель свойств и откройте Chart Data > Bar Properties.
  3. Чтобы изменить Bar Color, нажмите на поле рядом с уже выбранным цветом, выберите любой тёмный/светлый цвет и затем нажмите Use Color или нажмите на уже выбранный цвет и введите Hex-код напрямую.
  4. Чтобы добавить границу вокруг столбца, введите значение Border Width и измените его Border Color.

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

Чтобы настроить все столбцы одновременно:

  1. Чтобы изменить ширину столбца, прокрутите вниз до Bar Styling properties > Bar Width и введите значение.
  2. Чтобы добавить пространство между двумя столбцами или двумя категориями столбцов (если у вас несколько наборов данных диаграммы), введите значение в свойство Group Spacing.
  3. Если у вас несколько наборов данных диаграммы и вы хотите добавить пространство между двумя соседними столбцами, введите значение в свойство Bar Spacing.
  4. Чтобы объединить несколько наборов данных диаграммы и отобразить их как один столбец, включите Stack Bars.
  5. Чтобы изменить распределение столбцов по горизонтали, выберите опцию из Main Axis Alignment.

Настройка диаграммы​

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