问题

我想在HTML小部件中可视化我的公司的组织结构图，以替代当前使用的手绘PDF。

原则上，使用highchart或googleVis包似乎是可行的。不幸的是，当前的组织图中有一些独立的节点，它们位于顶层旁边，可以在我的示例图片中看到“右侧/左侧的其他单位”。

此外，还有更多的独立节点位于左侧，可以在第一个示例图片中看到“其他独立部门”。这些节点可以垂直对齐到其他节点之一，并向下流动。或者，它们可以成为另一个与顶部没有连接的部门，就像我的第二个示例图片中一样。

有没有好的方法来做到这一点？

示例图片是手动添加节点的示例图片。

来自其他问题的MWE：

library(highcharter)
library(dplyr)

highchart() %>%
  hc_chart(type = 'organization', inverted = TRUE) %>%
  hc_title(text = 'Highcharts Org Chart') %>%
  hc_add_series(
    name = 'Highsoft',
    data = list(
      list(from = 'Shareholders', to = 'Board'),
      list(from = 'Board', 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 = 'Product'),
      list(from = 'CTO', to = 'Web'),
      list(from = 'CSO', to = 'Sales'),
      list(from = 'CMO', to = 'Market')
    ),
    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 = 4, color = '#359154')
    ),
    nodes = list(
      list(id = 'Shareholders'),
      list(id = 'Board'),
      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 = 'Product', name = 'Product developers'),
      list(id = 'Web', name = 'Web devs, sys admin'),
      list(id = 'Sales', name = 'Sales team'),
      list(id = 'Market', name = 'Marketing team')
    ),
    colorByPoint = TRUE,
    color = '#007ad0',
    dataLabels = list(color = 'white'),
    borderColor = 'white',
    nodeWidth = 65
  ) %>%
  hc_tooltip(outside = TRUE)


<details>
<summary>英文:</summary>
I would like to visualize my company&#180;s organizational chart in an HTML Widget to replace the currently used drawn PDF.
In principle this seems feasible using the highchart or googleVis package. Unfortunately, the current org chart has some independent nodes that are placed next to the top level, see „Other Unit on the right/left“ in my example pictures. 
Furthermore, there are even more independent nodes on the left hand side, see „other independent units“ in the first example picture. Those could be vertically aligned to one of the other nodes and just flow down. Alternatively, they could be another department with no connection to the top as in my second example picture.
Is there a good way to do this?
MWE for the picture was taken from this questions:
https://stackoverflow.com/questions/60509365/how-can-we-plot-highcarts-organization-chart-in-r-language
Example Picture with manually added nodes
[![enter image description here][1]][1]
Example picture with additional independent department
[![enter image description here][2]][2]
MWE from other question:
library(highcharter)
library(dplyr)
highchart() %&gt;%
hc_chart(type = &#39;organization&#39;, inverted = TRUE) %&gt;%
hc_title(text = &#39;Highcharts Org Chart&#39;) %&gt;%
hc_add_series(
name = &#39;Highsoft&#39;,
data = list(
list(from = &#39;Shareholders&#39;, to = &#39;Board&#39;),
list(from = &#39;Board&#39;, to = &#39;CEO&#39;),
list(from = &#39;CEO&#39;, to = &#39;CTO&#39;),
list(from = &#39;CEO&#39;, to = &#39;CPO&#39;),
list(from = &#39;CEO&#39;, to = &#39;CSO&#39;),
list(from = &#39;CEO&#39;, to = &#39;CMO&#39;),
list(from = &#39;CEO&#39;, to = &#39;HR&#39;),
list(from = &#39;CTO&#39;, to = &#39;Product&#39;),
list(from = &#39;CTO&#39;, to = &#39;Web&#39;),
list(from = &#39;CSO&#39;, to = &#39;Sales&#39;),
list(from = &#39;CMO&#39;, to = &#39;Market&#39;)
),
levels = list(
list(level = 0, color = &#39;silver&#39;, dataLabels = list(color = &#39;black&#39;), height = 55),
list(level = 1, color = &#39;silver&#39;, dataLabels = list(color = &#39;black&#39;), height = 55),
list(level = 2, color = &#39;#980104&#39;),
list(level = 4, color = &#39;#359154&#39;)
),
nodes = list(
list(id = &#39;Shareholders&#39;),
list(id = &#39;Board&#39;),
list(id = &#39;CEO&#39;, title = &#39;CEO&#39;, name = &#39;Grethe Hjetland&#39;, image = &#39;https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132317/Grethe.jpg&#39;),
list(id = &#39;HR&#39;, title = &#39;HR/CFO&#39;, name = &#39;Anne Jorunn Fjarestad&#39;, color = &#39;#007ad0&#39;, image = &#39;https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132314/AnneJorunn.jpg&#39;, column = 3, offset = &#39;75%&#39;),
list(id = &#39;CTO&#39;, title = &#39;CTO&#39;, name = &#39;Christer Vasseng&#39;, color = &#39;#007ad0&#39;, image = &#39;https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12140620/Christer.jpg&#39;, column = 4, layout = &#39;hanging&#39;),
list(id = &#39;CPO&#39;, title = &#39;CPO&#39;, name = &#39;Torstein Honsi&#39;, image = &#39;https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12131849/Torstein1.jpg&#39;, column = 4),
list(id = &#39;CSO&#39;, title = &#39;CSO&#39;, name = &#39;Anita Nesse&#39;, image = &#39;https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132313/Anita.jpg&#39;, column = 4, layout = &#39;hanging&#39;),
list(id = &#39;CMO&#39;, title = &#39;CMO&#39;, name = &#39;Vidar Brekke&#39;, image = &#39;https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/13105551/Vidar.jpg&#39;, column = 4, layout = &#39;hanging&#39;),
list(id = &#39;Product&#39;, name = &#39;Product developers&#39;),
list(id = &#39;Web&#39;, name = &#39;Web devs, sys admin&#39;),
list(id = &#39;Sales&#39;, name = &#39;Sales team&#39;),
list(id = &#39;Market&#39;, name = &#39;Marketing team&#39;)
),
colorByPoint = TRUE,
color = &#39;#007ad0&#39;,
dataLabels = list(color = &#39;white&#39;),
borderColor = &#39;white&#39;,
nodeWidth = 65
) %&gt;%
hc_tooltip(outside = TRUE)
[1]: https://i.stack.imgur.com/SejTu.png
[2]: https://i.stack.imgur.com/cJGMv.png
</details>
# 答案1
**得分**: 2
以下是代码部分的翻译：
## Simple illustration
最简单的说明方法是通过从示例中简单地删除`list(from = 'CEO', to = 'CTO')`行来实现。
这会中断CEO和CTO之间的链接，但节点仍然保持在其位置，因为它们的位置在`column`参数中指定（因为图表是倒置的）。
## Application to your objective
所以对于左侧/右侧的其他单位：
- 在`data`中：创建链接OU1 -> OU1和OU2 -> OU2
- 在`nodes`中：两个节点，指定`column = 0`
对于独立单位：
- 在`data`中：链接UIs -> UI1和UIs -> UI2
- 在`nodes`中：三个节点，对于顶部节点，指定`column = 4`和`layout = 'hanging'`。
<details>
<summary>英文:</summary>
## Simple illustration
The simplest way to illustrate how this can be done is by simply removing the line `list(from = &#39;CEO&#39;, to = &#39;CTO&#39;)` from your example.

library(highcharter)
library(dplyr)

highchart() %>%
hc_chart(type = 'organization', inverted = TRUE) %>%
hc_title(text = 'Highcharts Org Chart') %>%
hc_add_series(
name = 'Highsoft',
data = list(
list(from = 'Shareholders', to = 'Board'),
list(from = 'Board', 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 = 'Product'),
list(from = 'CTO', to = 'Web'),
list(from = 'CSO', to = 'Sales'),
list(from = 'CMO', to = 'Market')
),
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 = 4, color = '#359154')
),
nodes = list(
list(id = 'Shareholders'),
list(id = 'Board'),
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 = 'Product', name = 'Product developers'),
list(id = 'Web', name = 'Web devs, sys admin'),
list(id = 'Sales', name = 'Sales team'),
list(id = 'Market', name = 'Marketing team')
),
colorByPoint = TRUE,
color = '#007ad0',
dataLabels = list(color = 'white'),
borderColor = 'white',
nodeWidth = 65
) %>%
hc_tooltip(outside = TRUE)


[![enter image description here][1]][1]
This breaks the link between CEO and CTO but nodes remain in position because their position is specified in the `column` argument (which in the end rather corresponds to rows as the chart is inverted).  
## Application to your objective
So for the left/right other units:
- In `data`: Create links OU1 -&gt; OU1 and OU2 -&gt; OU2
- In `nodes`: The two nodes, specifying `column = 0`
And for the independent units:
- In `data`: The links UIs -&gt; UI1 and UIs -&gt; UI2
- In `nodes`: The three nodes, specifying for the top one `column = 4` and `layout = &#39;hanging&#39;`

library(highcharter)
library(dplyr)

highchart() %>%
hc_chart(type = 'organization', inverted = TRUE) %>%
hc_title(text = 'Highcharts Org Chart') %>%
hc_add_series(
name = 'Highsoft',
data = list(
# Added ###########
list(from = 'OU1', to = 'OU1'),
list(from = 'OU2', to = 'OU2'),
###################
list(from = 'Shareholders', to = 'Board'),
list(from = 'Board', 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'),
# Added #######################
list(from = 'IUs', to = 'IU1'),
list(from = 'IUs', to = 'IU2'),
###############################
list(from = 'CTO', to = 'Product'),
list(from = 'CTO', to = 'Web'),
list(from = 'CSO', to = 'Sales'),
list(from = 'CMO', to = 'Market')
),
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 = 4, color = '#359154')
),
nodes = list(
# Added #####
list(id = 'OU1', name = "Other Unit 1", column = 0),
list(id = 'OU2', name = "Other Unit 2", column = 0),
##############
list(id = 'Shareholders'),
list(id = 'Board'),
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%'),
# Added #####
list(id = 'IUs', name = 'Independent units', column = 4, layout = 'hanging'),
list(id = 'IU1', name = 'Independent units #1'),
list(id = 'IU2', name = 'Independent units #2'),
#############################################
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 = 'Product', name = 'Product developers'),
list(id = 'Web', name = 'Web devs, sys admin'),
list(id = 'Sales', name = 'Sales team'),
list(id = 'Market', name = 'Marketing team')
),
colorByPoint = TRUE,
color = '#007ad0',
dataLabels = list(color = 'white'),
borderColor = 'white',
nodeWidth = 65
) %>%
hc_tooltip(outside = TRUE)

[![enter image description here][2]][2]
[1]: https://i.stack.imgur.com/WTFJW.png
[2]: https://i.stack.imgur.com/ZRbY3.png
</details>

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

组织结构图与独立节点

问题

用 R 语言填充缩放后的数字序列。

在R中，如何将多个变量分支到另一个变量下？

使用combn函数创建用于分组成对、行内比较的特定功能。

将两列的信息合并在一起

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论