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

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

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

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

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

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

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. Добавление виджета Chart

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

1. Перетащите виджет Chart из вкладки Base Elements (в панели виджетов) или добавьте его напрямую из дерева виджетов. Примечание: Линейная диаграмма — это тип диаграммы по умолчанию.
2. Перейдите в панель свойств и прокрутите вниз до раздела Chart Data.
3. Для линейной диаграммы Chart Data — это линия, нарисованная на диаграмме. Линия рисуется путём предоставления данных. Чтобы показать первую линию, откройте раздел Chart Data 1 и установите Data Source в Документы Firestore или Список чисел.
4. Если вы выберете Firestore Documents:
   1. Убедитесь, что у вас есть доступ к списку документов. Список документов можно получить путём запроса коллекции в любом виджете верхнего уровня, таком как виджет Page или Column. Вы также можете выполнить запрос коллекции непосредственно на виджете Chart. Чтобы выполнить запрос коллекции на странице:
      1. Выберите страницу и затем нажмите на вкладку Backend Query (справа на экране).
      2. Установите Query Type в Query Collection.
      3. Прокрутите вниз, чтобы найти выпадающий список Collection, и установите его в вашу коллекцию.
      4. Установите Query Type в List of Documents.
      5. Нажмите Save.
   2. Установите Source в collection_name Documents > Documents (List<collection_name>) и нажмите Confirm (например, progress Documents > Documents (List<progress>)).
   3. Установите поле X Value Field, значения которого будут располагаться горизонтально слева направо (например, день, неделя, месяц).
   4. Установите поле Y Value Field, значения которого будут располагаться вертикально снизу вверх (например, прогресс, количество пользователей, продажи).
5. Если вы выберете Numbers Lists:
   • В разделе X Data нажмите на UNSET и установите его в переменную, значения которой будут располагаться горизонтально слева направо (например, день, неделя, месяц).
   • Дополнительные параметры отображаются в зависимости от выбранного источника. Например, если вы выберете App State, отобразится поле Available Option, которое позволяет выбрать фактическую переменную.
   • В разделе Y Data нажмите на UNSET и установите его в переменную, значения которой будут располагаться вертикально снизу вверх (например, прогресс, количество пользователей, продажи).
6. Нажмите Add Data, чтобы показать несколько линий на диаграмме. Каждая новая линия накладывается поверх предыдущей.
7. Прокрутите вниз до раздела Chart Properties и настройте свойства Width и Height.

Using Firestore Documents

Using Numbers Lists

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

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

Чтобы настроить линию:

1. Выберите виджет Chart из дерева виджетов или области холста.
2. Перейдите в панель свойств, откройте раздел Chart Data, а затем раздел Line Properties.
3. Чтобы изменить Line Color, нажмите на поле рядом с уже выбранным цветом, выберите любой тёмный/светлый цвет и затем нажмите Use Color или нажмите на уже выбранный цвет и введите Hex-код напрямую.
4. Чтобы изменить толщину линии, измените значение в поле ввода Line Thickness.
5. По умолчанию все точки данных соединены плавной кривой; чтобы отключить это, просто выключите свойство Curved Lines. Это нарисует прямую линию между двумя точками.
   1. Если вы оставите это свойство включённым, вы можете заметить, что для некоторых точек данных кривая выходит за пределы/выше фактического значения. Чтобы предотвратить это, вы можете включить свойство Prevent curve from overshooting.
6. Чтобы увидеть точку в точном месте на диаграмме, включите свойство Show Dots.
7. Чтобы заполнить область под линией пользовательским цветом, включите свойство Fill Below Line и установите Fill Color, нажав на поле рядом с Unset, выбрав любой тёмный/светлый цвет и затем нажав Use Color или нажав на Unset и введя Hex-код напрямую.

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

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