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

Issue on Drilling Down and Up in Highcharts.js Using External Dom Buttons

本文关键字：js 问题 钻取 外部 dom 按钮 Highchart      更新时间：2023-09-26

你能看看这个演示，让我知道我如何通过在高图表中使用 dom 按钮来做drilldown和drillup.js吗？

如您所见，我有 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');
 });
您需要

将按钮绑定移动到文档就绪的范围（这令人困惑，您有两种文档就绪变体 - 一种在外部，一种在内部 - 您只需要一个）。您还可以公开一些变量以使事情变得更容易。所以让我们这样做：

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

相关文章：