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

84

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();
Manuel
fonte

Respostas:

140

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

Jugal Thakkar
fonte
10
Parece que a partir da versão 2.3.4 Highcharts mantém o controle de todos os gráficos na página: api.highcharts.com/highcharts#Highcharts
davertron
@davertron obrigado pela atualização ... é um bom recurso de se ter, não acho que muito código / esforço foi necessário para ter isso ...
Jugal Thakkar
+1 para $ ("# container"). Data ('highchartsChart') como o índice de highcharts. é muito útil, obrigado!
Shahar
1
Algum método semelhante que eu pudesse usar para highstock?
tnkh
45

você consegue fazer isso

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

verifique o exemplo no violinista

Nerdroid
fonte
Não funcionou para mim, tive que usar a resposta @Frzy. Estou usando a versão 4.1.4
David Torres
não sei por que não funcionou para você, o exemplo de violino usa v4.2.3
Nerdroid
1
Ele está retornando o elemento do contêiner em vez do gráfico, e é por isso que a resposta @Frzy funcionou. Além disso, encontrei outra solução:$("#testDivId").highcharts({...}, function(chart) {...});
David Torres,
está definitivamente retornando o objeto jsfiddle.net/abbasmhd/86hLvc5s verificar a saída do console depois de clicar no botão
Nerdroid
1
Sim, no jsfiddle está fazendo isso, eu concordo. Mas nem todo mundo está trabalhando da mesma forma, como você pode ver pelos 11 votos positivos da resposta de @Frzy
David Torres
22
var $chartCont = $('#container').highcharts({...}),
    chartObj = Highcharts.charts[$chartCont.data('highchartsChart')];

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

Isso está usando Highcharts 3.01

Frzy
fonte
10

Simplesmente com JS puro:

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

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:

  1. Dê uma classe de identificação ao gráfico usando o classNameatributo

    chart: {
        className: 'LifeCycleMasterChart'
    }
    
  2. 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;
    

    }

  3. Use a função auxiliar sempre que precisar

    var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');
    

Espero que ajude você!

Pedro Cardoso
fonte
5

Sem jQuery (vanilla js):

let chartDom = document.getElementById("testDivId");
let chart = Highcharts.charts[Highcharts.attr(chartDom, 'data-highcharts-chart')]
Tauka Kunzhol
fonte
4
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();
manuerumx
fonte
2

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

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

    return foundChart;
}
Pedro Cardoso
fonte
1

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 :

Wallace Sidhrée
fonte