Я хочу использовать функцию «макеты: висит» на всех уровнях, но когда я это делаю, я получаю перекрывающиеся узлы и неправильные линии

Question

Я пытаюсь создать организационную диаграмму, используя функцию «макет: передача», и я могу использовать эту функцию на одном уровне. Тем не менее, в тот момент, когда я хочу сделать несколько уровней, вывод не правильный.

У меня есть скрипка на 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/

Справочник по API:

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

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