मैं DOM-कंटेनर के माध्यम से Highcharts चार्ट तक कैसे पहुंच सकता हूं

Question 1

जब मैं एक divchar कंटेनर में एक highcharts- चार्ट प्रस्तुत करता हूं, तो मैं div- कंटेनर के माध्यम से चार्ट ऑब्जेक्ट तक कैसे पहुंच सकता हूं? मैं चार्ट को वैश्विक नहीं बनाना चाहता।

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

मैं इस तरह के संदर्भ के बाहर चार्ट का उपयोग करना चाहता हूं (स्यूडोकोड), कॉल फ़ंक्शन के लिए:

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

Question 2

हाईचर्स 3.0.1

उपयोगकर्ता हाईचर्स प्लगइन का उपयोग कर सकते हैं

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

हाईचर्स 2.3.4

संस्करण 2.3.4 और बाद के संस्करण के लिए Highcharts.charts सरणी से पढ़ें , चार्ट का सूचकांक डेटा पर डेटा से पाया जा सकता है<div>

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

सभी संस्करण

कंटेनर आईडी द्वारा एक वैश्विक वस्तु / नक्शे में ट्रैक चार्ट

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

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

पढ़ें मोड @ Highcharts टिप्स - एक कंटेनर आईडी से चार्ट ऑब्जेक्ट तक पहुंचना

पुनश्च

इस उत्तर को लिखने के बाद से हाईचर्स के नए संस्करणों में कुछ परिवर्धन किए गए थे और उन्हें @davertron, @Moes और @Przy के उत्तरों से लिया गया है , कृपया उनकी टिप्पणियों / उत्तरों को अपवर्जित करें क्योंकि वे इनका श्रेय प्राप्त करते हैं। उन्हें यहाँ जोड़ना क्योंकि यह स्वीकृत उत्तर इनके बिना अधूरा होगा

Question 3

तुम यह केर सकते हो

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

fiddler पर उदाहरण देखें

Question 4

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

ChartCont jQuery ऑब्जेक्ट है। ChartObj हाईचर चार्ट ऑब्जेक्ट है।

यह Highcharts 3.01 का उपयोग कर रहा है

Question 5

मुझे ऐसा करने का एक और तरीका मिला ... मुख्यतः क्योंकि मैं हाईस्टार्ट्स का उपयोग कर रहा हूं जो आउटसिस्टम प्लेटफॉर्म में एम्बेडेड हैं, और मेरे पास चार्ट बनाने के तरीके को नियंत्रित करने का तरीका नहीं है।

जिस तरह से मैंने पाया वह निम्नलिखित था:

classNameविशेषता का उपयोग करके चार्ट को एक पहचान वर्ग दें
```
chart: {
    className: 'LifeCycleMasterChart'
}
```

वर्ग नाम से चार्ट प्राप्त करने के लिए एक सहायक फ़ंक्शन को परिभाषित करें

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;

}

जहां भी जरूरत हो सहायक समारोह का उपयोग करें
```
var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');
```

आशा है कि यह आपकी मदद करता है!

Question 6

बस शुद्ध जेएस के साथ:

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

Question 7

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

वर्जन चार्ट 1 वैश्विक है इसलिए आप डी हाईचर्ट ऑब्जेक्ट का उपयोग नहीं कर सकते हैं जो कि कंटेनर है

chart1.redraw();

Question 8

बिना jQuery (वेनिला js):

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

Question 9

... और एक सहयोगी की मदद से ... इसे करने का एक बेहतर तरीका है ...

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

    return foundChart;
}

Question 10

@ माता-पिता का उत्तर सही और उत्कीर्ण है, हालांकि मुझे इसे स्पष्ट करने के लिए इसे थोड़ा साफ करना पड़ा:

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

myChartफिर एक लाइव हाईचर्ट ऑब्जेक्ट बन जाता है, जो चार्ट में मौजूद सभी मौजूदा प्रॉप्स को उजागर करता है जो इसमें प्रस्तुत किए गए हैं myChartEl। चूँकि myChartएक Highcharts ऑब्जेक्ट है, कोई इसके बाद प्रोटोटाइप विधियों को चेन कर सकता है, इसे बढ़ा सकता है या इसे संदर्भित कर सकता है।

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

एक के myChartमाध्यम से भी प्राप्त कर सकते हैं .highcharts(), जो एक jQueryप्लगइन है:

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

jQueryप्लगइन दृष्टिकोण से ऊपर की आवश्यकता jQueryसे पहले प्लगइन प्रयोग किया जाता है लोड करने के लिए, और निश्चित रूप से अपने आप प्लगइन। यह इस प्लगइन की अनुपस्थिति थी जो मुझे शुद्ध वैनिला जावास्क्रिप्ट के साथ ही पूरा करने के वैकल्पिक तरीकों की तलाश में मिला।

शुद्ध जेएस दृष्टिकोण का उपयोग करके मैं उस पर भरोसा करने में सक्षम था जो मुझे (दूसरे कोड स्निपेट) की आवश्यकता थीjQuery :