当我们有多个数据系列时,我们正在创建一个关于进行 highchart 钻取的问题。
当有人点击任何一列时,highchart 只删除一个主要系列。然后,当单击“返回”按钮时,图表数据变得完全混乱。
下面,代码:
$('#container').highcharts({
chart: {
type: 'column',
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
name: 'Animals',
data: [
['Cows', 2],
['Sheep', 3]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
]
},
'Cars': {
name: 'Cars',
data: [
['Toyota', 1],
['Volkswagen', 2],
['Opel', 5]
]
}
},
series = drilldowns[e.point.name];
chart.showLoading('Simulating Ajax ...');
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}
}
}
},
title: {
text: 'Async drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
data: [{
name : 'Animals',
y: 5,
drilldown: true
}, {
name : 'Fruits',
y: 2,
drilldown: true
}, {
name : 'Cars',
y: 4,
drilldown: true
}]
},{
name: 'Dois',
data: [{
name : 'Animals',
y: 6,
drilldown: true
}, {
name : 'Fruits',
y: 9,
drilldown: true
}, {
name : 'Cars',
y: 2,
drilldown: true
}]
}],
drilldown: {
series: []
}
})
});