我在highcharts中创建了一个异步钻取(Treemap1到Treemap2到折线图)。每次钻取均从服务器获取数据。向下钻取功能按预期工作。从Treemap2到Treemap1的钻取也可以进行。
但是当我尝试从折线图扩展到Treemap2时,出现错误:
Uncaught TypeError: Cannot read property 'x' of null
在此汇总期间,我检查了序列数据,并且它为空。
以下是追溯事件的代码:
drilldown(e){
let drilldown_point = e.point;
let chart = this;
let current_level = 0;
if(chart.drilldownLevels){
current_level = chart.drilldownLevels.length;
}
//api call to get drill down data based on current level of drilldown
if(current_level == 0){
level_0_point_name = e.point.name;
chart.showLoading('Loading ...');
Api()
.get('/dataFromServer')
.then(response => {
//get sub series data and set drilldown = true for 2nd level drilldown
let sub_series_data = response.data;
sub_series_data.map(value => value.drilldown = true);
//create series for sub treemap
let sub_series = {
type: 'treemap',
data: sub_series_data,
};
//Update title and subtitle of subchart
chart.update({
title: {
text: "1st Level Drilldown"
},
subtitle: {
text: ""
}
});
chart.addSeriesAsDrilldown(drilldown_point, sub_series);
chart.applyDrilldown();
chart.hideLoading();
});
}
else if(current_level == 1){
// console.log(this)
level_1_point_name = e.point.name;
chart.showLoading('Loading ...');
Api()
.get('/dataFromServer')
.then(response => {
//get sub series data and set drilldown = true for 2nd level drilldown
let sub_series_data = response.data;
let x_axis_categories = sub_series_data.map(value => value.name)
//create series for sub treemap
let sub_series = {
type: 'line',
name: 'LineChart',
colorByPoint: true,
data: sub_series_data,
};
//Update title and subtitle of subchart
chart.update({
title: {
text: "2nd Level Drilldown"
},
subtitle: {
text: ""
},
yAxis: {
title: {
text: 'Number'
}
},
xAxis: {
title: {
text: 'X-axis title'
},
categories: x_axis_categories
}
});
chart.addSeriesAsDrilldown(drilldown_point, sub_series);
chart.applyDrilldown();
chart.hideLoading();
});
}
}
以下是此问题的小提琴链接-https://jsfiddle.net/gaurav_neema/gkdoa9jr/7/
我已将代码简化为2级。向下钻取到任何节点,然后再次按返回按钮以向上钻取。
此错误的原因是什么?
答案 0 :(得分:5)
您可以从this上的here小提琴中得到一个想法。您必须在drillup()事件下更新聊天。以下是小提琴中的示例代码。
Highcharts.chart('container', {
chart: {
events: {
drilldown: function(e) {
console.log(this)
var chart = this,
drilldowns = chart.userOptions.drilldown.series,
series = [];
Highcharts.each(drilldowns, function(p, i) {
if (p.id === e.point.name) {
chart.addSingleSeriesAsDrilldown(e.point, p);
}
});
chart.applyDrilldown();
chart.update({
chart: {
type: 'column'
}
})
},
drillup: function() {
let chart = this;
console.log(this)
chart.update({
chart: {
type: 'treemap',
}
})
}
}
},
legend: {
enabled: true
},
series: [{
animation: false,
type: "treemap",
data: [{
id: 'B',
name: 'Bananas',
color: "#ECE100"
}, {
name: 'Anne',
parent: 'B',
value: 3,
drilldown: true
}, {
name: 'Rick',
parent: 'B',
value: 10,
drilldown: 'BRickSales'
}, {
name: 'Peter',
parent: 'B',
value: 1
}]
}],
drilldown: {
series: [{
name: 'Ricks quotes',
id: 'Rick',
type: 'column',
data: [
['v11', 30],
['v8', 17],
['v9', 8],
['v10', 5],
['v7', 3]
]
}, {
name: 'Rick Calls',
id: 'Rick',
type: 'line',
data: [
['v11', 50],
['v8', 40],
['v9', 60],
['v10', 65],
['v7', 73]
]
}, {
name: 'Anne quotes',
id: 'Anne',
type: 'column',
data: [
['v11', 2],
['v8', 7],
['v9', 3],
['v10', 5],
['v7', 3]
]
}, {
name: 'Anne Calls',
id: 'Anne',
type: 'line',
data: [
['v11', 50],
['v8', 40],
['v9', 60],
['v10', 65],
['v7', 73]
]
}]
},
});