DOM 컨테이너를 통해 Highcharts 차트에 액세스하려면 어떻게해야합니까?

DOM 컨테이너를 통해 Highcharts 차트에 액세스하려면 어떻게해야합니까?

---

highcharts-chart를 div 컨테이너에 렌더링 할 때 div-Container를 통해 차트 개체에 액세스하려면 어떻게해야합니까? 차트 변수를 전역으로 만들고 싶지 않습니다.

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

함수를 호출하기 위해 위의 컨텍스트 (의사 코드) 외부의 차트에 액세스하고 싶습니다.

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

---

하이 차트 3.0.1

사용자는 highcharts 플러그인을 사용할 수 있습니다.

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

하이 차트 2.3.4

버전 2.3.4 이상의 경우 Highcharts.charts 배열 에서 읽 습니다. 차트의 색인은 다음의 데이터에서 찾을 수 있습니다.<div>

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

모든 버전

컨테이너 ID별로 전역 개체 /지도의 차트 추적

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 팁-컨테이너 ID에서 차트 개체 액세스

추신

이 답변을 작성한 이후로 최신 버전의 Highcharts에서 일부 추가가 이루어졌으며 @davertron, @Moes 및 @Przy의 답변에서 가져온 것입니다 . 이 수락 된 답변으로 여기에 추가하면 이것 없이는 불완전합니다.

---

넌 할 수있어

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

피들러에서 예제 확인

---

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

chartCont는 jQuery 객체입니다. chartObj는 Highchart Chart Object입니다.

이것은 Highcharts 3.01을 사용하고 있습니다.

---

다른 방법을 찾았습니다. 주로 OutSystems Platform에 포함 된 Highcharts를 사용하고 있고 차트 생성 방법을 제어 할 방법이 없기 때문입니다.

내가 찾은 방법은 다음과 같습니다.

1. className속성을 사용하여 차트에 식별 클래스 제공

   chart: {
       className: 'LifeCycleMasterChart'
   }
   

2. 클래스 이름으로 차트를 가져 오는 보조 기능 정의

   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 the auxiliary function wherever you need it

   var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');
   

Hope it helps you!

---

Simply with pure JS :

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

---

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

The var chart1 is global so you can use to access de highchart object doesnt matter wich is the container

chart1.redraw();

---

... and with the help of a colleague... a better way to do it is...

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

    return foundChart;
}

---

Without jQuery (vanilla js):

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

---

@elo's answer is correct and upvoted, though I had to tidy it a little to make it clearer:

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

myChart then becomes a live Highcharts object that exposes all current props present in the chart that's rendered in the myChartEl. Since myChart is a Highcharts object, one can chain prototype methods right after it, extend it or refer to it.

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

One can also get myChart through .highcharts(), which is a jQuery plugin:

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

The jQuery plugin approach above requires jQuery to be loaded before the plugin is used, and of course the plugin itself. It was the absence of this plugin that got me into looking for alternative ways to accomplish the same with pure vanilla JavaScript.

By using the pure JS approach I was able to do what I needed (the second code snippet) without having to rely on jQuery:

참고URL : https://stackoverflow.com/questions/13049977/how-can-i-get-access-to-a-highcharts-chart-through-a-dom-container