Como posso obter acesso a um gráfico Highcharts através de um DOM-Container?

Question 1

Quando eu renderizo um gráfico highcharts para um contêiner div, como posso obter acesso ao objeto de gráfico por meio do contêiner div?

Não quero tornar a variável do gráfico global.

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

Desejo acessar o gráfico fora do contexto acima assim (pseudocódigo), para chamar funções:

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

Question 2

Highcharts 3.0.1

Os usuários podem usar o plugin highcharts

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

Highcharts 2.3.4

Leia a partir da matriz Highcharts.charts , para a versão 2.3.4 e posterior, o índice do gráfico pode ser encontrado a partir dos dados no<div>

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

Todas versões

Rastreie gráficos em um objeto / mapa global por ID de contêiner

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 - Acessando Objeto de Gráfico de um Container ID

PS

Algumas adições foram feitas nas versões mais recentes do Highcharts desde que escrevi esta resposta e foram tiradas das respostas de @davertron, @Moes e @Przy. Vote positivamente em seus comentários / respostas, pois eles merecem o crédito por eles. Adicioná-los aqui, pois esta resposta aceita estaria incompleta sem estes

Question 3

você consegue fazer isso

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

verifique o exemplo no violinista

Question 4

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

chartCont é um objeto jQuery. chartObj é Highchart Chart Object.

Isso está usando Highcharts 3.01

Question 5

Simplesmente com JS puro:

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

Question 6

Eu encontrei outra maneira de fazer isso ... principalmente porque estou usando Highcharts que estão embutidos na Plataforma OutSystems, e não tenho uma maneira de controlar a forma como os gráficos são criados.

A maneira que encontrei foi a seguinte:

Dê uma classe de identificação ao gráfico usando o classNameatributo
```
chart: {
    className: 'LifeCycleMasterChart'
}
```

Defina uma função auxiliar para obter o gráfico por nome 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;

}

Use a função auxiliar sempre que precisar

var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');

Espero que ajude você!

Question 7

Sem jQuery (vanilla js):

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

Question 8

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

O var chart1 é global, então você pode usar para acessar o objeto highchart não importa qual é o contêiner

chart1.redraw();

Question 9

... e com a ajuda de um colega ... a melhor maneira de fazer é ...

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

    return foundChart;
}

Question 10

A resposta de @elo está correta e votada positivamente, embora eu tenha que dar um jeito para ficar mais claro:

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

myChartem seguida, torna-se um objeto Highcharts ativo que expõe todos os adereços atuais presentes no gráfico que é renderizado no myChartEl. Como myCharté um objeto Highcharts , pode-se encadear métodos de protótipo logo após ele, estendê-lo ou fazer referência a ele.

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

Também se pode chegar myChartatravés de .highcharts(), que é um jQueryplugin:

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

A abordagem de jQueryplug-in acima precisa jQueryser carregada antes que o plug-in seja usado e, claro, o próprio plug-in. Foi a ausência desse plug-in que me levou a procurar maneiras alternativas de fazer o mesmo com o JavaScript vanilla puro.

Usando a abordagem JS pura, consegui fazer o que precisava (o segundo trecho de código) sem ter que depender dejQuery :