javascript - 通过单击另一个图表来手动激活 Highcharts 图表中的向下钻取

Question

我正在使用 highcharts 以 Angular 绘制两个图表(但我认为这并不重要或这个问题) - 饼图和条形图。我定义了两个图表，当我单击饼图时，我想触发条形图中的向下钻取。此外，应对相同数据执行向下钻取。 这些是图表设置:

import Highcharts from 'highcharts/highstock';

export const MEDIA_CHART = {
chart: {
  height: 350,
  type: 'pie',
  width: 300
},
drilldown: {
 allowPointDrilldown: true
},
legend: {
 borderWidth: 0,
 enabled: true,
 symbolRadius: 0,
 title: {
  text: ''
},
useHTML: true,
/*eslint-disable*/
labelFormatter: function () {
  return '<div style="max-width:150px;"><span style="width:100%;display:block;text-align:center;">' + this.name + '</span><span>' + Highcharts.numberFormat(this.y, 2, ',', '.') + '€</span></div>';
}
/*eslint-enable*/
},
plotOptions: {
 pie: {
  center: ['48%', '42%'],
  showInLegend: true
 },
series: {
  allowPointSelect: true,
  cursor: 'pointer',
  /*eslint-disable*/
  events: {
    click: function (event) {
      console.log(TACTIC_CHART.chart.drilldownLevels.length);
    }
  },
  /*eslint-enable*/
  dataLabels: {
    enabled: true,
    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
  }
}
},
 series: [{
 size: '95%',
 innerSize: '60%'

}],
tooltip: {
borderWidth: 0,
backgroundColor: '#37474F',
headerFormat: '',
pointFormat: '{point.name}: {point.y:,.2f}€',
style: {
  color: '#fff',
  padding: 0,
  fontWeight: 700
},
useHTML: true
}
};

export const TACTIC_CHART = {
chart: {
 type: 'bar',
 height: '100%'
},
colors: ['#969696', '#F1292E', '#A0CB0E'],
drilldown: {
  allowPointDrilldown: true
},
xAxis: {
title: {
  text: null
},
 type: 'category'
},
yAxis: {
 min: 0,
 title: {
  text: 'Budget €',
  align: 'high'
},
labels: {
  overflow: 'justify'
}
},
tooltip: {
  enabled: true,
  borderWidth: 0,
  backgroundColor: '#37474F',
  headerFormat: '',
  pointFormat: '{series.name}: {point.y:,.2f}€',
  style: {
  color: '#fff',
  padding: 0,
  fontWeight: 700
},
  useHTML: true,
  valueSuffix: ' €'
},
title: {
align: 'left'
},
plotOptions: {
bar: {
  dataLabels: {
    enabled: true,
    /*eslint-disable*/
    formatter:  function () {
      return Highcharts.numberFormat(this.y, 2, ',', '.') + '€';
    }
    /*eslint-enable*/
  }
 }
},
legend: {
  enabled: true,
  layout: 'horizontal',
  align: 'center',
  verticalAlign: 'top',
  floating: true,
  borderWidth: 1,
  backgroundColor: '#FFFFFF',
  shadow: true
}
};

在这一部分中，我点击了饼图:

events: {
    click: function (event) {
      console.log(TACTIC_CHART.chart.drilldownLevels.length);
    }
  },

我尝试获取此信息，但收到错误无法获取未定义的长度。我尝试了找到的所有可能的解决方案，但没有任何运气。问题是我需要保留条形图的数据，所以我无法重新绘制它，如果可能的话，我需要激活向下钻取。谢谢大家的帮助!

Answer 1

您可以在 drilldown 事件和 Chart.drillUp() 中调用另一个图表的特定点的内部函数 Point.doDrilldown() 钻取事件。另外，请记住创建一些标志变量以防止无限循环。看看我为你准备的下面的例子。如有任何疑问，请随时提问。

API引用:
http://api.highcharts.com/highcharts/chart.events.drilldown
http://api.highcharts.com/highcharts/chart.events.drillup

示例:
http://jsfiddle.net/048kne3c/