我有一个下钻的Highcharts图表如下:
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
您可以在此处查看:JSFiddle link。
当用户选择一列并显示深入分析图表时,如何获取当前深入分析的ID和数据?
提前致谢。
答案 0 :(得分:2)
您可以使用highcharts events:drilldown
触发器来执行此操作。
在图表部分中添加
chart: {
type: 'column',
events: {
drilldown: function (e) {
console.log(e.seriesOptions.id);
console.log(e.seriesOptions.data);
}
}
},
完整的演示在这里