Видимость datasets и программное переключение

В Chart.js каждый набор данных (dataset) может быть независимо скрыт или отображён без пересоздания графика. Управление видимостью опирается на внутреннее состояние метаданных диаграммы и свойство конфигурации hidden, которое поддерживается как на уровне инициализации, так и в процессе работы графика.

Базовое управление через свойство hidden

Каждый dataset может содержать поле hidden, определяющее начальную видимость:

const config = {
  type: 'line',
  data: {
    labels: ['Янв', 'Фев', 'Мар'],
    datasets: [
      {
        label: 'Продажи',
        data: [10, 20, 15],
        hidden: false
      },
      {
        label: 'Расходы',
        data: [5, 12, 8],
        hidden: true
      }
    ]
  }
};

При инициализации графика dataset с hidden: true не отображается, но остаётся частью структуры данных и может быть активирован в любой момент.

Управление видимостью через метаданные диаграммы

После создания графика Chart.js хранит состояние каждого dataset в метаданных, доступных через chart.getDatasetMeta(index):

const meta = chart.getDatasetMeta(0);
meta.hidden = true;
chart.update();

Здесь meta.hidden управляет фактической отрисовкой. Изменение состояния требует вызова chart.update(), иначе изменения не будут применены визуально.

Переключение видимости dataset программно

Наиболее распространённый подход — инвертирование текущего состояния:

function toggleDataset(chart, datasetIndex) {
  const meta = chart.getDatasetMeta(datasetIndex);
  meta.hidden = !meta.hidden;
  chart.update();
}

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

Использование скрытия через свойства dataset

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

  • dataset.hidden — начальная конфигурация
  • meta.hidden — динамическое состояние
  • dataset.showLine (для line charts) — частичное управление отрисовкой элементов

Приоритет отдаётся метаданным, так как они отражают текущее состояние интерфейса.

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

Легенда Chart.js по умолчанию уже реализует переключение видимости datasets через обработчик onClick.

const config = {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [
      { label: 'Dataset 1', data: [1, 2, 3] },
      { label: 'Dataset 2', data: [3, 2, 1] }
    ]
  },
  options: {
    plugins: {
      legend: {
        onClick: function (e, legendItem, legend) {
          const index = legendItem.datasetIndex;
          const chart = legend.chart;

          const meta = chart.getDatasetMeta(index);
          meta.hidden = meta.hidden === null ? !chart.data.datasets[index].hidden : !meta.hidden;

          chart.update();
        }
      }
    }
  }
};

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

Программное отображение и скрытие нескольких datasets

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

function showOnly(chart, visibleIndex) {
  chart.data.datasets.forEach((_, index) => {
    const meta = chart.getDatasetMeta(index);
    meta.hidden = index !== visibleIndex;
  });

  chart.update();
}

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

Переключение состояния через chart.setDatasetVisibility

В более новых версиях Chart.js доступен метод:

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

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

Аналогичное отображение:

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

Метод учитывает внутренние правила библиотеки и предпочтительнее прямого изменения meta.hidden.

Получение текущего состояния видимости

Для анализа состояния всех datasets используется isDatasetVisible:

const visible = chart.isDatasetVisible(0);

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

Синхронизация состояния с внешними элементами интерфейса

При создании кастомных контролов (например, кнопок переключения) состояние обычно связывается с datasetIndex:

button.addEventListener('click', () => {
  const visible = chart.isDatasetVisible(2);
  chart.setDatasetVisibility(2, !visible);
  chart.update();
});

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

Особенности поведения при анимации

При изменении видимости Chart.js не просто скрывает dataset, а перерасчитывает анимационные значения. Это особенно заметно в линейных и столбчатых графиках.

  • скрытие вызывает анимацию исчезновения элементов
  • появление сопровождается обратной анимацией
  • при массовом переключении возможна задержка обновления при отсутствии оптимизации update('none')

Оптимизированное обновление без анимации

Для мгновенного переключения используется режим обновления:

chart.setDatasetVisibility(0, false);
chart.update('none');

Такой вызов пропускает анимационный слой и сразу пересчитывает визуальное состояние.

Скрытие всех datasets одновременно

При необходимости полного скрытия данных:

chart.data.datasets.forEach((_, index) => {
  chart.setDatasetVisibility(index, false);
});

chart.update();

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

Влияние скрытия на масштабирование осей

Скрытые datasets могут влиять на масштаб осей в зависимости от конфигурации:

  • при beginAtZero: true скрытие может не менять шкалу
  • при динамическом масштабе скрытые данные исключаются из расчёта диапазонов
  • при комбинированных графиках (line + bar) влияние зависит от типа dataset

Это поведение важно учитывать при динамическом переключении, чтобы избежать «скачков» масштаба.

Работа с несколькими графиками и синхронизация видимости

При использовании нескольких экземпляров Chart.js возможно синхронизированное управление:

function syncVisibility(charts, datasetIndex, state) {
  charts.forEach(chart => {
    chart.setDatasetVisibility(datasetIndex, state);
    chart.update();
  });
}

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

Методы диагностики состояния видимости

Для отладки используются комбинации API:

chart.data.datasets.forEach((_, i) => {
  console.log(i, chart.isDatasetVisible(i));
});

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

Оглавление