在高图表的饼图向下钻取中以表格格式显示一些数据

Question

我的角度项目中有一个高图表的饼图。在该饼图的向下钻取中，我想以表格格式显示一些数据来代替饼图。

因此，一旦用户单击饼图切片，基本上饼图应该替换为表格数据，用户也应该能够移回饼图，通常就像我们在高图表中进行向下钻取一样。

有人可以帮我进入下一步吗？提前谢谢。

Answer 1

您可以使用向下钻取功能进出饼图扇区。如果明细系列的数据为空，则在明细之后，图表有空间放置 html 表。

您可以挂钩到向下钻取和钻取事件以显示/隐藏/居中表，甚至控制动画。

const tables = {
'chrome': document.getElementById('chrome'),
'firefox': document.getElementById('firefox')
}
Highcharts.chart('container', {
chart: {
type: 'pie',
events: {
drilldown(e) {
const table = tables[e.point.drilldown]
table.style.display = 'block'
const tableRect = table.getBoundingClientRect()
const containerRect = this.container.getBoundingClientRect()
table.style.left = (containerRect.left + (containerRect.width - tableRect.width) / 2) + 'px'
table.style.top = (containerRect.top + (containerRect.height - tableRect.height) / 2) + 'px'
},
drillup(e) {
Object.values(tables).forEach(table => table.style.display = 'none')
}
}
},
"series": [{
"name": "Browsers",
"colorByPoint": true,
"data": [{
"name": "Chrome",
"y": 62.74,
"drilldown": "chrome"
},
{
"name": "Firefox",
"y": 10.57,
"drilldown": "firefox"
}
]
}],
"drilldown": {
"series": [{
"name": "Chrome",
"id": "chrome",
"data": []
},
{
"name": "Firefox",
"id": "firefox",
"data": []
}
]
}
});

现场示例：https://jsfiddle.net/q2fm0v49/