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

我正在使用highcharts在角度中绘制两个图表（但我不认为这很重要或者存在此问题） - 饼图和条形图。我定义了两个图表，当我点击饼图时，我想触发条形图下钻。另外，应该为相同的数据执行向下钻取。这些图表设置：手动激活在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。我尝试了所有可能的解决方案，但没有任何运气。问题是我需要为条形图保留数据，所以我无法重新绘制它，如果可能的话，我需要激活向下钻取。感谢大家的帮助！

来源

2017-08-28 MrCkobe

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

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

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

来源

2017-09-04 14:39:12

嗨@d_paul，这正是我找了！在接下来的几天里，让我试试它，因为我转向了另一项紧急任务，并且尽快测试完成，如果一切正常，我会接受您的答案。对不起，延迟，但这是工作:) – MrCkobe

没问题，很高兴它有帮助（或至少看起来有用:)）。 –

嗨@d_paul我设法几乎使它工作。我得到'不能在drillUp上读取'undefined'属性'levelNumber'。你知道那可能是什么吗？感谢所有帮助！ :) – MrCkobe

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

回答

相关问题