在Highcharts组织结构图中向下钻取?

Question

嗨，是否可以向下钻取高图表组织结构图？

如果是这样，谁能告诉我这个配置有什么问题？

https://jsfiddle.net/ogLy28tb/1/

我已经加载了向下钻取.js并将条形图向下钻取示例与组织结构图数据和节点设置混合在一起，但它没有反应。

谢谢

Highcharts.chart('container', {
chart: {
height:600,
width:1300,
inverted: true
},
title: {
text: 'Highcharts Org Chart'
},
accessibility: {
point: {
descriptionFormatter: function (point) {
var nodeName = point.toNode.name,
nodeId = point.toNode.id,
nodeDesc = nodeName === nodeId ? nodeName : nodeName + ', ' + nodeId,
parentDesc = point.fromNode.id;
return point.index + '. ' + nodeDesc + ', reports to ' + parentDesc + '.';
}
}
},
series: [{
type: 'organization',
name: 'Highsoft',
// keys: ['from', 'to','drilldown'],
data: [
{   
from:'CO',
to:'DIV01',
drilldown:'DIV01'
},
{
from:'CO',
to:'DIV02',
drilldown:'DIV02'
},
{
from:'CO',
to:'DIV03',
drilldown:'DIV03'
},
{
from:'CO',
to:'DIV04',
drilldown:'DIV04'
},
{
from:'CO',
to:'DIV05',
drilldown:'DIV05'
},
{
from:'CO',
to:'DIV06',
drilldown:'DIV06'
}
],
levels: [{
level: 0,
color: 'silver',
dataLabels: {
color: 'black'
},
height: 25
}, {
level: 1,
color: 'silver',
dataLabels: {
color: 'black'
},
height: 25
}, {
level: 2,
color: '#980104'
}, {
level: 4,
color: '#359154'
}],
nodes: [
{id:'DIV01', title:'Div Hd 1', name:'Div. 1',layout:'hanging'},
{id:'DIV02', title:'Div Hd 2', name:'Div. 2',layout:'hanging'},
{id:'DIV03', title:'Div Hd 3', name:'Div. 3',layout:'hanging'},
{id:'DIV04', title:'Div Hd 4', name:'Div. 4',layout:'hanging'},
{id:'DIV05', title:'Div Hd 5', name:'Div. 5',layout:'hanging'},
{id:'DIV06', title:'Div Hd 6', name:'Div. 6',layout:'hanging'}
],
colorByPoint: false,
color: '#007ad0',
dataLabels: {
color: 'white'
},
borderColor: 'white',
nodeWidth: 120
}],
drilldown: {
series: [
{
id: "DIV01",
name: "DIV01",
data: [
['DIV01','DEP01']
],
nodes: [
{id:'DEP01', title:'Dept Hd 1', name:'Dept. 1',layout:'hanging'}
]
},
{ 
name: "DIV02",
id: "DIV02",
data: [
['DIV02','DEP02']
],
nodes: [
{id:'DEP02', title:'Dept Hd 2', name:'Dept. 2',layout:'hanging'}
]
},
{ 
name: "DIV03",
id: "DIV03",
data: [
['DIV03','DEP03']
],
nodes: [
{id:'DEP03', title:'Dept Hd 3', name:'Dept. 3',layout:'hanging'}
]
},
{ 
name: "DIV04",
id: "DIV04",
data: [
['DIV04','DEP04']
],
nodes: [
{id:'DEP04', title:'Dept Hd 4', name:'Dept. 4',layout:'hanging'}
]
},
{ 
name: "DIV05",
id: "DIV05",
data: [
['DIV05','DEP05']
],
nodes: [
{id:'DEP05', title:'Dept Hd 5', name:'Dept. 5',layout:'hanging'}
]
},
{ 
name: "DIV06",
id: "DIV06",
data: [
['DIV06','DEP06']
],
nodes: [
{id:'DEP06', title:'Dept Hd 6', name:'Dept. 6',layout:'hanging'}
]
}
]
},
tooltip: {
outside: true
},
exporting: {
allowHTML: true,
sourceWidth: 800,
sourceHeight: 600
}

}(;

Answer 1

根据Highcharts博客条目，目前无法对组织结构图进行深入分析。我在 GIT 上提出了一个功能请求：https://github.com/highcharts/highcharts/issues/13711

另一种方法是使用按钮触发事件加载数据子集，如下所示： https://jsfiddle.net/BlackLabel/orj8ayne/

let chart = Highcharts.chart('container', {
series: [{
type: 'organization',
keys: ['from', 'to'],
data: [{
from: 'A',
to: 'B',
}, {
from: 'B',
to: 'C',
}]
}],
});
document.getElementById("drill").addEventListener("click", function() {
chart.series[0].update({
data: [{
from: 'D',
to: 'E',
}]
});
})