Hide/Show DIV beim Drilldown in Highcharts

Question

Ich möchte in der Lage sein, eine relevante DIV zu verstecken/zeigen, wenn Sie in einem Highcharts Tortendiagramm nach unten bohren.

Zum Beispiel habe ich 5 Stücke von meinem Kuchen und 6 DIVs.

Ich möchte DIV 6 (genannt DIVGENERAL) zeigen, wenn es nicht gebohrt wird, aber dann die abschnittsspezifische DIV, wenn auf einen Abschnitt gebohrt.

Zum Beispiel, wenn ich auf Account 1 nach unten bohren, ich will DIV 1DIV 6 und Anzeige verstecken, wenn ich auf Account 4 nach unten bohren, möchte ich DIV 6 und Anzeige verstecken DIV 4

ich in der Lage gewesen, es zu bekommen, um erfolgreich versteckenDIV 6 beim Bohren, und zeigen es, wenn Sie wieder bohren.

Wenn ich eine DIV in der Drill-Down-Funktion angeben wird es ausblenden, aber ich muss in der Lage sein, ihm zu sagen, welche DIV zu verstecken, basierend auf welchen Abschnitt der Torte wurde auf gebohrt.

Ich habe eine FIDDLE erstellt, die zeigt, wo ich heute bin.

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"; 
    } 
} 

Dank

Answer 1

haben Sie einen Blick auf aktualisiertem Geige Code:

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

:

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

Ich habe eine JS-Objekt für das Mapping Diagrammabschnitt auf seiner Platte wie hinzugefügt

und in drilldown: Event-Handler wir kann erhalten, die als bekam Abschnitt aufgerissen:

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"; 
} 

Hinweis: ich eine Klasse Panel an alle Panel Panel1-Panel5 hinzugefügt haben, die ich verwende, während alle Panel versteckt, während drillup Ereignis