Highcharts에서 드릴 다운시 DIV 숨기기/표시

Question

Highcharts 원형 차트에서 드릴 다운 할 때 관련 DIV을 숨기거나 표시 할 수 있기를 원합니다.

예를 들어 파이 5 개와 DIV 6 개가 있습니다.

드릴 다운하지 않은 DIV 6 (DIVGENERAL)을 표시하려고하지만 섹션에서 드릴 다운 될 때 특정 DIV 섹션을 표시하려고합니다. 내가 Account 1 드릴 다운하면, 내가 Account 4 드릴 다운하면, DIV 6 및 디스플레이 DIV 1을 숨기려 예를 들어

, 나는 내가 성공적으로 얻을 수있었습니다 DIV 4

DIV 6 표시를 숨기려면 드릴 다운 할 때DIV 6을 숨기고 을 표시합니다. 다시 드릴링 할 때이 표시됩니다.

드릴 다운 기능에 DIV을 지정하면이 기능을 숨길 수 있습니다. 그러나 파이의 어느 섹션을 드릴 다운했는지에 따라 어떤 DIV을 숨길 지 알려줄 필요가 있습니다.

나는 어디서 왔는지 보여주는 FIDDLE을 만들었습니다.

events: { 
    drilldown: function (e) { 
     alert('Drill Down'); 
     document.getElementById('Account 1').style.display = "block"; 
     document.getElementById('AccountGeneral').style.display = "none"; 
    }, 
    drillup: function (e) { 
     alert('Drill Up'); 
     document.getElementById('Account 1').style.display = "none"; 
     document.getElementById('AccountGeneral').style.display = "block"; 
    } 
} 

감사

Answer 1

업데이트 된 바이올린 코드를 살펴 준비해주십시오

var panelMapping = { 
    "Account 1": "Panel1", 
    "Account 2": "Panel2", 
    "Account 3": "Panel3", 
    "Account 4": "Panel4", 
    "Account 5": "Panel5" 
    } 

: 내가 좋아하는 그 패널에 매핑 차트 부분에 대한 JS 객체를 추가 한

http://jsfiddle.net/gqu1u940/5/

을

및 drilldown: 이벤트 처리기 로 드릴 다운있어하는 부분 얻을 수 있습니다 :

주

drilldown: function(e) { 
    alert('Drill Down : ' + e.point.name); 
    var associatedPanelId = panelMapping[e.point.name]; 
    document.getElementById(associatedPanelId).style.display = "block"; 
    document.getElementById('Panel6').style.display = "none"; 
}, 
drillup: function(e) { 
    alert('Drill Up'); 
    var panels = document.getElementsByClassName("Panel"); 
    for (var i = 0; i < panels.length; i++) { 
     panels[i].style.display = 'none'; 
    } 
    document.getElementById('Panel6').style.display = "block"; 
} 

: 나는 모든 패널을 숨기고 내가 사용하고있는 Panel5에 Panel1에서 모든 패널에 클래스 Panel을 추가 한drillup 이벤트