Question

我使用highcharts以角度绘制两个图表（但我不认为这很重要或者这个问题） - 饼图和条形图。我定义了两个图表，当我点击饼图时，我想在条形图中触发向下钻取。此外，应针对相同数据执行向下钻取。这些是图表设置：

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

我试图解决此问题，但我收到错误can't get length of undefined。我尝试了所有可能的解决方案，但没有运气。问题是我需要保留条形图的数据，因此我无法重绘它，如果可能，我需要激活向下钻取。谢谢大家的帮助！

Answer 1

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

API参考：
http://api.highcharts.com/highcharts/chart.events.drilldown
http://api.highcharts.com/highcharts/chart.events.drillup

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

通过单击另一个图表手动激活在Highcharts图表中向下钻取

1 个答案: