Bir DOM-Container aracılığıyla bir Highcharts grafiğine nasıl erişebilirim?

Question 1

Bir yüksek çizelge grafiğini bir div kapsayıcısına işlediğimde, çizelge nesnesine div-Container aracılığıyla nasıl erişebilirim?

Grafik değişkenini global yapmak istemiyorum.

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

İşlevleri çağırmak için grafiğe yukarıdaki bağlamın dışında (sözde kod) erişmek istiyorum:

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

Question 2

Highcharts 3.0.1

Kullanıcılar highcharts eklentisini kullanabilir

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

Önemli grafikler 2.3.4

2.3.4 ve sonraki sürümler için Highcharts.charts dizisinden okuyun , grafiğin dizini aşağıdaki verilerden bulunabilir:<div>

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

Tüm versiyonlar

Global bir nesnede / haritadaki grafikleri konteyner kimliğine göre izleyin

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

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

Okuma Modu @ Highcharts İpuçları - Bir Kapsayıcı Kimliğinden Grafik Nesnesine Erişme

PS

Bu cevabı yazdıktan sonra Highcharts'ın yeni sürümlerinde bazı eklemeler yapıldı ve @davertron, @Moes ve @Przy'den alınan cevaplardan alındı, lütfen bunların övgüsünü hak ettikleri için yorumlarını / cevaplarını yükseltin . Bunları buraya eklemek, bu kabul edilen cevap bunlar olmadan eksik olacaktır

Question 3

Bunu yapabilirsiniz

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

kemancıdaki örneği kontrol et

Question 4

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

chartCont jQuery Nesnesidir. chartObj, Highchart Grafik Nesnesidir.

Bu Highcharts 3.01 kullanıyor

Question 5

Basitçe saf JS ile:

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

Question 6

Bunu yapmanın başka bir yolunu buldum ... esas olarak OutSystems Platformuna gömülü Highcharts kullanıyorum ve grafiklerin yaratılma şeklini kontrol etmenin bir yolu yok.

Bulduğum yol şuydu:

classNameÖzniteliği kullanarak grafiğe tanımlayıcı bir sınıf verin
```
chart: {
    className: 'LifeCycleMasterChart'
}
```

Grafiği sınıf adına göre almak için yardımcı bir işlev tanımlayın

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;

}

Yardımcı işlevi ihtiyaç duyduğunuz her yerde kullanın

var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');

Umarım size yardımcı olur!

Question 7

JQuery (vanilya js) olmadan:

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

Var chart1 globaldir, böylece highchart nesnesine erişmek için kullanabilirsiniz, konteynerin ne olduğu önemli değildir

chart1.redraw();

Question 9

... ve bir meslektaşın yardımıyla ... bunu yapmanın daha iyi bir yolu ...

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

    return foundChart;
}

Question 10

@elo'nun yanıtı doğru ve olumlu oy verildi, ancak daha net hale getirmek için biraz düzeltmem gerekti:

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

myChartDaha sonra canlı hale Highcharts tüm güncel sahne işlenen oluyor grafikte sunmak olduğunu ortaya çıkarır nesne myChartEl. Yana myCharta, Highcharts amacı, tek bir teneke kutu zincir prototip yöntemleri sağ sonra uzatmak ya da bakınız.

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

Bir de alabilirsiniz myChartaracılığıyla .highcharts()bir olan jQueryeklenti:

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

Yukarıdaki jQueryeklenti yaklaşımı jQuery, eklenti kullanılmadan önce ve tabii ki eklentinin kendisinin yüklenmesini gerektirir . Aynı şeyi saf vanilya JavaScript ile başarmanın alternatif yollarını aramama neden olan şey bu eklentinin yokluğuydu.

Saf JS yaklaşımını kullanarak, ihtiyacım olanı (ikinci kod parçacığı) şunlara güvenmek zorunda kalmadan yapabildimjQuery :