Несколько datasets на одном графике

В Chart.js основой любого графика является объект data, внутри которого находится массив datasets. Именно этот массив позволяет отображать несколько независимых наборов данных на одном полотне. Каждый элемент массива описывает отдельную линию, столбцы или точечную серию.

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

Базовая структура:

const data = {
  labels: ['Янв', 'Фев', 'Мар', 'Апр', 'Май'],
  datasets: [
    {
      label: '2024 год',
      data: [12, 19, 3, 5, 2],
    },
    {
      label: '2025 год',
      data: [7, 11, 5, 8, 13],
    }
  ]
};

Каждый объект в datasets связывается с общими labels по индексу: labels[i] соответствует data[i] в каждом наборе.

Отображение нескольких линий на линейном графике

При использовании type: 'line' каждый dataset превращается в отдельную линию. Для различения рядов данных используются визуальные свойства: цвет, толщина линии, точки и стиль соединения.

const config = {
  type: 'line',
  data: {
    labels: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт'],
    datasets: [
      {
        label: 'Температура Москва',
        data: [3, 5, 7, 6, 4],
        borderColor: 'blue',
        backgroundColor: 'rgba(0, 0, 255, 0.1)',
        tension: 0.4
      },
      {
        label: 'Температура Алматы',
        data: [10, 12, 9, 11, 13],
        borderColor: 'red',
        backgroundColor: 'rgba(255, 0, 0, 0.1)',
        tension: 0.4
      }
    ]
  }
};

Важные параметры:

  • borderColor — цвет линии
  • backgroundColor — заливка под линией
  • tension — сглаживание кривой
  • pointRadius — размер точек
  • pointStyle — форма точек

Смешивание типов визуализации в одном графике

Chart.js позволяет комбинировать разные типы представления данных внутри одного canvas. Это реализуется через указание type на уровне dataset.

const config = {
  type: 'bar',
  data: {
    labels: ['Янв', 'Фев', 'Мар', 'Апр'],
    datasets: [
      {
        type: 'bar',
        label: 'Доход',
        data: [500, 700, 800, 650],
        backgroundColor: 'green'
      },
      {
        type: 'line',
        label: 'Тренд',
        data: [520, 680, 790, 640],
        borderColor: 'black',
        fill: false
      }
    ]
  }
};

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

Привязка datasets к разным осям

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

const config = {
  type: 'line',
  data: {
    labels: ['Янв', 'Фев', 'Мар', 'Апр'],
    datasets: [
      {
        label: 'Температура (°C)',
        data: [10, 12, 9, 11],
        yAxisID: 'y',
        borderColor: 'red'
      },
      {
        label: 'Осадки (мм)',
        data: [30, 50, 20, 40],
        yAxisID: 'y1',
        borderColor: 'blue'
      }
    ]
  },
  options: {
    scales: {
      y: {
        type: 'linear',
        position: 'left'
      },
      y1: {
        type: 'linear',
        position: 'right',
        grid: {
          drawOnChartArea: false
        }
      }
    }
  }
};

Разделение осей позволяет корректно отображать данные с разными единицами измерения без искажения масштаба.

Согласование индексов и пропущенные значения

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

datasets: [
  {
    label: 'A',
    data: [10, null, 15, 20]
  },
  {
    label: 'B',
    data: [5, 8, null, 18]
  }
]

Null-значения не разрывают структуру графика, но создают разрыв линии или пропуск столбца.

Управление визуальной иерархией datasets

Порядок массивов внутри datasets влияет на визуальное наложение. Последний элемент отображается поверх предыдущих.

datasets: [
  {
    label: 'Фон',
    data: [10, 20, 30],
    borderColor: 'lightgray'
  },
  {
    label: 'Основная линия',
    data: [12, 18, 28],
    borderColor: 'black',
    borderWidth: 3
  }
]

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

Стилизация отдельных datasets

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

Основные параметры:

  • borderWidth — толщина линии
  • pointBackgroundColor — цвет точек
  • pointBorderColor — обводка точек
  • fill — заливка области под линией
  • hoverBorderWidth — поведение при наведении
{
  label: 'Метрика 1',
  data: [1, 3, 2, 5],
  borderColor: '#4caf50',
  backgroundColor: 'rgba(76, 175, 80, 0.2)',
  pointRadius: 4,
  fill: true
}

Использование stacked datasets

Stacked-режим позволяет суммировать значения разных datasets в одном столбце или области.

const config = {
  type: 'bar',
  data: {
    labels: ['Q1', 'Q2', 'Q3'],
    datasets: [
      {
        label: 'Продукт A',
        data: [30, 40, 50],
        backgroundColor: 'blue'
      },
      {
        label: 'Продукт B',
        data: [20, 10, 30],
        backgroundColor: 'orange'
      }
    ]
  },
  options: {
    scales: {
      x: { stacked: true },
      y: { stacked: true }
    }
  }
};

Stacking применяется для анализа долей и накопленных значений.

Поведение легенды при множестве datasets

Legend автоматически формируется на основе label каждого dataset. Управление отображением позволяет скрывать или выделять отдельные серии без перерисовки графика.

Каждый dataset может быть программно отключён:

chart.setDatasetVisibility(1, false);
chart.update();

Динамическое обновление datasets

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

chart.data.datasets.push({
  label: 'Новый набор',
  data: [5, 10, 15],
  borderColor: 'purple'
});

chart.update();

Удаление:

chart.data.datasets.splice(0, 1);
chart.update();

Ошибки при работе с несколькими datasets

Часто встречающиеся проблемы:

  • Несовпадение длины data и labels
  • Отсутствие уникальных label, что усложняет легенду
  • Перекрытие цветов без прозрачности
  • Игнорирование yAxisID при разных масштабах
  • Использование одинаковых стилей для всех datasets, что снижает читаемость

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

Оглавление