Jak mogę uzyskać dostęp do wykresu Highcharts za pośrednictwem DOM-Container

85

Kiedy renderuję highcharts-chart do kontenera div, w jaki sposób mogę uzyskać dostęp do obiektu wykresu za pośrednictwem kontenera div? nie chcę, aby zmienna wykresu była globalna.

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

Chcę uzyskać dostęp do wykresu poza powyższym kontekstem, takim jak ten (pseudokod), aby wywołać funkcje:

var chart = Highcharts.Chart("testDivId"); //access from id
chart.redraw();
Manuel
źródło

Odpowiedzi:

139

Highcharts 3.0.1

Użytkownicy mogą korzystać z wtyczki highcharts

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

Highcharts 2.3.4

Odczytane z tablicy Highcharts.charts , dla wersji 2.3.4 i nowszych indeks wykresu można znaleźć na podstawie danych w<div>

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

Wszystkie wersje

Śledź wykresy w globalnym obiekcie / mapie według identyfikatora kontenera

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 - Dostęp do obiektu wykresu z identyfikatora kontenera

PS

Niektóre dodatki zostały wprowadzone w nowszych wersjach Highcharts od czasu napisania tej odpowiedzi i zostały zaczerpnięte z odpowiedzi @davertron, @Moes i @Przy, prosimy o zagłosowanie ich komentarzy / odpowiedzi, ponieważ zasługują na uznanie . Dodanie ich tutaj jako zaakceptowanej odpowiedzi byłoby niekompletne bez nich

Jugal Thakkar
źródło
10
Wygląda na to, że od wersji 2.3.4 Highcharts śledzi wszystkie wykresy na stronie: api.highcharts.com/highcharts#Highcharts
davertron
@davertron dzięki za aktualizację ... to fajna funkcja, nie sądzę, że potrzeba dużo kodu / wysiłku, aby to mieć ...
Jugal Thakkar
+1 dla $ ("# container"). Data ('highchartsChart') jako indeks najlepszych wykresów. to bardzo przydatne, dzięki!
Shahar,
1
Czy jest jakaś podobna metoda, której mógłbym użyć do highstock?
tnkh
45

możesz to zrobić

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

sprawdź przykład na Fiddler

Nerdroid
źródło
U mnie to nie zadziałało, musiałem użyć odpowiedzi @Frzy. Używam wersji 4.1.4
David Torres,
nie wiem, dlaczego to nie zadziałało, przykład skrzypiec używa wersji 4.2.3
Nerdroid Kwietnia
1
Zwraca element kontenera zamiast wykresu, dlatego odpowiedź @Frzy zadziałała. Znalazłem też inne rozwiązanie:$("#testDivId").highcharts({...}, function(chart) {...});
David Torres,
zdecydowanie zwraca obiekt jsfiddle.net/abbasmhd/86hLvc5s sprawdź wyjście konsoli po kliknięciu przycisku
Nerdroid
1
Tak, w jsfiddle to robi, zgadzam się. Ale nie dla wszystkich pracuje tak samo, jak widać po 11 głosach poparcia odpowiedzi @Frzy
David Torres
22
var $chartCont = $('#container').highcharts({...}),
    chartObj = Highcharts.charts[$chartCont.data('highchartsChart')];

chartCont to obiekt jQuery. chartObj to obiekt wykresu Highchart.

Używa Highcharts 3.01

Frzy
źródło
10

Po prostu z czystym JS:

var obj = document.getElementById('#container')
    Highcharts.charts[obj.getAttribute('data-highcharts-chart')];
elo
źródło
9

Znalazłem inny sposób na zrobienie tego ... głównie dlatego, że używam Highcharts, które są osadzone w platformie OutSystems i nie mam sposobu na kontrolowanie sposobu tworzenia wykresów.

Sposób, który znalazłem, był następujący:

  1. Nadaj wykresowi klasę identyfikującą za pomocą classNameatrybutu

    chart: {
        className: 'LifeCycleMasterChart'
    }
    
  2. Zdefiniuj funkcję pomocniczą, aby uzyskać wykres według nazwy klasy

    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. Korzystaj z funkcji pomocniczej wszędzie tam, gdzie jej potrzebujesz

    var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');
    

Mam nadzieję, że ci to pomoże!

Pedro Cardoso
źródło
5

Bez jQuery (vanilla js):

let chartDom = document.getElementById("testDivId");
let chart = Highcharts.charts[Highcharts.attr(chartDom, 'data-highcharts-chart')]
Tauka Kunzhol
źródło
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]
         }]
      });
   });

Zmienna chart1 jest globalna, więc możesz jej użyć, aby uzyskać dostęp do obiektu wysokiego wykresu, który nie ma znaczenia, którym jest kontener

chart1.redraw();
manuerumx
źródło
2

... iz pomocą kolegi ... lepszym sposobem na to jest ...

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

    return foundChart;
}
Pedro Cardoso
źródło
1

Odpowiedź @elo jest poprawna i pozytywnie oceniona, chociaż musiałem ją trochę uporządkować, aby była jaśniejsza:

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

myChartnastępnie staje się aktywnym obiektem Highcharts, który odsłania wszystkie obecne rekwizyty obecne na wykresie, który jest renderowany w myChartEl. Ponieważ myChartjest to obiekt Highcharts , można bezpośrednio za nim łączyć metody prototypowe, rozszerzać go lub odwoływać się do niego.

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

Można również uzyskać myChartpoprzez .highcharts(), który jest jQueryplugin:

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

Powyższe podejście do jQuerywtyczki wymaga jQueryzaładowania przed użyciem wtyczki i oczywiście samej wtyczki. To brak tej wtyczki skłonił mnie do poszukiwania alternatywnych sposobów osiągnięcia tego samego z czystym waniliowym JavaScriptem.

Używając czystego podejścia JS, byłem w stanie zrobić to, czego potrzebowałem (drugi fragment kodu) bez konieczności polegania najQuery :

Wallace Sidhrée
źródło