如何显示一个Highcharts组织结构图,其中第一级节点位于其他第一级节点下方?

j0pj023g  于 2022-11-11  发布在  Highcharts
关注(0)|答案(1)|浏览(193)

我尝试使用Highcharts建立一个简单的组织结构图,以显示我们的协会董事会和职能。在主席下面,有4个1级项目,然后在2级有3个人员,我想在2级再添加5个人员,但所有这些都不适合给定的图表宽度,所以我想延长2级线,以便这5个2级人员显示在下面。就像是第三级... just like this
我相信这很容易,但就是想不出来......
谢谢你帮忙
菲利普

ygya80vv

ygya80vv1#

请尝试操作属性offsetHorizontal和offsetVertical。

series: [{
    type: 'organization',
    name: 'Digital Transformation',
    keys: ['from', 'to'],
    data: [
      ['CEO', 'Department1'],
      ['CEO', 'Department2'],
      ['CEO', 'Department3'],
      ['CEO', 'Department4'],
      ['CEO', 'Department5'],
      ['CEO', 'Department4x'],
    ],
    levels: [{
      level: 0,
      color: 'silver',
      dataLabels: {
      color: 'white'
      },
      height: 25
    }, {
      level: 1,
      color: 'silver',
      dataLabels: {
      color: 'black'
      },
      height: 25
    }, {
      level: 2,
      color: 'green',
      dataLabels: {
      color: 'black'
      },
      height: 25
    }],
    nodes: [{
      id: '',
      title: 'CEO',
      name: null,
      color: "#000000",
      info: "CEO"
    }, {
      className: 'title',
      id: 'Department1',
      title: 'Department1',
      name: '',
      layout: 'hanging',
    }, {
      id: 'Department2',
      title: 'Department2',
      name: '',
      layout: 'hanging',
    }, {
      id: 'Department3',
      title: 'Department3',
      name: '',
      layout: 'hanging',
    }, {
      id: 'Department4',
      title: 'Department4',
      name: '',
      layout: 'hanging',
    }, {
      id: 'Department5',
      title: 'Department5',
      name: '',
      layout: 'hanging',
      level: 1,
      offsetHorizontal: 15,
      offsetVertical: 0,
    }, {
      id: 'Department4x',
      title: 'Department4x',
      name: '',
      layout: 'hanging',
      level: 2
    }],
  }],

现场演示:
https://jsfiddle.net/BlackLabel/0tk6n94L/
API参考:
https://api.highcharts.com/highcharts/series.organization.nodes.offsetHorizontal
https://api.highcharts.com/highcharts/series.organization.nodes.offsetVertical

相关问题