Заливка области под линией (fill)

В линейных графиках Chart.js заливка области под кривой превращает обычную линию в диаграмму с площадями, позволяя визуально оценивать накопленные значения, тренды и вклад отдельных рядов данных. Механизм заливки управляется свойством fill, которое работает в связке с кривой линии, цветами и контекстом Canvas.

Базовое включение заливки

Основная настройка задаётся на уровне набора данных (dataset). Для активации заливки используется параметр fill:

const config = {
  type: 'line',
  data: {
    labels: ['Янв', 'Фев', 'Мар', 'Апр', 'Май'],
    datasets: [{
      label: 'Продажи',
      data: [10, 25, 18, 30, 22],
      borderColor: 'rgb(75, 192, 192)',
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      fill: true
    }]
  }
};

При значении fill: true область под линией заполняется цветом, заданным в backgroundColor. Прозрачность играет ключевую роль: чаще всего используется альфа-канал, чтобы линия оставалась читаемой.

Управление границами заливки

Свойство fill поддерживает несколько режимов, определяющих, до какого уровня происходит заливка.

Заливка до нулевой линии

fill: 'start'

Этот режим заполняет область от линии графика до нижней границы координатной системы (обычно нулевого значения по оси Y).

Заливка до предыдущего набора данных

fill: '-1'

Такой вариант используется при создании многослойных областных графиков. Каждый следующий слой заполняется до предыдущего набора данных.

Пример:

datasets: [
  {
    label: 'Доход',
    data: [30, 40, 35, 50],
    borderColor: 'blue',
    backgroundColor: 'rgba(0, 0, 255, 0.2)',
    fill: true
  },
  {
    label: 'Расход',
    data: [20, 25, 30, 35],
    borderColor: 'red',
    backgroundColor: 'rgba(255, 0, 0, 0.2)',
    fill: '-1'
  }
]

В результате второй график визуально «накладывается» на первый, создавая эффект слоёной области.

Заливка между двумя наборами данных

fill: 1

Числовое значение указывает индекс целевого dataset. Это позволяет точно управлять областью заливки между двумя линиями.

Градиентная заливка

Chart.js поддерживает использование Canvas-градиентов, что позволяет создавать более выразительные визуальные эффекты.

const ctx = document.getElementById('chart').getContext('2d');

const gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(75, 192, 192, 0.5)');
gradient.addColorStop(1, 'rgba(75, 192, 192, 0)');

const config = {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [{
      data: [12, 19, 8, 15],
      borderColor: 'rgb(75, 192, 192)',
      backgroundColor: gradient,
      fill: true
    }]
  }
};

Градиент позволяет визуально «затухать» область заливки к нижней границе, что уменьшает визуальную нагрузку и усиливает акцент на линии.

Работа с кривизной линии и влиянием на заливку

Параметр tension управляет сглаживанием линии. Он напрямую влияет на форму области заливки:

tension: 0.4

При увеличении значения кривая становится более плавной, а заливка приобретает волнообразный характер. При tension: 0 линия становится ломаной, а заливка — строго сегментированной.

Стекирование областей (stacked area charts)

Chart.js поддерживает построение накопительных графиков, где области суммируются друг над другом.

const config = {
  type: 'line',
  data: {
    labels: ['Пн', 'Вт', 'Ср', 'Чт'],
    datasets: [
      {
        label: 'Мобильный трафик',
        data: [30, 40, 20, 50],
        backgroundColor: 'rgba(54, 162, 235, 0.4)',
        fill: true
      },
      {
        label: 'Десктоп',
        data: [20, 25, 30, 35],
        backgroundColor: 'rgba(255, 159, 64, 0.4)',
        fill: true
      }
    ]
  },
  options: {
    scales: {
      y: {
        stacked: true
      }
    }
  }
};

При включённом stacked: true области визуально складываются, формируя суммарное значение по оси Y.

Привязка заливки к оси или начальной точке

Chart.js позволяет задавать явную точку отсчёта:

fill: {
  target: 'origin'
}

Здесь origin означает нулевую линию оси Y. Возможны также привязки к другим элементам графика, включая конкретные точки или другие datasets.

Взаимодействие с прозрачностью и слоями

Эффект заливки зависит от порядка отрисовки datasets. Более ранние наборы данных рисуются под последующими, что критично при использовании перекрывающихся областей.

Особое значение имеет:

  • backgroundColor — определяет визуальную плотность области
  • borderColor — задаёт контур линии
  • borderWidth — влияет на читаемость границы

Оптимальная практика — снижать насыщенность заливки при плотных данных, чтобы избежать визуального «перегруза».

Заливка с отключённой линией

В некоторых случаях требуется отображать только область без линии:

datasets: [{
  data: [10, 20, 15, 30],
  borderWidth: 0,
  fill: true,
  backgroundColor: 'rgba(100, 100, 255, 0.3)'
}]

Такой подход используется в упрощённых area-графиках или фоновых визуализациях.

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

При наличии null или undefined значений заливка разрывается в соответствии с конфигурацией spanGaps:

spanGaps: false

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

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

В сложных визуализациях часто сочетаются разные режимы fill:

  • один dataset заполняется до нуля
  • второй — до предыдущего
  • третий — до конкретного индекса

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

Производительность при большом объёме данных

Заливка увеличивает нагрузку на Canvas-отрисовку, особенно при:

  • большом количестве точек
  • активной анимации
  • использовании градиентов

Оптимизация достигается за счёт:

  • уменьшения числа точек (downsampling)
  • отключения анимации (animation: false)
  • упрощения backgroundColor до однотонного значения
Оглавление