Линейный график

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

Как добавить

  1. Добавьте виджет Chart из Base Elements или прямо в дерево виджетов — линейный тип стоит по умолчанию.
  2. В панели свойств откройте Chart Data и раскройте [Line] Chart Data 1.
  3. Выберите Data Source:
    • Firestore Documents — укажите список документов в Data, затем поля X Value Field и Y Value Field.
    • Numbers Lists — задайте списки X Data и Y Data; при желании добавьте X Labels и Y Labels.
  4. Кнопка Add Data добавляет вторую линию.
  5. Размеры графика задаются в Chart PropertiesWidth и Height.
совет
Данные из Firestore

Для источника Firestore Documents запросите коллекцию прямо на виджете Chart или на вышестоящем виджете — Page либо Column.

Оформление линии

Выделите Chart, откройте Chart Data и раскройте Line Properties:

  • Line Color — цвет линии.
  • Line Thickness — толщина.
  • Dashed Line — рисовать пунктиром.
  • Curved Lines — соединять точки плавной кривой; выключите, чтобы получить ломаную из прямых отрезков.
  • Prevent Overshooting — не давать кривой выходить за пределы фактических значений. Без этого сглаживание рисует «горбы» там, где данных нет.
  • Show Dots — отмечать точками сами значения.
  • Fill Below Line — залить область под линией; цвет задаётся в Fill Color.

Оформление графика

Остальное — фон, границы осей, сетка, рамка — настраивается общими свойствами графика.

перевод официальной документации FlutterFlow

обновлено

ESC