如何为Highcharts组织图添加横向滚动并解决节点重叠问题

添加横向滚动是可以解决节点重叠问题的，配合布局参数调整即可完全修复该问题，具体操作如下：

一、核心问题原因 #

你当前配置里固定了图表宽度为1080px，同时nodePadding设为100（该参数为同层级节点间距，单位px），过大的间距加上多节点的宽度需求，整体布局所需空间远超容器宽度，挤压后就会出现节点重叠。

二、具体解决方法 #

1. 调整组织图布局参数

修改series内的节点相关配置，保留你原有的其他配置不变，仅修改/新增以下参数：

series: [{
    // 原有配置（type、name、data、levels等）保持不变
    nodeWidth: 142,
    nodePadding: 15, // 原100改为15，同层级节点保留合理间距即可
    nodeHeight: 40, // 固定节点高度，避免文本撑开节点后高度计算错误
    hangingIndent: 50, // 调整悬挂布局的缩进值，避免你设置的hanging节点和其他节点错位
}]

2. 实现横向滚动

给外层容器添加横向滚动属性，同时放开图表的固定宽度限制：
首先修改CSS代码：

.highcharts-null-point{
 fill: yellow;
}
/* 新增以下样式 */
.highcharts-figure {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}
#container {
    min-width: 2000px; /* 该数值根据你节点总宽度调整，保证能放下所有节点即可 */
    height: 520px;
}

然后修改JS的chart配置，删掉固定的width配置：

chart: {
    height: 520,
    // 删掉原来的width: 1080配置
    inverted: false
}

3. 可选替代方案（无需横向滚动）

如果不想使用横向滚动，可以开启纵向布局：将chart.inverted设置为true，组织图会改为从上到下纵向排列，大幅降低横向空间需求，也可避免节点重叠。
如果后续节点数量还会增加，可以给节点添加collapsed: true属性开启折叠功能，用户点击父节点才会展开子节点，减少同一屏展示的节点数量。

内容的提问来源于stack exchange，提问作者Rituparna Das