Доступ к объекту Highcharts через id контейнера DIV

Быстрый ответ

Имеется простой способ получить доступ к графику Highcharts – использовать атрибут data-highcharts-chart контейнера, в котором сохраняется индекс графика из массива Highcharts.charts. Этот индекс позволит управлять графиком.

var chartIndex = document.getElementById('highcharts-container').dataset.highchartsChart;
var chart = Highcharts.charts[chartIndex];

chart.setTitle({ text: 'Статистика по новому видео с котятами' });

Продвинутые методы доступа к экземпляру графика

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

Глобальные переменные: не, спасибо!

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

let chart = $('#highcharts-container').highcharts();

Подробнее об этом расскажет наш спикер на видео

Давайте создадим карту графиков

Если требуется управлять несколькими графиками – создайте карту графиков и обращайтесь к графикам по ID их контейнеров:

var highchartsMap = {};

highchartsMap['containerID'] = new Highcharts.Chart(options);

var chart = highchartsMap['containerID'];

Элегантный подход

Не хотите пользоваться ID? Тогда работайте через классы:

var chart = $(".highcharts-class-name").highcharts();

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

Визуализация

Для более понятного представления рассмотрим следующую аналогию:

🔮: DOM-Контейнер (Как волшебная сфера)
🧰: График Highcharts (Ценность внутри сферы)

Чтобы получить доступ к сфере, сделайте:

let способДоступаКСфере = document.querySelector('.highcharts-container');

Внутри находится стоящая особого внимания "ценность":

let клад = способДоступаКСфере.highcharts();

Итого:

Ключ к Успеху: 🗝️ (Ключ) -> 🔮 (Сфера) -> 🧰 (График) -> 💎 (Данные)

Эффективное взаимодействие с графиками

Обращение ко множеству графиков

Если требуется обработать множество графиков, используйте функцию .each() из jQuery:

$('.highcharts-container').each(function() {
   var chart = $(this).highcharts();
});

Безопасный доступ к графику через класс

При доступе к графику через класс важно проверить его наличие:

var container = document.querySelector('.highcharts-class-name');
if (container && container.classList.contains('highcharts-initialized')) {
  var chart = container.highcharts();
}

Самодостаточность – гарантия успеха

Не зависите от глобальных переменных или массивов. Используйте data-атрибуты для сохранения экземпляра графика:

$('#highcharts-container').data('highchartsChart', new Highcharts.Chart(options));

var chart = $('#highcharts-container').data('highchartsChart');

Дополнительные советы

Видеть значит верить

Поищите примеры на JSFiddle или аналогичных платформах.

Настройка объекта графика

Воспользуйтесь API Highcharts для того, чтобы изменять конфигурацию графика.

Полезные материалы

1. Highcharts Class: Chart — официальная документация Highcharts. Здесь вы найдёте информацию о Chart.
2. Демонстрации и примеры | Highcharts — интерактивные примеры, демонстрирующие возможности Highcharts.
3. Ваш первый график | Highcharts — пошаговое руководство по внедрению Highcharts на страницу.
4. javascript – Как создать GUID / UUID? – Stack Overflow — обсуждение по созданию уникальных идентификаторов.
5. Проблемы | highcharts/highcharts | GitHub — страница обсуждений Highcharts на GitHub.
6. JSFiddle: пример — как работать с Highcharts через ID.