Линейный график (line)

Линейный график в Chart.js используется для отображения изменений значений во времени или по последовательности категорий. Он строится на основе набора точек, соединённых линиями, что делает его одним из наиболее удобных инструментов для анализа трендов, динамики и сравнений нескольких рядов данных.

Основная идея заключается в том, что каждая точка на графике соответствует паре значений: ось X определяет порядок или временную шкалу, ось Y — числовое значение. В Chart.js линейный график задаётся через тип конфигурации type: 'line'.

Минимальная конфигурация включает элемент canvas в HTML и JavaScript-инициализацию:

<canvas id="myChart"></canvas>
const ctx = document.getElementById('myChart');

new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Янв', 'Фев', 'Мар', 'Апр', 'Май'],
    datasets: [{
      label: 'Продажи',
      data: [120, 190, 300, 250, 400]
    }]
  }
});

labels задаёт значения по оси X, а datasets[0].data формирует значения по оси Y. Порядок элементов в массивах имеет критическое значение: Chart.js сопоставляет их позиционно.

Структура dataset и ключевые параметры

Каждый набор данных в линейном графике представляет отдельную линию. Объект dataset поддерживает множество параметров:

  • label — название линии, отображаемое в легенде
  • data — массив значений
  • borderColor — цвет линии
  • backgroundColor — заливка (если включена)
  • borderWidth — толщина линии
  • tension — степень сглаживания кривой

Пример расширенной настройки:

datasets: [{
  label: 'Выручка',
  data: [100, 220, 180, 260, 300],
  borderColor: 'blue',
  borderWidth: 2,
  tension: 0.4
}]

Параметр tension управляет кривизной линии: значение 0 создаёт ломаную, значения ближе к 1 делают линию более плавной.

Работа с осями координат

В линейных графиках Chart.js используется система масштабов (scales). Основные оси:

  • x — горизонтальная ось
  • y — вертикальная ось

Настройка осей позволяет управлять диапазонами, сеткой и отображением подписей:

options: {
  scales: {
    y: {
      beginAtZero: true
    }
  }
}

Настройка диапазона значений

Контроль диапазона важен для корректного восприятия данных:

y: {
  min: 0,
  max: 500
}

Жёсткая фиксация диапазона используется при сравнении нескольких графиков, чтобы избежать визуального искажения.

Использование временных данных

Chart.js поддерживает работу с временными осями через адаптеры дат. Это позволяет отображать реальные временные ряды:

data: {
  datasets: [{
    label: 'Температура',
    data: [
      { x: '2024-01-01', y: 5 },
      { x: '2024-01-02', y: 7 },
      { x: '2024-01-03', y: 4 }
    ]
  }]
}

В этом режиме labels может не использоваться, поскольку координаты задаются явно через x и y.

Множественные линии на одном графике

Линейный график часто применяется для сравнения нескольких рядов данных. Для этого используется несколько объектов dataset:

datasets: [
  {
    label: 'Продукт A',
    data: [120, 150, 180],
    borderColor: 'red'
  },
  {
    label: 'Продукт B',
    data: [90, 130, 170],
    borderColor: 'green'
  }
]

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

Стилизация линий

Chart.js предоставляет широкие возможности визуального оформления:

Цвет и прозрачность

borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: 'rgba(75, 192, 192, 0.2)'

backgroundColor становится заметным при включении заливки под линией.

Пунктирные линии

borderDash: [5, 5]

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

Отображение точек

pointRadius: 4,
pointHoverRadius: 6

Эти параметры управляют маркерами на каждой точке линии. При отключении точек график становится более «чистым»:

pointRadius: 0

Анимация линейного графика

По умолчанию Chart.js анимирует построение графика. Управление анимацией осуществляется через options.animation:

options: {
  animation: {
    duration: 1500,
    easing: 'easeInOutQuart'
  }
}

Анимация может быть отключена для повышения производительности:

animation: false

При больших объёмах данных это снижает нагрузку на рендеринг.

Обработка пропущенных значений

Chart.js позволяет работать с неполными наборами данных. Пропуски можно обозначать как null:

data: [120, null, 180, 200]

По умолчанию линия разрывается. При необходимости можно включить соединение:

spanGaps: true

Это поведение полезно при анализе временных рядов с отсутствующими измерениями.

Настройка взаимодействия с пользователем

Линейные графики поддерживают интерактивность: tooltip, hover-эффекты, клики.

Tooltip

options: {
  plugins: {
    tooltip: {
      enabled: true
    }
  }
}

Можно кастомизировать отображение значений:

callbacks: {
  label: function(context) {
    return `Значение: ${context.parsed.y}`;
  }
}

Hover режим

interaction: {
  mode: 'nearest',
  intersect: false
}

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

Масштабирование и адаптивность

Chart.js автоматически адаптирует график под размер контейнера, но поведение можно уточнить:

options: {
  responsive: true,
  maintainAspectRatio: false
}

При maintainAspectRatio: false график заполняет контейнер полностью, что полезно в интерфейсах с динамической компоновкой.

Логарифмическая шкала

Для данных с большим диапазоном значений используется логарифмическая ось:

y: {
  type: 'logarithmic'
}

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

Кастомизация сетки

Сетка помогает ориентироваться в значениях графика:

grid: {
  color: '#e0e0e0',
  borderDash: [2, 2]
}

Можно отключить линии сетки полностью:

grid: {
  display: false
}

Динамическое обновление данных

Chart.js поддерживает обновление графиков без пересоздания:

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

Метод update() пересчитывает и перерисовывает график, сохраняя состояние.

При частых обновлениях можно оптимизировать:

chart.update('none');

Это отключает анимацию при обновлении.

Работа с несколькими осями Y

Для сравнения разных метрик используются отдельные оси:

scales: {
  y: {
    type: 'linear',
    position: 'left'
  },
  y1: {
    type: 'linear',
    position: 'right',
    grid: {
      drawOnChartArea: false
    }
  }
}

Каждый dataset можно привязать к своей оси:

yAxisID: 'y1'

Это позволяет совмещать несопоставимые величины на одном графике.

Управление порядком отображения

При наложении линий важен порядок рендеринга:

order: 1

Меньшее значение означает более высокий приоритет отображения.

Обработка больших массивов данных

При работе с тысячами точек важно оптимизировать производительность:

  • отключение точек (pointRadius: 0)
  • уменьшение анимации
  • использование decimation:
decimation: {
  enabled: true,
  algorithm: 'lttb'
}

Алгоритм LTTB сохраняет форму графика при уменьшении количества точек.

Кастомные элементы и расширение поведения

Chart.js позволяет переопределять поведение через плагины:

plugins: [{
  id: 'customPlugin',
  beforeDraw(chart) {
    const ctx = chart.ctx;
    ctx.save();
    ctx.fillStyle = 'lightgray';
    ctx.restore();
  }
}]

Плагины дают возможность вмешиваться в процесс отрисовки на любом этапе.

Использование градиентов

Линии можно стилизовать градиентом:

const gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'blue');
gradient.addColorStop(1, 'transparent');

datasets: [{
  borderColor: 'blue',
  backgroundColor: gradient
}]

Градиенты усиливают визуальное восприятие трендов.

Связь данных и интерактивных сценариев

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

onClick: (event, elements) => {
  if (elements.length > 0) {
    const index = elements[0].index;
  }
}

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

Оглавление