折叠 Highcharts 组织结构图

Posted 2023-03-24

【中文标题】折叠 Highcharts 组织结构图

【英文标题】：Collapse Highcharts Organization Chart

【发布时间】：2021-10-15 13:13:06

【问题描述】：

我正在使用 Highcharts 创建组织结构图，如提供的示例：https://jsfiddle.net/vegaelce/7rb6esqt/

是否可以在 Google 组织结构图中添加“折叠”功能？在下面的示例https://jsfiddle.net/vegaelce/kb2gted4 中，当您双击“Mike”或“Jim”单元格时，它会折叠上面的所有单元格。我需要用 Highcharts 重现一个等效模式，你有想法吗？ （在 Google API 中，折叠模式通过

启用

    allowCollapse:true

谢谢

【参考方案1】：

Highcharts 中没有这样的内置功能，但您可以使用点击事件和显示/隐藏方法添加它。示例：

    plotOptions: 
        series: 
            point: 
                events: 
                    click: function() 
                        const operateChildren = (point, operation) => 
                            point.linksFrom.forEach(link => 
                                link.graphic[operation]();
                                link.toNode.graphic[operation]();

                                operateChildren(link.toNode, operation);
                            );
                        ;

                        if (this.linksFrom && this.linksFrom[0]) 
                            if (this.linksFrom[0].graphic.visibility === 'hidden') 
                                operateChildren(this, 'show');
                             else 
                                operateChildren(this, 'hide');
                            
                        
                    
                
            
        
    ,

    tooltip: 
        formatter: function(tooltip) 
            if (this.point.graphic.visibility !== 'hidden') 
                return tooltip.defaultFormatter.call(this, tooltip);
            
            return false;
        
    

---

现场演示： https://jsfiddle.net/BlackLabel/dp03gq6a/

API 参考：

https://api.highcharts.com/class-reference/Highcharts.SVGElement#show

https://api.highcharts.com/class-reference/Highcharts.SVGElement#hide

【讨论】：

非常感谢这个功能。我对此功能有两个额外的要求：在以下示例中，是否可以在节点折叠/展开后“重绘”图表（以优化剩余空间并重新对齐节点）？其他东西：当鼠标悬停一个节点时，是否可以从节点突出显示到高级父节点？我在 highchart.css 文件中看到了类似的东西，但它只适用于前一个父母和孩子。再次感谢您的帮助

嗨@vegaelce，你能为此创建一个新的SO问题吗？我认为其他人将这两个线程分开会更好。