javascript - 关于使用外部 Dom 按钮在 Highcharts.js 中向下和向上钻取的问题

Question

您能看一下This Demo吗？让我知道如何使用 highcharts.js 中的 dom 按钮进行向下钻取 和向上钻取？

如你所见，我有 3 个 btns

<button type="button" id="msie-details" class="btn btn-default">MSIE Details</button>
<button type="button" id="firefox-details" class="btn btn-default">Firefox Details</button>
<button type="button" id="overview" class="btn btn-default disabled">Back to Overview </button>

我想做的是让用户通过单击此按钮深入了解概述？

$("#msie-details").on("click", function(){
     $(this).addClass('disabled');
     $("#overview").removeClass('disabled');
 });
$("#firefox-details").on("click", function(){
     $(this).addClass('disabled');
     $("#overview").removeClass('disabled');
 });
$("#overview").on("click", function(){
     $(this).addClass('disabled');
      $("#msie-details").removeClass('disabled');
      $("#firefox-details").removeClass('disabled');
 });

Answer 1

您需要将按钮绑定(bind)移到准备好的文档范围内(这很令人困惑，您有两种准备好的文档变体 - 一种在外部，一种在内部 - 您只需要一种)。您还可以公开一些变量以使事情变得更容易。那么让我们这样做:

        ...
        msie = data[0].drilldown,
        firefox = data[1].drilldown;

然后在按钮中:

    // Custom btns
    $("#msie-details").on("click", function(){
         $(this).addClass('disabled');
         setChart(msie.name, msie.categories, msie.data, msie.color);
         $("#overview").removeClass('disabled');
     });
    $("#firefox-details").on("click", function(){
         $(this).addClass('disabled');
         setChart(firefox.name, firefox.categories, firefox.data, firefox.color);
         $("#overview").removeClass('disabled');
     });
    $("#overview").on("click", function(){
         $(this).addClass('disabled');
          setChart(name, categories, data);
          $("#msie-details").removeClass('disabled');
          $("#firefox-details").removeClass('disabled');
     });  

工作中的 JSFiddle: http://jsfiddle.net/4skk9ycw/3/