Highcharts项目：点击org chart节点弹出模态框显示另一org chart方案咨询

实现该需求总共需要3个核心步骤：

• 新增模态框DOM结构，包含关闭按钮和子组织图的渲染容器
• 给原有组织图绑定节点点击事件，点击时触发模态框显示
• 在点击回调中拿到当前节点关联数据，渲染新的组织图到模态框容器内

1. 新增模态框HTML结构 #

你可以直接使用原生HTML写模态框，也可以用项目内已有的UI组件库的模态框组件，原生示例如下：

<!-- 模态框主体 -->
<div id="orgModal" style="display:none; position:fixed; top:10%; left:10%; width:80%; height:80%; background:#fff; border-radius:4px; padding:20px; z-index:9999; box-shadow:0 2px 12px rgba(0,0,0,0.3);">
  <span id="closeModal" style="float:right; cursor:pointer; font-size:20px; color:#666;">&times;</span>
  <h3>子组织架构详情</h3>
  <!-- 子组织图渲染容器 -->
  <div id="subOrgChart" style="width:100%; height:calc(100% - 50px); margin-top:10px;"></div>
</div>
<!-- 模态框遮罩层 -->
<div id="modalOverlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9998;"></div>

2. 给原有组织图添加点击事件 #

在你原有Highcharts配置的plotOptions中添加节点点击回调逻辑：

plotOptions: {
  series: [{
    type: 'organization',
    point: {
      events: {
        click: function () {
          // 展示模态框和遮罩
          document.getElementById('orgModal').style.display = 'block';
          document.getElementById('modalOverlay').style.display = 'block';

          // 这里可以根据当前点击节点的信息获取子组织图数据，示例为模拟数据，你可以替换为业务接口请求逻辑
          const subChartData = [
            { id: 'lead', name: `${this.name}的下属团队`, title: '部门主管' },
            { id: 'staff1', name: '员工甲', title: '前端开发', parent: 'lead' },
            { id: 'staff2', name: '员工乙', title: '后端开发', parent: 'lead' },
            { id: 'staff3', name: '员工丙', title: '测试工程师', parent: 'lead' }
          ];

          // 初始化子组织图
          Highcharts.chart('subOrgChart', {
            chart: {
              type: 'organization',
              inverted: true,
              height: '100%'
            },
            title: {
              text: `${this.name} 所属子架构`
            },
            series: [{
              data: subChartData
            }]
          });
        }
      }
    }
  }]
}

3. 添加模态框关闭逻辑 #

// 点击关闭按钮关闭模态框
document.getElementById('closeModal').addEventListener('click', () => {
  document.getElementById('orgModal').style.display = 'none';
  document.getElementById('modalOverlay').style.display = 'none';
  // 销毁子组织图实例，避免内存溢出
  const subChart = Highcharts.charts.find(chart => chart?.renderTo.id === 'subOrgChart');
  subChart?.destroy();
});

// 点击遮罩层也可关闭模态框
document.getElementById('modalOverlay').addEventListener('click', () => {
  document.getElementById('closeModal').click();
});

注意事项 #

• 如果你的项目使用了UI组件库（比如Element UI、Ant Design等），直接使用组件库的模态框即可，不用手写原生模态框，只需要保证模态框打开后、子容器渲染完成再初始化子组织图。
• 如果子组织图数据需要异步请求，在点击回调中发起请求，拿到数据后再初始化Highcharts，加载过程可以添加loading效果优化体验。
• 每次关闭模态框时建议销毁子组织图实例，避免多次打开重复初始化导致内存占用过高。

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