График в виде столбцов

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

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

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

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

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

1. Документы хранилища
2. Списки чисел

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

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

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

Шаги по созданию коллекции и добавлению данных следующие:

• Ознакомьтесь со структурированием базы данных Firebase.
• Выполните все шаги в разделе Firebase Setup для вашего проекта.
• Создайте коллекцию и предоставьте как минимум два поля, хранящие метки и значения Y.
• Добавьте данные в коллекцию.

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

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

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

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

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

• Перетащите виджет Chart с вкладки Base Elements (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
• Перейдите на панель свойств и установите для параметра Тип диаграммы значение Бар.
• Для столбиковой диаграммы одни данные диаграммы представляют собой столбик, нарисованный на диаграмме. Бар рисуется путем предоставления данных. Чтобы показать первый столбик, откройте раздел
• Данные диаграммы 1 и установите для параметра Источник данных значение Документы хранилища или Список чисел.
  • Если вы выберете «Документы хранилища«:
    • Убедитесь, что у вас есть доступ к списку документов. Список документов можно получить путем запроса коллекции в любом виджете верхнего уровня, например, в виджете Страница или Столбец. Вы также можете запросить коллекцию на самом виджете диаграммы. Чтобы запросить коллекцию на странице:
    • Выберите страницу, а затем перейдите на вкладку Backend Query (в правой части экрана).
    • Установите для параметра Тип запроса значение Запрос коллекции.
    • Прокрутите вниз, чтобы найти выпадающий список Collection и установите его на свою коллекцию.
    • Установите для параметра Query Type значение List of Documents (Список документов).
    • Чтобы упорядочить метки, можно выполнить Ordering в запросе.
    • Нажмите кнопку Сохранить.
  • Установите Источник на имя_коллекции Документы > Документы (Список<имя_коллекции>) и нажмите Подтвердить (например, транзакции Документы > Документы (Список<транзакции>)).
  • Установите поле Метки столбцов, значения которых будут использоваться в качестве меток и располагаться горизонтально слева направо (например, день, неделя, месяц, год). Задайте поле Bar Values, значения которого будут использоваться для рисования столбиков на графике.
  • Здесь будут нарисованы столбики для первых данных графика (например, данные о доходах).
• Если выбран вариант Списки чисел:
  • Под метками столбиков, нажмите на UNSET и установите его в переменную, значения которой будут использоваться в качестве меток и располагаться горизонтально слева направо (например, день, неделя, месяц, год).
  • Дальнейшие опции отображаются в соответствии с выбранным источником. Например, если вы выбрали Local State, отобразится поле The Available Option, позволяющее выбрать фактическую переменную.
  • В поле Значения столбцов нажмите на UNSET и установите ее в качестве переменной, значения которой будут использоваться для построения столбцов на графике. В результате будут построены столбики для первых данных графика (например, данные о доходах).
• Нажмите кнопку Добавить данные, чтобы отобразить столбики для нескольких категорий (например, доходы и расходы). Столбцы для каждой новой категории отображаются рядом с предыдущей. Примечание: При нажатии кнопки Добавить данные вы можете задать только поле Значения столбцов, поскольку поле Метки столбцов уже предусмотрено в первых данных диаграммы.
• Прокрутите вниз до раздела Свойства диаграммы и настройте свойства Ширина и Высота.

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

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

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

• Выберите виджет «График» в дереве виджетов или в области холста.
• Перейдите к панели свойств и откройте раздел Данные диаграммы > Свойства столбца.
• Чтобы изменить цвет столбика, нажмите на поле рядом с уже выбранным цветом, выберите любой темный/светлый цвет, а затем нажмите Использовать цвет или нажмите на уже выбранный цвет и введите Hex-код напрямую.
• Чтобы добавить границу вокруг полосы, введите значение ширины границы и измените цвет границы.

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

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

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