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

Question 1

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

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

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

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

Question 2

하이 차트 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의 답변에서 가져온 것입니다 . 이 수락 된 답변으로 여기에 추가하면 이것 없이는 불완전합니다.

Question 3

넌 할 수있어

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

피들러에서 예제 확인

Question 4

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

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

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

Question 5

단순히 순수한 JS로 :

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

Question 6

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

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

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

jQuery (바닐라 js)없이 :

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은 전역이므로 highchart 객체에 액세스하는 데 사용할 수 있습니다.

chart1.redraw();

Question 9

... 그리고 동료의 도움으로 ... 더 좋은 방법은 ...

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

    return foundChart;
}

Question 10

@elo 의 대답은 정확하고 찬성 되었지만 더 명확하게하기 위해 약간 정리해야했습니다.

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

myChart그런 다음 에서 렌더링 된 차트에있는 모든 현재 소품을 노출 하는 라이브 Highcharts 개체가됩니다 myChartEl. myChart은 Highcharts 개체 이므로 바로 뒤에 프로토 타입 메서드를 연결하거나 확장하거나 참조 할 수 있습니다.

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

플러그인 인을 myChart통해 얻을 수도 있습니다..highcharts()jQuery

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

위 의 jQuery플러그인 접근 방식 jQuery은 플러그인을 사용하기 전에 플러그인 자체를로드해야합니다. 순수한 바닐라 JavaScript로 동일한 작업을 수행 할 수있는 대안을 찾게 된 것은이 플러그인이 없었기 때문입니다.

순수한 JS 접근 방식을 사용하여jQuery 다음 과 같이 의존하지 않고도 필요한 작업 (두 번째 코드 스 니펫)을 수행 할 수있었습니다 .