Вторичные оси (dual axis)

Механизм вторичных осей в Chart.js используется для отображения нескольких наборов данных с разными единицами измерения или различными диапазонами значений на одном графике. Основная идея заключается в том, что каждая группа данных может быть привязана к собственной оси Y (или реже X), что позволяет избежать искажения визуального восприятия при значительном различии масштабов.

Архитектура осей в Chart.js

Система осей в Chart.js построена вокруг объекта scales, который описывает все доступные координатные оси диаграммы. В базовой конфигурации присутствует одна ось Y (y) и одна ось X (x), однако структура позволяет расширять их количество.

Каждая ось описывается как отдельный объект:

  • уникальный ключ (идентификатор оси)
  • тип шкалы (linear, time, category и др.)
  • позиция на графике
  • параметры отображения (ticks, grid, title)

Пример базовой структуры:

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

Принцип работы dual axis

Вторичная ось создаётся путём добавления дополнительной шкалы, чаще всего ещё одной оси Y, например y1. Каждая серия данных связывается с конкретной осью через параметр yAxisID.

Ключевой механизм

  • y — основная ось
  • y1 — дополнительная ось
  • yAxisID — привязка dataset к оси

Базовая конфигурация двух осей Y

const config = {
  type: 'line',
  data: {
    labels: ['Янв', 'Фев', 'Мар', 'Апр'],
    datasets: [
      {
        label: 'Температура',
        data: [5, 7, 10, 15],
        yAxisID: 'y'
      },
      {
        label: 'Осадки',
        data: [50, 40, 60, 80],
        yAxisID: 'y1'
      }
    ]
  },
  options: {
    scales: {
      y: {
        type: 'linear',
        position: 'left'
      },
      y1: {
        type: 'linear',
        position: 'right',
        grid: {
          drawOnChartArea: false
        }
      }
    }
  }
};

Привязка dataset к оси

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

{
  label: 'Продажи',
  data: [120, 150, 180],
  yAxisID: 'y'
}
{
  label: 'Прибыль',
  data: [20, 30, 25],
  yAxisID: 'y1'
}

Настройка позиционирования осей

Оси могут быть расположены слева и справа:

  • left — левая сторона
  • right — правая сторона
scales: {
  y: {
    position: 'left'
  },
  y1: {
    position: 'right'
  }
}

Размещение на противоположных сторонах повышает читаемость при разнородных метриках.

Отключение сетки для вторичной оси

При использовании двух осей Y сетка может перегружать визуализацию. Часто применяется отключение вертикальных линий для второй оси:

y1: {
  grid: {
    drawOnChartArea: false
  }
}

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

Различие масштабов и нормализация данных

Вторичные оси применяются в случаях:

  • разные единицы измерения (°C и мм осадков)
  • разные порядки величин (0–100 и 0–1 000 000)
  • сравнение трендов без пересечения шкал

Каждая ось имеет собственный диапазон min и max:

y1: {
  min: 0,
  max: 1000
}

Форматирование значений осей

Каждая ось может иметь независимое форматирование через ticks:

y1: {
  ticks: {
    callback: function(value) {
      return value + ' $';
    }
  }
}

Типовые сценарии:

  • добавление единиц измерения
  • округление значений
  • преобразование масштаба (тыс., млн.)

Управление отображением заголовков осей

Каждая ось может иметь подпись:

y: {
  title: {
    display: true,
    text: 'Температура (°C)'
  }
},
y1: {
  title: {
    display: true,
    text: 'Осадки (мм)'
  }
}

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

Комбинация типов графиков с dual axis

Dual axis часто используется вместе с комбинированными графиками:

  • line + bar
  • bar + line
  • line + area (через fill)

Пример:

datasets: [
  {
    type: 'bar',
    yAxisID: 'y',
    data: [10, 20, 30]
  },
  {
    type: 'line',
    yAxisID: 'y1',
    data: [100, 200, 150]
  }
]

Типовые архитектурные ошибки

Перекрытие масштабов

Если диапазоны осей совпадают, dual axis теряет смысл и вводит визуальное дублирование.

Отсутствие yAxisID

Без явной привязки dataset распределяется на основную ось, что ломает логику сравнения.

Перегрузка графика

Слишком большое количество осей приводит к:

  • сложной интерпретации
  • визуальному шуму
  • снижению информативности

Поведение tooltip при dual axis

Tooltip в Chart.js агрегирует данные по точке X и показывает значения всех dataset.

Для различения осей используется:

  • цвет серии
  • подпись dataset
  • форматирование значений

Взаимодействие с легендой

Легенда остаётся общей для всех осей. Однако возможно логическое разделение через:

  • цветовую группировку
  • кастомные генераторы легенды
  • фильтрацию dataset

Синхронизация осей

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

y: {
  min: 0,
  max: 100
},
y1: {
  min: 0,
  max: 100
}

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

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

Dual axis не влияет существенно на производительность, однако:

  • увеличивает количество вычислений ticks
  • усложняет layout перерасчёты
  • требует аккуратной оптимизации при больших dataset

При большом объёме данных важнее оптимизация самих наборов, чем осей.

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

При работе с временными рядами одна ось может быть time, другая — linear:

scales: {
  x: {
    type: 'time'
  },
  y: {
    type: 'linear'
  },
  y1: {
    type: 'linear'
  }
}

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

Визуальная консистентность

При использовании dual axis критично соблюдение:

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

Настройка borderColor, backgroundColor и pointStyle часто становится частью общей системы визуальной дифференциации.

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

При скрытии серии через легенду или API Chart.js ось остаётся активной. Это может приводить к:

  • пустым шкалам
  • изменению диапазонов
  • перерасчёту ticks

Для контроля используется программное управление состоянием dataset.

Кастомные сценарии

Dual axis применяется в аналитических панелях:

  • сравнение выручки и количества заказов
  • температура и влажность
  • цена и объём торгов
  • CPU usage и memory usage

Каждый сценарий требует строгого разделения единиц измерения и диапазонов.

Оглавление