我想要在所有级别上使用“布局:挂起”功能，但当我这样做时，我得到重叠的节点和不正确的线

Question

我正在尝试使用"layout: handing“特性来制作组织结构图，并且我可以在单个级别使用该特性。但是，当我想做多个关卡的时候，输出是不正确的。

我在https://jsfiddle.net/markjjordan/Lhewscr0/51/上遇到了一个问题，它表现出奇怪的行为；有几个节点重叠在另一个节点上，并且线条和缩进不正确。

Highcharts.chart('container', {

chart: {
    height: 1200,
    width: 800,
    inverted: true
},

title: {
    text: 'Highcharts Org Chart'
},

series: [{
    type: 'organization',
    name: 'Highsoft',
    keys: ['from', 'to'],
    data: [
        ['001', '001.001'],
        ['001.001', '001.001.005'],
        ['001.001', '001.001.001'],
        ['001.001', '001.001.002'],
        ['001.001', '001.001.003'],
        ['001.001', '001.001.004'],
        ['001.001.001', '001.001.001.001'],
        ['001.001.001', '001.001.001.002'],
        ['001.001.001', '001.001.001.003'],
        ['001.001.001', '001.001.001.004'],
        //['CTO', 'Product'],
        //['CTO', 'Web'],
        //['CSO', 'Sales'],
       // ['CMO', 'Market']
    ],
  nodes: [{
        id: '001',
        layout: 'hanging',
        //column: 1,
        width: 300
    }, {
        id: '001.001',
        layout: 'hanging',
        //column: 2,
        width: 300
    }, {
        id: '001.001.005',
        layout: 'hanging',
        //column: 3,
        width: 300
    }, {
        id: '001.001.001',
        layout: 'hanging',
        //column: 4,
        width: 300
    }, {
        id: '001.001.002',
        layout: 'hanging',
        //column: 5,
        width: 300
    }, {
        id: '001.001.003',
        layout: 'hanging',
        //column: 6,
        width: 300
    }, {
        id: '001.001.004',
        layout: 'hanging',
        //column: 7,
        width: 300
    },
    {
        id: '001.001.001.001',
        layout: 'hanging',
        //column: 8,
        width: 300
    }, {
        id: '001.001.001.002',
        layout: 'hanging',
        //column: 9,
        width: 300
    }, {
        id: '001.001.001.003',
        layout: 'hanging',
        //column: 10,
        width: 300
    }, {
        id: '001.001.001.004',
        layout: 'hanging',
        //column: 11,
        width: 300
    }
    //}
    //, {
    //    id: 'Product',
    //    name: 'Product developers'
    //}, {
    //    id: 'Web',
    //    name: 'General tech',
    //    description: 'Web developers, sys admin'
    //}, {
    //    id: 'Sales',
    //    name: 'Sales team'
    //}, {
    //    id: 'Market',
    //    name: 'Marketing team'
    ]
    ,
    colorByPoint: false,
    color: '#007ad0',
    dataLabels: {
        color: 'white'
    },
    borderColor: 'white',
    nodeWidth: 65
}],
tooltip: {
    outside: true
},
exporting: {
    allowHTML: true,
    sourceWidth: 800,
    sourceHeight: 600
}

})；

我希望输出看起来类似于以下内容，当然要有适当的代码行：

https://1drv.ms/u/s!AlXtfnUUrEyMzJ8pVtI0oOhqhXFUKw?e=10b0l3

Answer 1

您可以通过手动设置每个节点的列索引和偏移量来实现预期的效果。查看下面发布的演示和代码：

代码：

nodes: [{
    id: '001',
    width: 200,
    offset: '-70%'
  }, {
    id: '001.001',
    offset: '-50%',
    width: 200,
  }, {
    id: '001.001.005',
    column: 2,
    width: 200,
    offset: '-30%',
  }, {
    id: '001.001.001',
    column: 3,
    offset: '-30%',
    width: 200
  }, {
    id: '001.001.002',
    column: 8,
    offset: '-30%',
    width: 200
  }, {
    id: '001.001.003',
    column: 9,
    offset: '-30%',
    width: 200
  }, {
    id: '001.001.004',
    column: 10,
    offset: '-30%',
    width: 200
  },
  {
    id: '001.001.001.001',
    column: 4,
    width: 200,
    offset: '-5%',
  }, {
    id: '001.001.001.002',
    column: 5,
    width: 200,
    offset: '-5%',
  }, {
    id: '001.001.001.003',
    column: 6,
    width: 200,
    offset: '-5%',
  }, {
    id: '001.001.001.004',
    column: 7,
    width: 200,
    offset: '-5%',
  }
]

演示：

• https://jsfiddle.net/BlackLabel/jxp7nLkb/2/
• https://jsfiddle.net/BlackLabel/s0oykx29/

接口参考：

• https://api.highcharts.com/highcharts/series.organization.nodes.column
• https://api.highcharts.com/highcharts/series.organization.nodes.offset