Chart
Chart показывает данные графиком: то, что в таблице приходится вычитывать строка за строкой, на картинке видно сразу.
Типы графиков
Доступны три типа:
Оформление графика
Всё оформление собрано в разделе Chart Properties панели свойств.
Набор настроек зависит от типа: оси есть у линейных и столбчатых графиков, у круговых вместо них свои настройки секторов.
Легенда
Легенда подписывает каждый ряд данных и показывает его цвет — без неё многоцветный график читается наугад.
- Выделите Chart в дереве виджетов или на холсте.
- Откройте Chart Data и задайте Legend каждому ряду.
- В Chart Properties включите Show Legend.
- В Legend Properties настройте её размер, положение, фон, рамку, отступы, текст и маркер.
Цвет фона
По умолчанию фон графика белый. Меняется в Chart Properties > Background Color.
Сетка
Переключатель Show Grid в Chart Properties рисует за данными сетку — по ней легче соотносить точки со значениями осей.
Рамка
Переключатель Show Border в Chart Properties обводит график рамкой; её вид задают Border Color и Border Width.
Подсказки
Переключатель Show Tooltip в Chart Properties показывает значение по оси Y при касании графика. Фон подсказки задаётся в Tooltip Background Color.
Границы осей
Раздел Axis Bounds в Chart Properties ограничивает видимый диапазон:
- Min X и Max X — начало и конец оси X. Только для линейных графиков.
- Min Y и Max Y — начало и конец оси Y.
Если оставить поля пустыми, FlutterFlow подберёт границы по минимальному и максимальному значению в данных. Явные границы нужны, когда график должен начинаться с нуля: автоматический подбор обрежет низ и преувеличит разницу между столбцами.
Ось X
Раздел X Axis Properties:
- Text — название оси: День, Неделя, Месяц. Задаётся текстом или из переменной, оформление настраивается рядом.
- Show Label — показывать подписи вдоль оси.
- Label Interval — шаг между подписями.
- Label Format Type — формат числовых подписей. Для больших чисел выберите Number и настройте Number Format Options.
У линейных графиков числа по оси X берутся из Min X и Max X, если границы осей заданы; иначе — из диапазона данных. У столбчатых по оси X идут подписи, заданные рядом данных.
Пример настройки названия и подписей оси X:
Ось Y
Раздел Y Axis Properties:
- Text — название оси: Продажи, Пользователи, Прогресс. Задаётся текстом или из переменной.
- Show Label — показывать числа вдоль оси.
- Label Interval — шаг между подписями.
- Label Format Type — формат числовых подписей; для больших чисел выберите Number и настройте Number Format Options.
Числа по оси Y берутся из Min Y и Max Y, если границы осей заданы; иначе — из диапазона данных.
Пример настройки названия и подписей оси Y: