通过单击另一个图表，手动激活在Highcharts图表中钻取 [英] Manually activate Drill down in Highcharts chart by clicking on another chart

问题描述

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

 从'highcharts / highstock'导入Highcharts; 
 $ b导出常量MEDIA_CHART = {
图表：{
 height：350，
 type：'pie'，
 width：300 
} ，
钻取：{
 allowPointDrilldown：true 
}，
图例：{
 borderWidth：0，
启用：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 。+'< / span>< / div>'; 
} 
 / * eslint-enable * / 
}，
 plotOptions：{
 pie：{
 center：['48％'，'42 ％']，
 showInLegend：true 
}，
 series：{
 allowPointSelect：true，
 cursor：'pointer'，
 / * eslint-禁用* / 
事件：{
 click：function（event）{
 console.log（TACTIC_CHART.chart.drilldownLevels.length）; 
} 
}，
 / * eslint-enable * / 
 dataLabels：{
 enabled：true，
 format：'< b> {point .name}< / b> ;: {point.percentage：.1f}％'
} 
} 
}，
系列：[{
 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 = {
图表：{
类型：'bar'，
 height：'100％'
}，
颜色：['＃969696'，'＃F1292E'，'＃A0CB0E']，
钻取：{
 allowPointDrilldown：true 
}，
 xAxis：{
 title：{
 text：null 
}，
 type：'category'
}，
 yAxis：{
 min：0，
标题：{
 text：'Budget€'，
 align：'high'
}，
标签：{
溢出：'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：'左'
}，
 plotOptions：{
 bar：{
 dataLabels：{
启用：true，
 / * eslint-disable * / 
格式化程序：函数（）{
返回Highcharts.numberFormat（this.y，2，'，'，'。'）+'€'; 
} 
 / * eslint-enable * / 
} 
} 
}，
图例：{
启用：true，
 layout：'horizo​​ntal'，
 align：'center'，
 verticalAlign：'top'，
 floating：true，
 borderWidth：1，
 backgroundColor：' #FFFFFF'，
 shadow：true 
} 
}; 
  

在这部分中，我点击饼图：

  events：{
 click：function（event）{
 console.log（TACTIC_CHART.chart.drilldownLevels.length）; 
} 
}，
  

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

解决方案

您可以调用内部函数 Point.doDrilldown（）钻取事件和 Chart.drillUp（）在 > drillup 事件。另外，请记住创建一些标志变量来防止无限循环。看看我为你准备的下面的例子。如有任何问题，请随时询问。

API参考：

http://api.highcharts.com/highcharts/chart.events.drilldown

http://api.highcharts.com/highcharts/chart.events.drillup

示例：

http://jsfiddle.net/ 048kne3c /

I'm using highcharts to draw two charts in angular(but I don;t think that is important or this problem) - pie chart and bar chart. I have two charts defined and I want to trigger drill down in bar chart when I click on pie chart. Also, drill down should be preformed for same data. These are chart settings:

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

In this part I catch click on pie chart:

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

I tried to get this but I get error can't get length of undefined. I tried every possible solution that I found, but without any luck. Problem is that I need to preserve data for bar chart, so I can't redraw it, I need to activate drill down if it's possible. Thanks everyone for help!

解决方案

You can call internal function Point.doDrilldown() on specific point of another chart in drilldown event and Chart.drillUp() on drillup event. Also, remember to create some flag variable to prevent infinite loop. Take a look at the below example I prepared for you. In case of any question, feel free to ask.

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

Example:
http://jsfiddle.net/048kne3c/

这篇关于通过单击另一个图表，手动激活在Highcharts图表中钻取的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！