Графики в мобильном приложении тормозят на 1000 точек? Касания не отзывчивы, анимации дёрганые — знакомая боль. UITableView не лагает, потому что оптимизирован годами, а самописный LineChart без кэша точек и clip region начинает тормозить с первой тысячи. Без правильного подхода графики становятся источником багов и жалоб пользователей. Наш опыт — 5+ лет в мобильной разработке, более 50 проектов с графикой — позволяет избежать этих ошибок. Экономия времени на оптимизацию достигает 70%. Свяжитесь с нами, чтобы обсудить ваш проект.
Почему выбор библиотеки — ключевое решение?
Вопрос «какую библиотеку взять» решается через требования конкретного проекта. Неправильный выбор ведёт к переделкам и тормозам.
| Критерий | fl_chart | syncfusion_flutter | MPAndroidChart | DGCharts (iOS) | react-native-chart-kit |
|---|---|---|---|---|---|
| Типы графиков | Line, Bar, Pie, Scatter, Radar | 30+ типов | 8 основных | 10+ типов | Line, Bar, Pie, Progress |
| Zoom/Pan | Нет (нужен кастом) | Да | Да | Да | Нет |
| Candlestick | Нет | Да | Да | Да | Нет |
| Лицензия | MIT | Коммерческая | Apache 2.0 | Apache 2.0 | MIT |
| Производительность при >1000 точек | Снижается | Хорошая | Хорошая | Хорошая | Умеренная |
Для финансовых приложений с candlestick и zoom — syncfusion или нативный. Для health/fitness с простыми линейными графиками — fl_chart достаточно. Для React Native используйте react-native-chart-kit с простыми графиками. Для real-time данных с высокой частотой обновления — WebView + ECharts.
Что такое downsampling и почему он критичен?
Downsampling — уменьшение количества точек данных перед рендерингом. Алгоритм LTTB сохраняет визуальную форму кривой, отбрасывая избыточные точки. Это даёт экономию времени до 90% по сравнению с полным рендерингом. Без downsampling графики с 10 000 точек на mid-range Android падают до 15 FPS.
Как оптимизировать LineChart без потери качества?
Типичная ошибка — передавать в fl_chart весь массив из 5000 точек. LineChart рендерит каждую точку как FlSpot, и при touchData включённом — просчитывает hit-testing для каждого. На mid-range Android — FPS падает ниже 20.
Правильно: downsampling перед рендерингом. LTTB в 10 раз быстрее полного рендеринга и даёт визуально идентичный результат для большинства сценариев.
Пример реализации LTTB на Flutter
List<FlSpot> lttbDownsample(List<FlSpot> data, int threshold) { if (data.length <= threshold) return data; final sampled = <FlSpot>[data.first]; final bucketSize = (data.length - 2) / (threshold - 2); var a = 0; for (var i = 0; i < threshold - 2; i++) { final rangeStart = (i * bucketSize + 1).floor(); final rangeEnd = ((i + 1) * bucketSize + 1).floor().clamp(0, data.length); final nextA = ((i + 1) * bucketSize + 1).floor().clamp(0, data.length - 1); double maxArea = -1; int maxAreaPoint = rangeStart; for (var j = rangeStart; j < rangeEnd; j++) { final area = (data[a].x * (data[nextA].y - data[j].y) + data[nextA].x * (data[j].y - data[a].y) + data[j].x * (data[a].y - data[nextA].y)) .abs() / 2; if (area > maxArea) { maxArea = area; maxAreaPoint = j; } } sampled.add(data[maxAreaPoint]); a = maxAreaPoint; } sampled.add(data.last); return sampled; } 500 точек вместо 5000 — FPS возвращается к 60. LTTB даёт сокращение времени рендеринга в 10 раз по сравнению с полным набором.
Сравнение методов downsampling
| Метод | Скорость | Сохранение формы | Применение |
|---|---|---|---|
| LTTB | Средняя | Отличное | Линейные графики |
| Douglas-Peucker | Высокая | Хорошее | Полигоны, геоданные |
| Random | Очень высокая | Плохое | Быстрое прототипирование |
Для мобильных графиков LTTB — оптимальный баланс.
Руководство по внедрению downsampling за 3 шага
- Выберите алгоритм LTTB — он даёт лучшее соотношение скорости и качества для линейных графиков.
- Подготовьте данные — отфильтруйте null и NaN, приведите к набору FlSpot.
- Интегрируйте в LineChart — замените исходный массив на результат lttbDownsample перед передачей в LineChartData.
Анимации при появлении данных
Анимация линии, «рисующейся» слева направо — популярный UX-паттерн. На Flutter через AnimationController + TweenAnimationBuilder, ограничивая количество отображаемых точек через t:
TweenAnimationBuilder<double>( tween: Tween(begin: 0.0, end: 1.0), duration: const Duration(milliseconds: 800), curve: Curves.easeOut, builder: (context, value, _) { final visiblePoints = (allSpots.length * value).round(); return LineChart( LineChartData( lineBarsData: [ LineChartBarData(spots: allSpots.take(visiblePoints).toList()), ], ), ); }, ) Для bar chart — анимация роста столбцов через fromY параметр и AnimatedContainer.
Как реализовать real-time обновления без потери FPS?
Графики с обновлением каждую секунду (метрики, биржевые данные) требуют setState только для изменившихся данных. Неправильно вызывать setState на весь экран — перестраивается всё дерево виджетов. Правильно: ValueNotifier + ValueListenableBuilder вокруг только виджета графика.
- Определите максимальное количество отображаемых точек (скользящее окно).
- Используйте ValueNotifier для хранения списка точек.
- Обновляйте ValueNotifier при поступлении новых данных.
final chartData = ValueNotifier<List<FlSpot>>([]); // В виджете: ValueListenableBuilder<List<FlSpot>>( valueListenable: chartData, builder: (_, spots, __) => LineChart(LineChartData( lineBarsData: [LineChartBarData(spots: spots)], )), ) // При получении новой точки: void addDataPoint(double x, double y) { final current = [...chartData.value, FlSpot(x, y)]; if (current.length > maxPoints) current.removeAt(0); // sliding window chartData.value = current; } Как сделать графики доступными?
Графики недоступны для VoiceOver / TalkBack без дополнительной работы. Минимум: Semantics виджет с описанием того, что показывает график. Для финансовых или медицинских приложений — обязательна табличная альтернатива данным графика, переключаемая через кнопку. Это соответствует WCAG 2.1 и App Store Review Guidelines (Section 5.1).
Что входит в работу
- Выбор библиотеки под требования проекта с обоснованием
- Реализация нужных типов графиков (line, bar, pie, candlestick и т.д.)
- Оптимизация производительности (downsampling, рендеринг)
- Анимации при загрузке данных
- Интерактивность: zoom, pan, tooltip при касании
- Accessibility поддержка
- Интеграция с real-time источниками данных
Сроки и стоимость
Один тип графика с базовой интерактивностью: 2–3 дня. Набор из 3–5 типов с анимациями и real-time обновлениями: 1–2 недели. Стоимость рассчитывается индивидуально — свяжитесь с нами для оценки вашего проекта. Экономия времени на оптимизацию достигает 50% за счёт downsampling. Закажите реализацию под ключ: получите консультацию по выбору библиотеки и оптимизации. Наши инженеры помогут сэкономить время и бюджет.