Пропуски в данных: spanGaps

В графиках на основе временных или измеряемых рядов часто встречаются отсутствующие значения. В Chart.js такие разрывы формируются при использовании null или undefined в наборе данных. Поведение линии в этих местах определяется параметром spanGaps.

Как Chart.js интерпретирует пропуски

В линейных графиках (type: 'line') данные обычно задаются массивом:

data: [10, 15, null, 20, 25]

Значения null и undefined воспринимаются как отсутствующие точки. Визуально это приводит к разрыву линии.

Важно различать:

  • null — явный пропуск значения
  • undefined — отсутствие значения в позиции
  • NaN — некорректное числовое значение, также трактуется как пропуск

Chart.js при построении графика формирует сегменты линии между доступными точками. При наличии пропусков поведение зависит от настройки spanGaps.

Параметр spanGaps

spanGaps управляет тем, будет ли линия проходить через пропущенные значения.

Базовое поведение (spanGaps: false)

По умолчанию пропуски разрывают линию:

const config = {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E'],
    datasets: [{
      label: 'Продажи',
      data: [12, 19, null, 25, 30],
      spanGaps: false
    }]
  }
};

Результат:

  • линия прерывается между 19 и 25
  • сегмент C отсутствует визуально
  • создаётся разрыв, отражающий отсутствие данных

Такой режим применяется при необходимости строго отображать неполные данные без интерполяции.

Поведение при spanGaps: true

При включении параметра линия соединяет соседние доступные точки:

const config = {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E'],
    datasets: [{
      label: 'Продажи',
      data: [12, 19, null, 25, 30],
      spanGaps: true
    }]
  }
};

Результат:

  • пропущенная точка игнорируется
  • линия проводится напрямую от 19 к 25
  • визуальный разрыв отсутствует

Такое поведение используется при предположении, что данные непрерывны, а пропуски носят временный характер.

Глобальная настройка spanGaps

Параметр может задаваться глобально для всех датасетов:

const config = {
  type: 'line',
  options: {
    spanGaps: true
  }
};

При этом локальная настройка в dataset имеет приоритет над глобальной.

Приоритет применения:

  1. dataset.spanGaps
  2. options.spanGaps
  3. значение по умолчанию (false)

Работа с временными рядами

При использовании временных шкал (type: 'time') пропуски часто возникают из-за отсутствия измерений в конкретные моменты.

data: [
  { x: '2026-01-01', y: 10 },
  { x: '2026-01-02', y: null },
  { x: '2026-01-03', y: 15 }
]

При spanGaps: true линия соединяет 1 и 3 января напрямую, игнорируя промежуточную точку.

Влияние на сегментацию линии

Chart.js строит график из последовательности сегментов. Каждый разрыв формирует новый сегмент.

При spanGaps: false:

  • увеличивается количество сегментов
  • визуально подчёркиваются отсутствующие данные
  • могут появляться «пустые интервалы»

При spanGaps: true:

  • сегменты объединяются
  • линия становится непрерывной
  • исчезает визуальная индикация пропусков

Особенности при использовании с несколькими датасетами

Каждый dataset может иметь собственное поведение:

datasets: [
  {
    label: 'Факт',
    data: [10, null, 20, 30],
    spanGaps: false
  },
  {
    label: 'Тренд',
    data: [12, 14, 16, 18],
    spanGaps: true
  }
]

В одном графике одновременно отображаются:

  • строгая линия с разрывами
  • сглаженная непрерывная линия

Взаимодействие с другими параметрами

tension (кривизна линии)

При использовании сглаживания:

tension: 0.4

spanGaps влияет только на наличие разрыва, но не изменяет алгоритм кривой. При true кривая строится через отсутствующие точки как через промежутки.

fill (заливка области)

При наличии fill: true поведение следующее:

  • при spanGaps: false заливка прерывается
  • при spanGaps: true заливка продолжается непрерывно

Типичные сценарии применения

Финансовые данные

При анализе котировок пропуски часто означают отсутствие торгов в конкретный период. Использование spanGaps: false сохраняет корректность отображения.

Сенсорные измерения

При телеметрии пропуски часто кратковременны. spanGaps: true позволяет визуализировать общий тренд без визуальных разрывов.

Отчётные данные

При неполной выборке предпочтительно оставлять разрывы для сохранения честной интерпретации данных.

Обработка нестандартных значений

Chart.js считает пропусками:

  • null
  • undefined
  • NaN

Примеры:

data: [10, NaN, 20]
data: [10, undefined, 20]
data: [10, null, 20]

Во всех случаях поведение spanGaps одинаково.

Производственные аспекты

При больших наборах данных:

  • spanGaps: true уменьшает количество сегментов
  • упрощается отрисовка линии
  • возможен небольшой прирост производительности на сложных графиках

При этом эффект зависит от количества разрывов и плотности точек.

Использование в динамически обновляемых графиках

При потоковом добавлении данных:

chart.data.datasets[0].data.push(newValue);
chart.update();

Если значения периодически отсутствуют, spanGaps определяет, будет ли линия «рваться» при каждом пропуске или сохранять непрерывность.

Поведение при смешанных шкалах

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

Логика построения сегментов

Алгоритм Chart.js можно представить как последовательность:

  1. Проверка значения точки

  2. Если значение допустимо — добавление в сегмент

  3. Если значение отсутствует:

    • при spanGaps: true точка игнорируется
    • при spanGaps: false сегмент завершается

  4. Начало нового сегмента при следующей валидной точке

Эта модель определяет итоговую геометрию линии на канвасе.

Оглавление