Question

您能否请一看This Demo并告诉我如何使用highcharts.js中的dom按钮来drilldown和drillup？

如你所见，我有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

您需要将按钮绑定到准备好的文档范围内（这是令人困惑的，您有两种文档准备 - 一个在外部，一个在内部 - 您只需要一个）。您还可以公开一些变量以简化操作。让我们这样做：

        ...
        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/

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

1 个答案: