Jak mogę uzyskać dostęp do wykresu Highcharts za pośrednictwem DOM-Container

Kiedy renderuję highcharts-chart do kontenera div, w jaki sposób mogę uzyskać dostęp do obiektu wykresu za pośrednictwem kontenera div? nie chcę, aby zmienna wykresu była globalna.

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

Chcę uzyskać dostęp do wykresu poza powyższym kontekstem, takim jak ten (pseudokod), aby wywołać funkcje:

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

Highcharts 3.0.1

Użytkownicy mogą korzystać z wtyczki highcharts

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

Highcharts 2.3.4

Odczytane z tablicy Highcharts.charts , dla wersji 2.3.4 i nowszych indeks wykresu można znaleźć na podstawie danych w<div>

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

Wszystkie wersje

Śledź wykresy w globalnym obiekcie / mapie według identyfikatora kontenera

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

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

Read Mode @ Highcharts Tips - Dostęp do obiektu wykresu z identyfikatora kontenera

PS

Niektóre dodatki zostały wprowadzone w nowszych wersjach Highcharts od czasu napisania tej odpowiedzi i zostały zaczerpnięte z odpowiedzi @davertron, @Moes i @Przy, prosimy o zagłosowanie ich komentarzy / odpowiedzi, ponieważ zasługują na uznanie . Dodanie ich tutaj jako zaakceptowanej odpowiedzi byłoby niekompletne bez nich

możesz to zrobić

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

sprawdź przykład na Fiddler

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

chartCont to obiekt jQuery. chartObj to obiekt wykresu Highchart.

Używa Highcharts 3.01

Po prostu z czystym JS:

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

Znalazłem inny sposób na zrobienie tego ... głównie dlatego, że używam Highcharts, które są osadzone w platformie OutSystems i nie mam sposobu na kontrolowanie sposobu tworzenia wykresów.

Sposób, który znalazłem, był następujący:

1. Nadaj wykresowi klasę identyfikującą za pomocą classNameatrybutu

   chart: {
       className: 'LifeCycleMasterChart'
   }
   

2. Zdefiniuj funkcję pomocniczą, aby uzyskać wykres według nazwy klasy

   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;
   

   }

3. Korzystaj z funkcji pomocniczej wszędzie tam, gdzie jej potrzebujesz

   var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');
   

Mam nadzieję, że ci to pomoże!

Bez jQuery (vanilla js):

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

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]
         }]
      });
   });

Zmienna chart1 jest globalna, więc możesz jej użyć, aby uzyskać dostęp do obiektu wysokiego wykresu, który nie ma znaczenia, którym jest kontener

chart1.redraw();

... iz pomocą kolegi ... lepszym sposobem na to jest ...

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

    return foundChart;
}

Odpowiedź @elo jest poprawna i pozytywnie oceniona, chociaż musiałem ją trochę uporządkować, aby była jaśniejsza:

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

myChartnastępnie staje się aktywnym obiektem Highcharts, który odsłania wszystkie obecne rekwizyty obecne na wykresie, który jest renderowany w myChartEl. Ponieważ myChartjest to obiekt Highcharts , można bezpośrednio za nim łączyć metody prototypowe, rozszerzać go lub odwoływać się do niego.

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

Można również uzyskać myChartpoprzez .highcharts(), który jest jQueryplugin:

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

Powyższe podejście do jQuerywtyczki wymaga jQueryzaładowania przed użyciem wtyczki i oczywiście samej wtyczki. To brak tej wtyczki skłonił mnie do poszukiwania alternatywnych sposobów osiągnięcia tego samego z czystym waniliowym JavaScriptem.

Używając czystego podejścia JS, byłem w stanie zrobić to, czego potrzebowałem (drugi fragment kodu) bez konieczności polegania najQuery :