Точечная диаграмма (scatter)

Структура данных scatter-графика

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

const data = {
  datasets: [{
    label: 'Наблюдения',
    data: [
      { x: 10, y: 20 },
      { x: 15, y: 35 },
      { x: 25, y: 30 },
      { x: 40, y: 60 }
    ]
  }]
};

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

Базовая инициализация scatter-графика

Для построения диаграммы используется тип scatter:

const config = {
  type: 'scatter',
  data: data,
  options: {
    responsive: true,
    plugins: {
      legend: {
        display: true
      }
    },
    scales: {
      x: {
        type: 'linear',
        position: 'bottom'
      },
      y: {
        type: 'linear'
      }
    }
  }
};

new Chart(document.getElementById('chart'), config);

Ключевым моментом является обязательное использование линейных шкал (linear) для обеих осей.

Особенности координатной системы

Scatter-график не использует категориальные оси. Значения интерпретируются как непрерывные величины.

Основные типы шкал:

  • linear — стандартная числовая шкала
  • logarithmic — логарифмическая шкала
  • time — временная ось
  • timeseries — оптимизированная работа с датами

Пример временной оси:

scales: {
  x: {
    type: 'time',
    time: {
      unit: 'day'
    }
  },
  y: {
    type: 'linear'
  }
}

Форматирование точек

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

data: [
  { x: 10, y: 20, r: 5 },
  { x: 15, y: 35, r: 8 }
]

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

Настройка внешнего вида точек

Глобальная стилизация задаётся через pointStyle и связанные параметры:

datasets: [{
  label: 'Данные',
  data: [...],
  pointRadius: 6,
  pointHoverRadius: 10,
  pointBackgroundColor: 'rgba(54, 162, 235, 0.6)',
  pointBorderColor: 'rgba(54, 162, 235, 1)',
  pointBorderWidth: 2
}]

Распространённые параметры:

  • pointRadius — базовый размер точки
  • pointHoverRadius — размер при наведении
  • pointBackgroundColor — заливка
  • pointBorderColor — обводка
  • pointBorderWidth — толщина границы

Несколько наборов данных

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

const data = {
  datasets: [
    {
      label: 'Группа A',
      data: [
        { x: 5, y: 10 },
        { x: 10, y: 15 }
      ],
      pointBackgroundColor: 'red'
    },
    {
      label: 'Группа B',
      data: [
        { x: 5, y: 20 },
        { x: 10, y: 25 }
      ],
      pointBackgroundColor: 'blue'
    }
  ]
};

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

Линейная интерполяция поверх scatter

Хотя scatter не соединяет точки линиями, можно добавить второй слой с типом line:

datasets: [
  {
    type: 'scatter',
    label: 'Точки',
    data: [...]
  },
  {
    type: 'line',
    label: 'Тренд',
    data: [...],
    fill: false,
    borderColor: 'black',
    tension: 0
  }
]

Такой подход используется для визуализации тренда или регрессии.

Сортировка данных и производительность

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

Несортированные данные:

[{x: 30, y: 10}, {x: 10, y: 20}]

Сортировка:

data.sort((a, b) => a.x - b.x);

При больших объёмах данных важны:

  • отключение анимаций
  • уменьшение радиуса точек
  • использование упрощённых tooltip
options: {
  animation: false,
  elements: {
    point: {
      radius: 2
    }
  }
}

Tooltip и взаимодействие

Tooltip в scatter-графиках отображает координаты точки.

Настройка:

plugins: {
  tooltip: {
    callbacks: {
      label: function(context) {
        const point = context.raw;
        return `x: ${point.x}, y: ${point.y}`;
      }
    }
  }
}

Возможна кастомизация формата вывода, добавление единиц измерения или вычисляемых значений.

Фильтрация и динамическое обновление

Данные scatter-графика часто обновляются динамически.

Пример добавления точки:

chart.data.datasets[0].data.push({ x: 50, y: 70 });
chart.update();

Удаление:

chart.data.datasets[0].data.pop();
chart.update();

Замена набора данных:

chart.data.datasets[0].data = newData;
chart.update();

Использование с формулами и моделями

Scatter часто применяется для визуализации математических зависимостей.

Пример генерации точек функции:

const dataPoints = [];

for (let x = 0; x <= 50; x++) {
  dataPoints.push({
    x: x,
    y: 0.5 * x + 10
  });
}

Такая структура используется для анализа линейной регрессии, корреляции и распределений.

Масштабирование и границы осей

Оси могут быть ограничены вручную:

scales: {
  x: {
    min: 0,
    max: 100
  },
  y: {
    min: -50,
    max: 150
  }
}

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

Комбинирование с логарифмической шкалой

scales: {
  x: {
    type: 'logarithmic'
  },
  y: {
    type: 'linear'
  }
}

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

Обработка выбросов

Scatter-графики чувствительны к выбросам, которые могут искажать масштаб.

Типичные методы обработки:

  • ограничение диапазона min/max
  • логарифмическая шкала
  • фильтрация данных перед рендерингом
const filtered = data.filter(p => p.y < 1000);

Кастомные точки через pointStyle

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

pointStyle: 'rectRot'

Доступные варианты:

  • circle
  • cross
  • rect
  • rectRot
  • triangle
  • star

Связь scatter с анализом данных

Scatter-графики используются для:

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

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

Оглавление