javascript - HighChart Pie Chart 点击图例项触发下钻

Question

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

我正在尝试异步加载项目的数据。

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

以及图例项目处理程序:

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

Answer 1

您可以通过调用目标的 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/

您必须检查目标是否具有向下钻取，否则调用将失败。如果不调用点击事件，则需要返回false，否则会触发默认的图例点击行为。

编辑: 这已在 Highcharts 4.2.3 中测试。它可能不适用于旧版本。