Wie kann ich über einen DOM-Container auf ein Highcharts-Diagramm zugreifen?

Wie kann ich beim Rendern eines Highcharts-Diagramms in einen Div-Container über den Div-Container auf das Diagrammobjekt zugreifen? Ich möchte die Diagrammvariable nicht global machen.

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

Ich möchte auf das Diagramm außerhalb des obigen Kontexts wie folgt zugreifen (Pseudocode), um Funktionen aufzurufen:

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

Highcharts 3.0.1

Benutzer können das Highcharts-Plugin verwenden

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

Highcharts 2.3.4

Lesen Sie aus dem Array Highcharts.charts für Version 2.3.4 und höher den Index des Diagramms aus den Daten auf der<div>

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

Alle Versionen

Verfolgen Sie Diagramme in einem globalen Objekt / einer globalen Karte nach Container-ID

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

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

Lesemodus @ Highcharts Tipps - Zugriff auf das Diagrammobjekt über eine Container-ID

PS

In den neueren Versionen von Highcharts wurden seit dem Schreiben dieser Antwort einige Ergänzungen vorgenommen, die den Antworten von @davertron, @Moes und @Przy entnommen wurden. Bitte stimmen Sie ihren Kommentaren / Antworten zu, da sie die Anerkennung dafür verdienen . Das Hinzufügen hier als diese akzeptierte Antwort wäre ohne diese unvollständig

du kannst das

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

Beispiel auf Geiger überprüfen

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

chartCont ist ein jQuery-Objekt. chartObj ist ein Highchart-Diagrammobjekt.

Dies verwendet Highcharts 3.01

Ich habe einen anderen Weg gefunden ... hauptsächlich, weil ich Highcharts verwende, die in OutSystems Platform eingebettet sind, und ich keine Möglichkeit habe, die Art und Weise zu steuern, wie Diagramme erstellt werden.

Der Weg, den ich fand, war der folgende:

1. Geben Sie dem Diagramm mithilfe eines classNameAttributs eine identifizierende Klasse

   chart: {
       className: 'LifeCycleMasterChart'
   }

2. Definieren Sie eine Hilfsfunktion, um das Diagramm nach Klassennamen abzurufen

   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. Verwenden Sie die Zusatzfunktion überall dort, wo Sie sie benötigen

   var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');

Hoffe es hilft dir!

Einfach mit reinem JS:

var obj = document.getElementById('#container')
    Highcharts.charts[obj.getAttribute('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]
         }]
      });
   });

Das var chart1 ist global, sodass Sie auf das Highchart-Objekt zugreifen können, unabhängig davon, um welchen Container es sich handelt

chart1.redraw();

Ohne jQuery (Vanille js):

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

... und mit Hilfe eines Kollegen ... ist es besser, ...

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

    return foundChart;
}

Die Antwort von @elo ist richtig und positiv, obwohl ich sie ein wenig aufräumen musste, um es klarer zu machen:

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

myChartwird dann zu einem Live- Highcharts- Objekt, das alle aktuellen Requisiten in dem Diagramm anzeigt , das in der Tabelle gerendert wurde myChartEl. Da myChartes sich um ein Highcharts- Objekt handelt, kann man Prototypmethoden direkt danach verketten , erweitern oder darauf verweisen.

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

Man kann auch erhalten myChartdurch .highcharts(), das ist ein jQueryPlug -in :

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

Der obige jQueryPlugin- Ansatz muss jQuerygeladen werden, bevor das Plugin verwendet wird, und natürlich das Plugin selbst. Es war das Fehlen dieses Plugins, das mich dazu brachte, nach alternativen Möglichkeiten zu suchen, um dasselbe mit reinem Vanille-JavaScript zu erreichen.

Mit dem reinen JS-Ansatz konnte ich das tun, was ich brauchte (das zweite Code-Snippet), ohne mich auf Folgendes verlassen zu müssenjQuery :