HighChart饼图点击图例项目以触发向下钻取 [英] HighChart Pie Chart click on legend item to trigger drilldown

问题描述

我试图从图例项目点击事件处理程序触发钻取事件时遇到问题。在示例中，单击饼图片时会触发向下钻取，但单击图例项目将显示/隐藏切片。

我试图异步加载数据。

向下钻取处理程序：

  drilldown：function（e）{
 console.log（.....，钻取项目，e，this）; 
 var chart = this 
，serieData = []; 
 if（！e.seriesOptions）{
 chart.showLoading（'Loading ...'）; 
 setTimeout（function（）{
 chart.addSeriesAsDrilldown（e.point，{
 name：'Some sub item'，
 colorByPoint：true，
 data：[ {
 name：'bla'，
y：56.33 
}，{
 name：'da da'，
y：24.03，
 drilldown：true 
}，{
 name：'ba ba ba'，
y：10.38，
 drilldown：true 
}] 
}）; 
图表.hideLoading（）; 
} 
，10）; 
 
 
 
  

图例项目处理程序：

 点数：{
 events：{
 legendItemClick：function（e）{
 console .log（.....，点击图例项目，e，this）; 
 //在深入图表中=这个，但我怎么能在这里？ 
 //在钻取中有e seriesOptions，而不是这个e 
 //在深入e中有点，而不是这个e 
返回false; 
} 
} 
} 
} 
  

解决方案

您可以通过调用目标的Highcharts点击事件来触发legendItemClick的明细。

  pie：{ 
 showInLegend：true，
 point：{
 events：{
 legendItemClick：function（e）{
 if（e.target.drilldown！= undefined）{
 e.target.hcEvents.click [0]（）; 
} else {
 return false; 
} 
} 
} 
} 
} 
  

示例：
http://jsfiddle.net/ueetz0b6/8/

您必须检查目标是否已钻取，否则通话将失败。如果您没有调用click事件，那么您需要返回false，否则会触发默认的图例点击行为。

编辑：这在Highcharts 4.2.3中进行了测试。它可能不适用于旧版本。

I am having trouble trying to trigger the drilldown event from legend item click event handler. In the example the drilldown is triggered when clicking on a pie slice but clicking on a legend item will show/hide the slice.

I'm trying to asynchronously load the data for an item.

An example of the drilldown handler:

  drilldown: function(e) {
      console.log(".....", "on drilldown item", e, this);
      var chart = this
      , serieData = [];
      if (!e.seriesOptions) {
        chart.showLoading('Loading ...');
        setTimeout(function() {
          chart.addSeriesAsDrilldown(e.point, {
            name: 'Some sub item',
            colorByPoint: true,
            data: [{
              name: 'bla',
              y: 56.33
            }, {
              name: 'da da',
              y: 24.03,
              drilldown: true
            }, {
              name: 'ba ba ba',
              y: 10.38,
              drilldown: true
            }]
          });
          chart.hideLoading();
        }
        , 10);
      }
    }
  }

And the legend item handler:

  point: {
      events: {
        legendItemClick: function(e) {
          console.log(".....", "clicked legend item", e, this);
          //in drilldown chart = this but how can I get it here?
          //in drilldown e has seriesOptions, not this e
          //in drilldown e has point, not this e
          return false;
        }
      }
    }
  }

解决方案

You can trigger the drilldown from legendItemClick by calling target's Highcharts click event.

pie: {
    showInLegend: true,
    point: {
      events: {
        legendItemClick: function(e) {
          if (e.target.drilldown != undefined) {
            e.target.hcEvents.click[0]();         
          } else {
            return false;
          }    
        }
      }
    }
  }

Example: http://jsfiddle.net/ueetz0b6/8/

You have to check to see if the target has drilldown, or the call will fail. If you don't call the click event, you then need to return false, or it will trigger the default legend click behavior.

EDIT: This was tested in Highcharts 4.2.3. It may not work in older versions.

这篇关于HighChart饼图点击图例项目以触发向下钻取的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！