Come posso accedere a una tabella Highcharts tramite un DOM-Container

Quando eseguo il rendering di un diagramma grafico ad alta risoluzione in un contenitore div, come posso ottenere l’accesso all’object 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 come questo (pseudocodice), per chiamare le funzioni:

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

Highcharts 3.0.1

Gli utenti possono utilizzare il plugin highcharts

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

Grafici elevati 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

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

Tutte le versioni

Traccia i grafici in un object / 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"]; } 

Modalità di lettura @ Punte dei grafici elevati – Accesso all’object grafico da un ID contenitore

PS

Alcune aggiunte sono state apportate nelle versioni più recenti di Highcharts dopo la stesura di questa risposta e sono state prese dalle risposte di @davertron, @Moes e @Przy, per favore inviano i loro commenti / risposte come meritano il merito . Aggiungendoli qui come questa risposta accettata sarebbe incompleta senza questi

Puoi farlo

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

controlla l’esempio sul violinista

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

chartCont è jQuery Object. chartObj è Highchart Chart Object.

Questo sta usando Highcharts 3.01

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

Il modo in cui ho trovato è stato il seguente:

  1. Assegna una class identificativa al grafico usando l’attributo className

     chart: { className: 'LifeCycleMasterChart' } 
  2. Definire una funzione ausiliaria per ottenere il grafico in base al nome della class

     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 che ti aiuti!

 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 grafico var1 è globale, quindi è ansible utilizzare per accedere all’object highchart non importa quale è 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; } 

Semplicemente con JS puro:

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

Senza jQuery (vanilla js):

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