Як я можу отримати доступ до діаграми Highcharts через DOM-контейнер

Question 1

Коли я відображаю діаграму високих діаграм до контейнера div, як я можу отримати доступ до об'єкта діаграми через div-Container? я не хочу робити змінну діаграми глобальною.

        var chart = new Highcharts.Chart({
            chart: {
                renderTo: "testDivId",
                                ...

Я хочу отримати доступ до діаграми поза контекстом вище, як це (псевдокод), щоб викликати функції:

var chart = Highcharts.Chart("testDivId"); //access from id
chart.redraw();

Question 2

Highcharts 3.0.1

Користувачі можуть використовувати плагін highcharts

var chart=$("#container").highcharts();

Хайчарти 2.3.4

Прочитайте з масиву Highcharts.charts , для версії 2.3.4 і пізніших версій, індекс діаграми можна знайти з даних на<div>

 var index=$("#container").data('highchartsChart');
 var chart=Highcharts.charts[index];

Всі версії

Відстежуйте діаграми в глобальному об’єкті / карті за ідентифікатором контейнера

var window.charts={}; 
function foo(){
  new Highcharts.Chart({...},function(chart){  
      window.charts[chart.options.chart.renderTo] = chart;
  });
}

function bar(){
  var chart=window.charts["containerId"];
}

Режим читання @ Highcharts Поради - Доступ до об'єкта діаграми з ідентифікатора контейнера

PS

Деякі доповнення були внесені в новіші версії Highcharts з моменту написання цієї відповіді, і вони були взяті з відповідей @davertron, @Moes та @Przy, будь ласка, проголосуйте за їхні коментарі / відповіді, оскільки вони заслуговують на те, щоб заслужити їх. Додавання їх сюди, оскільки ця прийнята відповідь була б неповною без них

Question 3

Ви можете це зробити

var chart = $("#testDivId").highcharts();

перевірте приклад на скрипці

Question 4

var $chartCont = $('#container').highcharts({...}),
    chartObj = Highcharts.charts[$chartCont.data('highchartsChart')];

chartCont - це jQuery Object. chartObj - це об'єкт діаграми Highchart.

Це використовує Highcharts 3.01

Question 5

Я знайшов інший спосіб зробити це ... головним чином тому, що я використовую Highcharts, які вбудовані в OutSystems Platform, і я не маю можливості контролювати спосіб створення діаграм.

Я знайшов такий спосіб:

Дайте ідентифікаційний клас діаграмі, використовуючи classNameатрибут
```
chart: {
    className: 'LifeCycleMasterChart'
}
```

Визначте допоміжну функцію для отримання діаграми за назвою класу

function getChartReferenceByClassName(className) {
var cssClassName = className;
var foundChart = null;

$(Highcharts.charts).each(function(i,chart){    
    if(chart.container.classList.contains(cssClassName)){
        foundChart = chart;
        return;
    }
});

return foundChart;

}

Використовуйте допоміжну функцію, де вона вам потрібна
```
var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');
```

Сподіваюся, це допоможе вам!

Question 6

Просто з чистою JS:

var obj = document.getElementById('#container')
    Highcharts.charts[obj.getAttribute('data-highcharts-chart')];

Question 7

var chart1; // globally available
$(document).ready(function() {
      chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'container',
            type: 'bar'
         },
         title: {
            text: 'Fruit Consumption'
         },
         xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
         },
         yAxis: {
            title: {
               text: 'Fruit eaten'
            }
         },
         series: [{
            name: 'Jane',
            data: [1, 0, 4]
         }, {
            name: 'John',
            data: [5, 7, 3]
         }]
      });
   });

Var chart1 є глобальним, тому ви можете використовувати його для доступу до об'єкта de highchart, не має значення, який контейнер

chart1.redraw();

Question 8

Без jQuery (ванільний js):

let chartDom = document.getElementById("testDivId");
let chart = Highcharts.charts[Highcharts.attr(chartDom, 'data-highcharts-chart')]

Question 9

... і за допомогою колеги ... кращий спосіб це зробити ...

getChartReferenceByClassName(className) {
    var foundChart = $('.' + className + '').eq(0).parent().highcharts();

    return foundChart;
}

Question 10

Відповідь @elo є правильною і прихильною, хоча мені довелося трохи привести її в порядок, щоб вона стала зрозумілішою:

const myChartEl = document.getElementById('the-id-name');
const myChart = Highcharts.charts[myChartEl.getAttribute('data-highcharts-chart')];

myChartпотім стає активним об'єктом Highcharts, який виставляє всі поточні реквізити, наявні на діаграмі, яка відображається в myChartEl. Оскільки myChartце об'єкт Highcharts , можна зв'язати прототипи методів відразу після нього, розширити його або звернутися до нього.

myChart.getTable();
myChart.downloadXLS();
setTimeout(() => Highcharts.fireEvent(myChart, "redraw"), 10);

Можна також отримати myChartчерез .highcharts(), який є jQueryплагін:

var myChart = $("#the-id-name").highcharts();

Наведений вище підхід до jQueryплагінів вимагає jQueryзавантаження перед використанням плагіна і, звичайно, самого плагіна. Саме відсутність цього плагіна змусило мене шукати альтернативні способи зробити те саме за допомогою чистого ванільного JavaScript.

За допомогою чистого підходу JS я зміг зробити те, що мені потрібно (другий фрагмент коду), не покладаючись наjQuery :