Линейная диаграмма

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

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

Добавление линейной диаграммы

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

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

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

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

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

1.1 Документы Firestore

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

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

warning

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

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

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

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

к сведению

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

warning

Для рисования одной линии вам необходимо иметь как минимум две переменных.

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

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

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

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

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

1. Перетащите виджет Chart из вкладки Base Elements (в панели виджетов) или добавьте его непосредственно из дерева виджетов. Примечание: Линейная диаграмма является типом диаграммы по умолчанию.
2. Перейдите в панель свойств и прокрутите вниз до раздела Данные диаграммы.
3. Для линейной диаграммы Данные диаграммы представляют собой линию, нарисованную на диаграмме. Линия рисуется путем предоставления данных для нее. Чтобы показать первую линию, откройте раздел Данные диаграммы 1 и установите Источник данных на Документы Firestore или Список чисел.
4. Если вы выбираете Документы Firestore:
   1. Убедитесь, что у вас есть доступ к списку документов. Список документов можно получить, запрашивая коллекцию на любом виджете верхнего уровня, таком как виджет Страница или Колонка. Вы также можете запросить коллекцию непосредственно на виджете диаграммы. Для запроса коллекции на странице:
      1. Выберите страницу, затем нажмите на вкладку Backend Query (справа от вашего экрана).
      2. Установите тип запроса на Query Collection.
      3. Прокрутите вниз, чтобы найти выпадающий список Коллекция и установите его на вашу коллекцию.
      4. Установите тип запроса на List of Documents.
      5. Нажмите Сохранить.
   2. Установите источник на collection_name Документы > Документы (Список<имя_коллекции>) и нажмите Подтвердить (например, progress Документы > Документы (Список<progress>)).
   3. Установите Поле Значения X, чьи значения будут располагаться горизонтально слева направо (например, день, неделя, месяц).
   4. Установите Поле Значения Y, чьи значения будут располагаться вертикально снизу вверх (например, прогресс, количество пользователей, продажи).
5. Если вы выбираете Списки чисел:
   • Под Данные X нажмите на UNSET и установите его на переменную, чьи значения будут располагаться горизонтально слева направо (например, день, неделя, месяц).
   • Дополнительные параметры отображаются в зависимости от выбранного источника. Например, если вы выберете Приложение (App State), отобразится поле Доступная опция, позволяющее выбрать фактическую переменную.
   • Под Данные Y нажмите на UNSET и установите его на переменную, чьи значения будут располагаться вертикально снизу вверх (например, прогресс, количество пользователей, продажи).
6. Нажмите Добавить данные, чтобы показать несколько линий на диаграмме. Каждая новая линия добавляется поверх предыдущей.
7. Прокрутите вниз до раздела Свойства диаграммы и настройте свойства Ширина и Высота.

Использование документов Firestore

Использование списков чисел

Настройка линии

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

Для настройки линии:

1. Выберите виджет Chart из дерева виджетов или области холста.
2. Перейдите в панель свойств, откройте раздел Данные диаграммы, а затем откройте раздел Свойства линии.
3. Чтобы изменить Цвет линии, нажмите на квадрат рядом с уже выбранным цветом, выберите любой темный/светлый цвет, а затем нажмите Использовать цвет или нажмите на уже выбранный цвет и введите прямо шестнадцатеричный код.
4. Чтобы изменить толщину линии, измените значение в поле ввода Толщина линии.
5. По умолчанию все точки данных соединены гладкой кривой линией; чтобы отключить это, просто выключите свойство Гладкие линии. Это нарисует прямую линию между двумя точками.
   1. Если оставить это свойство включенным, вы можете заметить, что для некоторых точек данных кривая выходит за/над фактическим значением. Чтобы предотвратить это, вы можете включить свойство Предотвратить перерыв кривой.
6. Чтобы увидеть точку в точном месте на диаграмме, вы можете включить свойство Показывать точки.
7. Чтобы заполнить область под линией пользовательским цветом, включите свойство Заполнить под линией и установите Цвет заливки, нажав на квадрат рядом с Сбросить, выберите любой темный/светлый цвет, а затем нажмите Использовать цвет или нажмите на Сбросить и введите прямо шестнадцатеричный код.

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

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