DOM-Container를 통해 Highchart 차트에 액세스하려면 어떻게 해야 합니까?

DOM-Container를 통해 Highchart 차트에 액세스하려면 어떻게 해야 합니까?

높은 차트를 div 컨테이너에 렌더링할 때 div-Container를 통해 차트 개체에 액세스하려면 어떻게 해야 합니까?

차트 변수를 전역적으로 만들고 싶지 않습니다.

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

위의 컨텍스트(사이비 코드) 밖에 있는 차트에 액세스하여 함수를 호출합니다.

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

상위 차트 3.0.1

사용자는 상위 차트 플러그인을 사용할 수 있습니다.

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

상위 차트 2.3.4

Highcharts.charts 배열에서 읽어보면 버전 2.3.4 이상의 경우 차트의 인덱스는<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"];
}

모드 @ 고위 관리도 읽기 팁 - 컨테이너 ID에서 차트 개체에 액세스

추신.

이 답변을 작성한 이후 하이차트의 최신 버전에서 일부 추가 사항이 추가되었으며 @davertron, @Nerdroid 및 @Frzy의 답변에서 가져온 것입니다. 이에 대한 공로를 인정받을 자격이 있으니 댓글/답변에 투표해 주십시오.이 승인된 답변을 여기에 추가하는 것은 이것들 없이는 불완전합니다.

당신은 이걸 할 수 있다.

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

바이올린 연주자의 예를 확인합니다.

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

chartContisjQueryObject입니다.chartObj는 고위 관리도 개체입니다.

하이차트 3.01을 사용하고 있습니다.

단순하게 순수 JS로:

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

제가 다른 방법을 찾은 이유는... 주로 OutSystems Platform에 내장된 Highchart를 사용하고 있기 때문입니다. 차트를 만드는 방법을 제어할 방법이 없기 때문입니다.

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

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. 필요한 곳에서 보조 기능을 사용할 수 있습니다.

   var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');
   

도움이 되길 바래요!

jQuery(vanilla js) 미포함:

let chartDom = document.getElementById("testDivId");
let chart = Highcharts.charts[Highcharts.attr(chartDom, '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]
         }]
      });
   });

var chart1은 글로벌이므로 컨테이너에 상관없이 de highchart 개체에 액세스하는 데 사용할 수 있습니다.

chart1.redraw();

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

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

    return foundChart;
}

@elo의 대답은 정확하고 찬성표를 던졌지만, 좀 더 명확하게 하기 위해서는 정리를 해야 했습니다.

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

myChart그러면 차트에 존재하는 모든 현재 소품을 노출하는 라이브 Highchart 개체가 됩니다.myChartEl.부터myChart는 Highcharts 객체로 프로토타입 메소드를 바로 뒤에 체인으로 연결하거나 확장하거나 참조할 수 있습니다.

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

또한 얻을 수 있습니다.myChart해를 .highcharts(), 어느것이jQuery플러그인:

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

위의 플러그인 접근 방식은 다음을 요구합니다.jQuery플러그인을 사용하기 전에 로드해야 합니다. 물론 플러그인 자체도 마찬가지입니다.저는 이 플러그인의 부재로 순수 바닐라 자바스크립트로 동일한 작업을 수행할 수 있는 대안적인 방법을 찾게 되었습니다.

순수 JS 접근 방식을 사용함으로써 필요한 작업(두 번째 코드 스니펫)을 필요 없이 수행할 수 있었습니다.

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