Highcharts Treegraph多节点连同一G节点线条分离，如何合并为单个G节点？

问题根源在于Treegraph是严格的树形结构组件，每个节点只能拥有一个父节点。你在数据中两次定义了G节点（分别作为E和C的子节点），Highcharts会将其识别为两个独立的节点，因此线条会分离。

要实现多个节点指向同一个G节点的需求，需要改用Networkgraph组件——它支持任意节点间的连接关系（包括多父节点的DAG结构）。

修改后的代码示例 #

<!DOCTYPE html>
<html lang="pt-br">
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
    <div id="container"></div>
</figure>
<script type="text/javascript">
Highcharts.chart('container', {
    series: [{
        type: 'networkgraph',
        // 定义所有节点
        nodes: [
            { id: 'A' }, { id: 'D' },
            { id: 'B' }, { id: 'C' },
            { id: 'E' }, { id: 'F' },
            { id: 'G' }, { id: 'H' },
            { id: 'I' }
        ],
        // 定义节点间的连接关系
        links: [
            { from: 'A', to: 'B' },
            { from: 'A', to: 'C' },
            { from: 'D', to: 'E' },
            { from: 'D', to: 'F' },
            { from: 'E', to: 'G' },
            { from: 'C', to: 'G' },
            { from: 'G', to: 'H' },
            { from: 'G', to: 'I' }
        ],
        dataLabels: {
            format: '{point.id}'
        }
    }]
});
</script>
</body>
</html>

关键调整说明 #

• 替换组件类型：将treegraph改为networkgraph
• 拆分节点与连接：通过nodes数组明确定义所有节点，links数组指定节点间的指向关系，确保G仅被定义一次，C和E均连接到这个唯一的G节点

内容的提问来源于stack exchange，提问作者Lucas Rosa