使用外部Dom按钮在Highcharts.js中钻取和向上的问题 [英] Issue on Drilling Down and Up in Highcharts.js Using External Dom Buttons

问题描述

你可以看看这个演示，让我知道我该怎么做 drilldown 和 drillup 通过在highcharts.js中使用dom按钮？

正如你所看到的，我有3个btns作为

 < button type =buttonid =msie-details class =btn btn-default> MSIE详情< / button> 
< button type =buttonid =firefox-detailsclass =btn btn-default> Firefox详情< / button> 
< button type =buttonid =overviewclass =btn btn-default disabled>返回概览< / button> 
  

我想要做的是ebanling用户通过点击按钮？

  $（＃msie-details）on（click，function（）{
 $（this）.addClass（'disabled'）; 
 $（＃overview）。removeClass（'disabled'）; 
}）; （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; 
  

然后在按钮中：

<$ p $ （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/

Can you please take a look at This Demo and let me know how I can do the drilldown and drillup by using dom buttons in highcharts.js?

As you can see I have 3 btns as

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

and what I would like to do is ebanling user to drill in and up to overview by clicking on this buttons?

$("#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');
 });

解决方案

You need to move the button binding up into the scope of the document ready (which is confusing, you have two variations of document ready -- one on the outer, one on the inner -- you only need one). You also can expose some variables to make things easier. So let's do this:

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

Then in the buttons:

    // 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');
     });  

Working JSFiddle: http://jsfiddle.net/4skk9ycw/3/

这篇关于使用外部Dom按钮在Highcharts.js中钻取和向上的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！