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%',
  }
]

演示：

API参考：

我想在所有级别上使用“版式：悬挂式”功能，但是当我这样做时，会得到重叠的节点和错误的行

1 个答案: