Comment puis-je obtenir l'accès à un Highcharts graphique par le biais d'un DOM-Conteneur

Question

Quand j'ai rendu un highcharts-graphique à un div conteneur, comment puis-je accéder à l'objet graphique par le biais de la div Conteneur? je ne veux pas faire de la charte de la variable globale.

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

Je veux accéder au graphique en dehors du contexte ci-dessus comme ceci (pseudo-code), l'appel des fonctions de:

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

Answer 1

Highcharts par lui-même ne garde pas trace des diagrammes qui sont créés.

Vous pouvez

• Faire le graphique de la variable globale.

  var chart
  function drawChart(){
    chart=new Highcharts.Chart({...});
  }     
  

• Magasin de tableau dans une variable globale/carte

  var chartMap={}; // Initialize empty map
  function drawChart(){
    var chart=new Highcharts.Chart({...});
    //Store in map
    chartMap[chart.renderTo.id]=chart;
  }
  
  function someOther(){
    //Read from map
    var chart=chartMap["container"];
  }
  

• Magasin de graphique dans un des objets globaux comme window,document,etc.

  function drawChart(){
     window.chart=new Highcharts.Chart({...});
  }
  
  function someOther(){
     var myChart=window.chart;
  }
  

• Une combinaison des méthodes ci-dessus

Mise à JOUR

Les ajouts suivants ont été apportées dans les versions ultérieures de Highcharts après la rédaction de cette réponse et ont été prises à partir des réponses de @davertron, @Moe et @Przy, veuillez upvote leurs observations/réponses comme ils le méritent le crédit pour ces. Les ajouter ici que ce accepté de répondre serait incomplète sans ces

• Lire à partir de la Highcharts.tableaux tableau, pour la version 2.3.4 et plus tard, grâce à @davertron

  function drawChart(){
     new Highcharts.Chart({...});
  }
  
  function someOther(){
     var myChart=Highcharts.charts[0];
  }
  

• Si il y a plusieurs graphiques, pour les utilisateurs de jQuery, l'index de la carte peut être trouvé à partir des données sur la div, grâce à @Przy

  function drawChart(){
     new Highcharts.Chart({...});
  }
  
  function someOther(){
     var index=$("#container").data('highchartsChart');
     var myChart=Highcharts.charts[index];
  }
  

• jQuery les utilisateurs peuvent utiliser le highcharts plugin qui vient avec Highcharts 3.0.1 et plus tard, grâce à @Moe

  function drawChart(){
     $("#container").highcharts({...});
  }
  
  function someOther(){
     var myChart=$("#container").highcharts();
  }
  

Answer 2

vous pouvez faire cette var chart = $('#testDivId').highcharts();

vérifier exemple sur fiddler

Answer 3

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

chartCont est l'Objet jQuery. chartObj est Highchart d'un Objet Graphique.

C'est à l'aide de Highcharts 3.01

Answer 4

J'ai trouvé un autre moyen de le faire... surtout parce que je suis en utilisant Highcharts qui sont incorporés dans OutSystems Plate-forme, et je n'ai pas de moyen de contrôler la façon dont les graphiques sont créés.

La façon que j'ai trouvée est la suivante:

1. Donner une classe d'identification pour le graphique à l'aide d' className d'attribut

   chart: {
       className: 'LifeCycleMasterChart'
   }
   

2. Définir une fonction auxiliaire pour obtenir le graphique par le nom de 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. Utiliser la fonction auxiliaire partout où vous en avez besoin

   var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');
   

Espère que cela vous aide!

Answer 5

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

Le var chart1 est global, de sorte que vous pouvez utiliser pour accéder à de highchart objet n'importe pas qui est le conteneur

chart1.redraw();