График в виде линий

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

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

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

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

На панели виджетов вы найдете все элементы пользовательского интерфейса или компоненты. Их можно добавить на холст с помощью метода перетаскивания. Также имеется строка поиска для быстрого поиска любого виджета.

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

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

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

На рисунке ниже показан пример коллекции, которая будет рисовать одну линию на графике:

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

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

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

Виджет графика может построить точку, используя список чисел. Вы должны создать как минимум два отдельных списка с типом данных Integer или Double. В одном списке хранятся все значения оси X, а в другом — список всех значений оси Y. Виджет графика использует обе переменные для создания пары (x,y), которые затем используются для обозначения точки на графике.

На рисунке ниже показано, как должны выглядеть локальные переменные состояния:

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

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

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

• Перетащите виджет Chart с вкладки Base Elements (в панели виджетов) или добавьте его непосредственно из дерева виджетов. Примечание: Линейная диаграмма является типом диаграммы по умолчанию.
• Перейдите на панель свойств и прокрутите вниз до раздела «Данные диаграммы«.
• Для линейной диаграммы данные диаграммы — это линия, нарисованная на диаграмме. Линия рисуется путем предоставления данных. Чтобы показать первую линию, откройте раздел Chart Data 1 и установите для параметра Data Source значение Firestore Documents или Number List.
• Если вы выберете «Документы хранилища«:
  • Убедитесь, что у вас есть доступ к списку документов. Список документов можно получить, запросив коллекцию в любом виджете верхнего уровня, например, в виджете Страница или Столбец. Вы также можете запросить коллекцию на самом виджете диаграммы. Чтобы запросить коллекцию на странице:
    • Выберите страницу, а затем перейдите на вкладку Backend Query (в правой части экрана).
    • Установите для параметра Тип запроса значение Запрос коллекции.
    • Прокрутите вниз, чтобы найти выпадающий список Collection и установите его на свою коллекцию.
    • Установите Тип запроса на Список документов.
    • Нажмите кнопку Сохранить.
  • Установите Источник на имя_коллекции Документы > Документы (Список<имя_коллекции>) и нажмите Подтвердить (например, прогресс Документы > Документы (Список<прогресс>)).
  • Установите поле значений X, значения которого будут располагаться горизонтально слева направо (например, день, неделя, месяц).
  • Задайте поле значений Y, значения которого будут располагаться вертикально снизу вверх (например, прогресс, количество пользователей, продажи).
• Если вы выбрали Списки чисел:
  • Под данными X нажмите на UNSET и установите переменную, значения которой будут располагаться горизонтально слева направо (например, день, неделя, месяц).
  • Дальнейшие опции отображаются в соответствии с выбранным Источником. Например, если вы выбрали Местный штат, отобразится поле Доступный вариант, позволяющее выбрать фактическую переменную.
  • В разделе Данные Y нажмите на UNSET и задайте переменную, значения которой будут располагаться вертикально снизу вверх (например, прогресс, количество пользователей, продажи).
• Нажмите кнопку Добавить данные, чтобы отобразить на графике несколько линий. Каждая новая линия укладывается поверх предыдущей.
• Прокрутите вниз до раздела Свойства диаграммы и настройте свойства Ширина и Высота.

Вы можете настроить внешний вид и восприятие каждой линии, нарисованной на виджете графика, в соответствии с вашим дизайном. Для настройки линии используется раздел Свойства линии (внутри раздела Данные диаграммы).

Чтобы настроить линию, выполните следующие действия:

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

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