如何在Angular应用的Highcharts Gantt甘特图中为父行图标添加点击popover

步骤1：配置甘特图自定义操作列，为父行添加可点击图标 #

在Highcharts配置项中新增自定义操作列，仅父行渲染可点击图标，同时添加自定义类名和数据标识方便后续事件绑定：

// 甘特图基础配置
import * as Highcharts from 'highcharts/highcharts-gantt';

chartOptions: Highcharts.Options = {
  series: [{
    type: 'gantt',
    data: yourGanttDataSource, // 你的甘特图数据源
    columns: [{
      labels: {
        formatter: function() {
          // 仅父行显示自定义图标，判断逻辑可根据你的数据结构调整
          if (!this.point.parent || this.point.isParent) {
            // 给图标添加自定义类名和行ID属性
            return `<span class="gantt-custom-icon" data-row-id="${this.point.id}">⋮</span>`
          }
          return ''
        }
      },
      width: 40
    }]
  }] as any
}

步骤2：绑定图标点击事件控制Popover显隐 #

在Angular组件中通过Renderer2监听动态渲染的图标点击事件，同时实现点击空白区域关闭Popover的逻辑：

import { AfterViewInit, Component, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-gantt',
  templateUrl: './gantt.component.html',
  styleUrls: ['./gantt.component.css']
})
export class GanttComponent implements AfterViewInit {
  popoverIsOpen = false;
  popoverPos = { x: 0, y: 0 };
  activeRowId: string | number = '';

  constructor(private renderer2: Renderer2) {}

  ngAfterViewInit(): void {
    // 甘特图初始化完成后绑定全局点击监听
    Highcharts.chart('gantt-container', this.chartOptions, (chartInstance) => {
      this.renderer2.listen(chartInstance.container, 'click', (e: MouseEvent) => {
        const target = e.target as HTMLElement;
        if (target.classList.contains('gantt-custom-icon')) {
          e.stopPropagation();
          this.activeRowId = target.dataset['rowId'] || '';
          // 配置Popover弹出位置
          this.popoverPos.x = e.clientX;
          this.popoverPos.y = e.clientY;
          this.popoverIsOpen = true;
        } else if (this.popoverIsOpen) {
          // 点击非图标区域关闭Popover
          this.popoverIsOpen = false;
        }
      })
    })
  }
}

步骤3：添加Popover模板 #

在组件HTML文件中添加Popover布局，通过绝对定位设置弹出位置：

<!-- 甘特图容器 -->
<div id="gantt-container" style="height: 700px;"></div>

<!-- 自定义Popover -->
<div 
  *ngIf="popoverIsOpen" 
  class="gantt-popover"
  [style.left.px]="popoverPos.x"
  [style.top.px]="popoverPos.y"
>
  <p>当前选中行ID：{{activeRowId}}</p>
  <button>编辑任务</button>
  <button>新增子任务</button>
  <button>删除任务</button>
</div>

补充说明 #

• 如果你使用Angular Material、NG-ZORRO等组件库的Popover组件，无需自行实现定位逻辑，直接在图标点击事件中调用组件库的open()方法即可触发Popover弹出
• 父行的判断逻辑可根据你的实际数据结构调整，只要保证仅目标行渲染可点击图标即可

内容的提问来源于stack exchange，提问作者Himanshu Rastogi