Реализация графиков в мобильном приложении: библиотеки и оптимизация

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 — оптимальный баланс.

Руководство по внедрению downsampling за 3 шага

1. Выберите алгоритм LTTB — он даёт лучшее соотношение скорости и качества для линейных графиков.
2. Подготовьте данные — отфильтруйте null и NaN, приведите к набору FlSpot.
3. Интегрируйте в 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 вокруг только виджета графика.

1. Определите максимальное количество отображаемых точек (скользящее окно).
2. Используйте ValueNotifier для хранения списка точек.
3. Обновляйте 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. Закажите реализацию под ключ: получите консультацию по выбору библиотеки и оптимизации. Наши инженеры помогут сэкономить время и бюджет.