web-dev-qa-db-fra.com

Comment puis-je accéder à un graphique Highcharts via un conteneur DOM?

Quand je rend un highcharts-chart à un conteneur div, comment puis-je avoir accès à l'objet graphique via le div-Container? Je ne veux pas rendre le graphique variable globale.

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

Je veux accéder à la carte en dehors du contexte ci-dessus comme ceci (pseudocode), pour appeler des fonctions:

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

Highcharts 3.0.1

Les utilisateurs peuvent utiliser le plugin highcharts

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

Highcharts 2.3.4

Lisez le tableau Highcharts.charts , à partir de la version 2.3.4, vous pouvez trouver l'index du graphique à partir des données du <div>

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

Toutes les versions

Suivre les graphiques dans un objet global/une carte par ID de conteneur

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

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

Conseils en mode de lecture @ Highcharts - Accès à un objet graphique à partir d'un ID de conteneur

P.S.

Certains ajouts ont été faits dans les versions les plus récentes de Highcharts depuis l’écriture de cette réponse et ont été tirés des réponses de @davertron, @Moes et @Przy. pour ceux-ci. Les ajouter ici car cette réponse acceptée serait incomplète sans ces

136
Jugal Thakkar

tu peux le faire

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

exemple de vérification sur le violoniste

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

chartCont est un objet jQuery. chartObj est un objet graphique Highchart.

Ceci utilise Highcharts 3.01

22
Frzy

J'ai trouvé un autre moyen de le faire ... principalement parce que j'utilise des Highcharts intégrés à OutSystems Platform et que je ne dispose pas d'un moyen de contrôler la manière dont les graphiques sont créés.

La façon dont j'ai trouvé était la suivante:

  1. Donnez une classe d'identification au graphique en utilisant l'attribut className

    chart: {
    className: 'LifeCycleMasterChart'
}

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

    var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');

J'espère que ça vous aide!

7
Pedro Cardoso

Simplement avec du JS pur:

var obj = document.getElementById('#container')
    Highcharts.charts[obj.getAttribute('data-highcharts-chart')];
6
elo
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, vous pouvez donc l'utiliser pour accéder à l'objet Highchart, peu importe le conteneur.

chart1.redraw();
4
manuerumx

... et avec l'aide d'un collègue ... une meilleure façon de le faire est ...

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

    return foundChart;
}
2
Pedro Cardoso

Sans jQuery (Vanilla js):

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

La réponse de @ elo est correcte et a été votée, bien que je sois obligée de la ranger un peu pour que ce soit plus clair:

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

myChart devient alors un objet actif Highcharts qui expose tous les accessoires actuels présents dans le graphique rendu dans le myChartEl. Puisque myChart est un objet Highcharts, il est possible de chaîner des méthodes prototypes juste après, d’agrandir ou de s'y référer.

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

On peut aussi obtenir myChart à travers .highcharts(), qui est un plugin jQuery:

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

L'approche jQuery du plugin ci-dessus nécessite le chargement de jQuery avant l'utilisation du plugin, et bien sûr le plugin lui-même. . C'est l'absence de ce plugin qui m'a amené à rechercher d'autres moyens de réaliser la même chose avec du code JavaScript pur à la vanille.

En utilisant l'approche purement JS, j'ai pu faire ce dont j'avais besoin (le deuxième extrait de code) sans avoir à compter sur jQuery:

0
Wallace Sidhrée