在 Highcharts 组织图中向下钻取？

Question

您好，是否可以向下钻取 highcharts 组织结构图？

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

我已经加载 drilldown.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',
    }]
  });
})

在 Highcharts 组织图中向下钻取？

Drilldown in a Highcharts Organization chart?

organization

highcharts

drilldown