如何用Highcharts/googleVis实现带独立节点的企业HTML组织结构图

问题描述 #

我希望用HTML Widget替代手绘PDF展示公司组织结构图，原本计划用highchart或googleVis包实现，但现有结构图包含若干独立节点：顶层左右侧的“Other Unit”，以及左侧更多的“other independent units”。这些单元可与其他节点垂直对齐向下排列，或是作为无顶层关联的独立部门，请问有没有合适的实现方式？

实现方案 #

Highcharts组织结构图可以通过自定义节点属性轻松实现独立节点布局，无需修改核心关联逻辑，关键配置如下：

• 添加无关联独立节点：直接在nodes列表中新增节点，不在data的from/to关联规则中提及，节点会自动成为独立分支
• 控制垂直对齐与列位置：通过column指定节点所在列，level控制层级，让独立节点和主结构对应层级垂直对齐
• 调整侧边布局：给左侧/右侧独立节点分配单独列号（比如主结构用列2-5，左侧用列0-1，右侧用列6），配合offset微调垂直位置

修改后的示例代码 #

library(highcharter)
library(dplyr)

highchart() %>%
  hc_chart(type = 'organization', inverted = TRUE) %>%
  hc_title(text = '公司组织结构图') %>%
  hc_add_series(
    name = '主业务部门',
    data = list(
      list(from = '股东会', to = '董事会'),
      list(from = '董事会', to = 'CEO'),
      list(from = 'CEO', to = 'CTO'),
      list(from = 'CEO', to = 'CPO'),
      list(from = 'CEO', to = 'CSO'),
      list(from = 'CEO', to = 'CMO'),
      list(from = 'CEO', to = 'HR'),
      list(from = 'CTO', to = '产品开发部'),
      list(from = 'CTO', to = 'Web技术部'),
      list(from = 'CSO', to = '销售部'),
      list(from = 'CMO', to = '市场部')
    ),
    levels = list(
      list(level = 0, color = 'silver', dataLabels = list(color = 'black'), height = 55),
      list(level = 1, color = 'silver', dataLabels = list(color = 'black'), height = 55),
      list(level = 2, color = '#980104'),
      list(level = 3, color = '#007ad0'),
      list(level = 4, color = '#359154')
    ),
    nodes = list(
      # 主结构节点
      list(id = '股东会'),
      list(id = '董事会'),
      list(id = 'CEO', title = 'CEO', name = 'Grethe Hjetland', image = 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132317/Grethe.jpg'),
      list(id = 'HR', title = 'HR/CFO', name = 'Anne Jorunn Fjarestad', color = '#007ad0', image = 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132314/AnneJorunn.jpg', column = 3, offset = '75%'),
      list(id = 'CTO', title = 'CTO', name = 'Christer Vasseng', color = '#007ad0', image = 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12140620/Christer.jpg', column = 4, layout = 'hanging'),
      list(id = 'CPO', title = 'CPO', name = 'Torstein Honsi', image = 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12131849/Torstein1.jpg', column = 4),
      list(id = 'CSO', title = 'CSO', name = 'Anita Nesse', image = 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132313/Anita.jpg', column = 4, layout = 'hanging'),
      list(id = 'CMO', title = 'CMO', name = 'Vidar Brekke', image = 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/13105551/Vidar.jpg', column = 4, layout = 'hanging'),
      list(id = '产品开发部', name = '产品开发团队'),
      list(id = 'Web技术部', name = 'Web开发与运维'),
      list(id = '销售部', name = '销售团队'),
      list(id = '市场部', name = '市场团队'),
      # 左侧独立节点（顶层对齐）
      list(id = '左侧独立单元1', name = 'Other Unit', level = 0, column = 0),
      list(id = '左侧独立单元2', name = 'Other Independent Unit', level = 1, column = 0),
      list(id = '左侧独立单元3', name = 'Other Independent Unit', level = 2, column = 0),
      # 右侧顶层独立节点
      list(id = '右侧独立单元', name = 'Other Unit', level = 0, column = 6)
    ),
    colorByPoint = TRUE,
    color = '#007ad0',
    dataLabels = list(color = 'white'),
    borderColor = 'white',
    nodeWidth = 65
  ) %>%
  hc_tooltip(outside = TRUE)

内容的提问来源于stack exchange，提问作者Max M