css - HighCharts 组织节点重叠

Question

我有一个 HighCharts 组织结构图，它从我们的数据库加载数据，因此它可以有可变数量的节点。我已经添加了

.highcharts-container { overflow: scroll !important; min-width: 100px; }

添加到我的 css 中，这样滚动条就会出现，并且它似乎会根据需要垂直增长。但是，由于某种原因，节点水平重叠。我已经添加了

nodePadding: 15

我的 js 似乎将它们垂直隔开但对水平问题没有帮助。我觉得应该有一个选项或设置，但是当我搜索重叠问题时，我得到的只是标签问题。关于如何让我的节点空间化的任何想法？谢谢!

这是一个 jsFiddle，它有像我一样的重叠数据 - https://jsfiddle.net/ubmzs5qf/

万一事情在某个时候断开连接，这是塞巴斯蒂安在这里给我的一个功能:https://www.highcharts.com/forum/viewtopic.php?f=9&t=42435&p=149331处理调整数据量的大小:

events: {
  load() {
    let chart = this,
      series = chart.series[0],
      newWidth = series.options.nodeWidth * series.nodeColumns[2].length;

    chart.update({
      chart: {
        width: newWidth
      }
    })
  }
}

我用它来设置高度和宽度，但它被某些东西覆盖了，可能是对话框大小的更高 Angular 限制。我想我需要一种方法来分隔图标并使所有内容变小，因为我不能只使图表变大。

Answer 1

您可以通过减小节点宽度来实现它，例如。 节点宽度:50。

演示:

• > https://jsfiddle.net/BlackLabel/d9cmt0oy/

API 引用:

• > https://api.highcharts.com/highcharts/series.organization.nodeWidth

---

编辑

另一种方法是减小 `dataLabels 字体大小并手动设置每个较大节点的高度和偏移量。

演示:

• > https://jsfiddle.net/BlackLabel/8om5hc34/1/