Come posso accedere a un grafico Highcharts tramite un contenitore DOM

Quando eseguo il rendering di un grafico highcharts in un contenitore div, come posso accedere all'oggetto grafico tramite il contenitore div? non voglio rendere globale la variabile del grafico.

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

Voglio accedere al grafico al di fuori del contesto sopra in questo modo (pseudocodice), per chiamare le funzioni:

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

Highcharts 3.0.1

Gli utenti possono utilizzare il plug-in highcharts

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

Highcharts 2.3.4

Leggi dall'array Highcharts.charts , per la versione 2.3.4 e successive, l'indice del grafico può essere trovato dai dati sul<div>

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

Tutte le versioni

Traccia i grafici in un oggetto / mappa globale per ID contenitore

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 - Accesso all'oggetto grafico da un ID contenitore

PS

Alcune aggiunte sono state fatte nelle versioni più recenti di Highcharts da quando ho scritto questa risposta e sono state prese dalle risposte di @davertron, @Moes e @Przy, per favore vota i loro commenti / risposte in quanto meritano il merito di questi. Aggiungendoli qui poiché questa risposta accettata sarebbe incompleto senza questi

Puoi farlo

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

controlla l'esempio su fiddler

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

chartCont è jQuery Object. chartObj è Highchart Chart Object.

Questo sta usando Highcharts 3.01

Semplicemente con puro JS:

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

Ho trovato un altro modo per farlo ... principalmente perché sto usando Highcharts che sono incorporati in OutSystems Platform e non ho un modo per controllare il modo in cui vengono creati i grafici.

Il modo in cui ho trovato è stato il seguente:

1. Assegna una classe di identificazione al grafico utilizzando l' classNameattributo

   chart: {
       className: 'LifeCycleMasterChart'
   }
   

2. Definire una funzione ausiliaria per ottenere il grafico in base al nome della classe

   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. Usa la funzione ausiliaria ovunque ti serva

   var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');
   

Spero ti aiuti!

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

Il var chart1 è globale, quindi è possibile utilizzare per accedere all'oggetto highchart non importa quale sia il contenitore

chart1.redraw();

... e con l'aiuto di un collega ... un modo migliore per farlo è ...

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

    return foundChart;
}

La risposta di @elo è corretta e votata positivamente, anche se ho dovuto riordinarla un po 'per renderla più chiara:

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

myChartquindi diventa un oggetto Highcharts live che espone tutti gli oggetti di scena presenti nel grafico che viene visualizzato nel file myChartEl. Poiché myChartè un oggetto Highcharts , è possibile concatenare metodi prototipo subito dopo, estenderlo o fare riferimento ad esso.

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

Si può anche myChartpassare .highcharts(), che è un jQueryplugin:

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

L' approccio jQueryplug-in di cui sopra richiede jQuerydi essere caricato prima di utilizzare il plug-in e, naturalmente, il plug-in stesso. È stata l'assenza di questo plug-in che mi ha portato a cercare modi alternativi per ottenere lo stesso risultato con JavaScript vanilla puro.

Utilizzando l'approccio JS puro sono stato in grado di fare ciò di cui avevo bisogno (il secondo frammento di codice) senza dover fare affidamento sujQuery :