আমি কীভাবে কোনও ডিওএম-ধারক দ্বারা হাইচার্ট চার্টে অ্যাক্সেস পেতে পারি?

Question 1

আমি যখন একটি ডিভ ধারককে একটি উচ্চচার্ট-চার্ট সরবরাহ করি, তখন আমি কীভাবে ডিভ-কনটেইনারটির মাধ্যমে চার্ট অবজেক্টে অ্যাক্সেস পেতে পারি?

আমি চার্টকে পরিবর্তনশীল বৈশ্বিক করতে চাই না।

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

আমি ফাংশনগুলিতে কল করতে এই জাতীয় (সিউডোকোড) মত প্রসঙ্গে বাইরের চার্টটি অ্যাক্সেস করতে চাই:

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

Question 2

হাইচার্টস 3.0.0

ব্যবহারকারীরা হাইচার্ট প্লাগইন ব্যবহার করতে পারেন

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

হাইচার্টস 2.3.4

হাইচার্টস.কার্টস অ্যারে থেকে পড়ুন , সংস্করণ ২.৩.৪ এর জন্য এবং পরে, চার্টের সূচীটি ডেটা থেকে পাওয়া যাবে<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"];
}

মোড পড়ুন হাইচার্টস টিপস - একটি ধারক আইডি থেকে চার্ট অবজেক্ট অ্যাক্সেস করা

পুনশ্চ

এই উত্তরটি লেখার পর থেকে হাইচার্টগুলির নতুন সংস্করণগুলিতে কিছু সংযোজন করা হয়েছিল এবং @ ডভারট্রন, @ মুস এবং @ প্রিজির কাছ থেকে নেওয়া উত্তরগুলি নেওয়া হয়েছে , দয়া করে তাদের মন্তব্য / উত্তরগুলিকে উজ্জীবিত করুন কারণ তারা এইগুলির জন্য creditণ প্রাপ্য । এই গৃহীত উত্তর হিসাবে তাদের এখানে যুক্ত করা এগুলি ছাড়া অসম্পূর্ণ হবে

Question 3

তুমি এটি করতে পারো

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

Fiddler উপর উদাহরণ পরীক্ষা করুন

Question 4

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

চার্টকন্টটি jQuery অবজেক্ট। চার্টওবিজে হাইচার্ট চার্ট অবজেক্ট।

এটি হাইচার্টগুলি 3.01 ব্যবহার করছে

Question 5

খাঁটি জেএস সহ কেবল:

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

Question 6

আমি এটি করার অন্য একটি উপায় খুঁজে পেয়েছি ... মূলত কারণ আমি হাইচার্টগুলি ব্যবহার করছি যা আউটসিস্টেম প্ল্যাটফর্মে এমবেড করা আছে এবং চার্টগুলি যেভাবে তৈরি হয় তা নিয়ন্ত্রণ করার আমার কাছে কোনও উপায় নেই।

আমি যেভাবে খুঁজে পেয়েছি তা হ'ল:

চার্টটিতে 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 7

জিকুয়েরি (ভ্যানিলা জেএস) ছাড়াই:

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

ভ্যার চার্ট 1 বিশ্বব্যাপী তাই আপনি ডি হাইচার্ট অবজেক্ট অ্যাক্সেস করতে ব্যবহার করতে পারেন না যা কনটেইনার

chart1.redraw();

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তারপর একটি লাইভ হয়ে Highcharts বস্তু প্রকাশ সমস্ত বর্তমান সাজসরঞ্জাম চার্ট যে রেন্ডার হচ্ছে উপস্থাপন myChartEl। যেহেতু myChartএকটি হাইচার্টস অবজেক্ট তাই প্রোটোটাইপ পদ্ধতিগুলির ঠিক পরে কেউ চেইন করতে পারে, প্রসারিত করতে বা এটি উল্লেখ করতে পারে।

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

একটি myChartমাধ্যমে পেতে পারেন.highcharts() , যা একটি হল jQueryপ্লাগইন:

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

jQueryপ্লাগ-ইন পদ্ধতির উপরে প্রয়োজনjQuery সামনে প্লাগইন ব্যবহার করা হয় লোড করতে হবে, এবং অবশ্যই নিজেই প্লাগইন। এটি এই প্লাগইনটির অনুপস্থিতি যা আমাকে খাঁটি ভ্যানিলা জাভাস্ক্রিপ্ট সহ এটি সম্পাদন করার বিকল্প উপায়গুলির সন্ধানে পেয়েছিল।

খাঁটি জেএস পন্থাটি ব্যবহার করে আমি যা প্রয়োজন (দ্বিতীয় কোড স্নিপেট) উপর নির্ভর না করেই করতে সক্ষম হয়েছিjQuery :