javascript - 在 Highcharts 中向下钻取时隐藏/显示 DIV

Question

我希望在深入查看 Highcharts 饼图时能够隐藏/显示相关的 DIV。

例如，我有 5 block 馅饼和 6 个 DIV。

我想在未向下钻取时显示 DIV 6(称为DIVGENERAL)，但在向下钻取某个部分时显示该部分特定的 DIV。

例如，如果我向下钻取 Account 1，我想隐藏 DIV 6 并显示 DIV 1，如果我向下钻取帐户 4，我想隐藏 DIV 6 并显示 DIV 4

我已经能够在向下钻取时成功地隐藏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

请查看更新的 fiddle 代码:

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

我添加了一个 JS 对象，用于将图表部分映射到其面板，例如:

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

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

注意:我已将类Panel添加到从Panel1到Panel5的所有面板中，我是在drillup事件

时隐藏所有面板时使用