Highcharts甘特图：仅点击任务进度时弹出Bootstrap模态框

你现在的问题出在把点击事件直接绑定在了整个图表容器上，所以不管点图表空白区还是任务条都会触发模态框。要实现仅点击任务进度部分才触发，得利用Highcharts自身的点（point）点击事件来精准控制，而不是给容器绑全局click。

具体解决方案 #

1. 先移除你原来给#container绑定的全局click事件，我们要换成Highcharts自带的精准事件
2. 在Highcharts甘特图的初始化配置里，添加plotOptions配置项，针对甘特图的任务系列设置point.events.click事件，只有点击到任务进度条（也就是每个任务对应的point）时才触发模态框

完整代码示例 #

$(function () {
    // 初始化Highcharts甘特图
    Highcharts.ganttChart('container', {
        // 你的基础图表配置（标题、轴设置、任务数据等）
        title: {
            text: '项目甘特图'
        },
        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            type: 'category'
        },
        series: [{
            name: '项目任务',
            data: [
                // 示例任务数据，替换成你的实际数据
                {
                    name: '需求分析',
                    start: Date.UTC(2024, 0, 1),
                    end: Date.UTC(2024, 0, 10)
                },
                {
                    name: '开发编码',
                    start: Date.UTC(2024, 0, 8),
                    end: Date.UTC(2024, 0, 20)
                }
            ]
        }],
        // 关键配置：仅监听任务进度条的点击事件
        plotOptions: {
            gantt: {
                point: {
                    events: {
                        click: function () {
                            // 点击任务进度条时弹出Bootstrap模态框
                            $('#demoModal').modal('show');
                            // 还可以通过this获取当前点击任务的详细信息，方便扩展
                            console.log('当前点击任务:', this.name);
                            console.log('任务开始时间:', new Date(this.start));
                        }
                    }
                }
            }
        }
    });
});

模态框代码保持不变 #

<!-- Modal -->
<div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Task Progress Indicator</h4>
      </div>
      <div class="modal-body">Task Progress Indicator</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <%-- <button type="button" class="btn btn-primary">Save changes</button>--%>
      </div>
    </div>
  </div>
</div>

原理说明 #

Highcharts甘特图里的每个任务进度条都是一个独立的point对象，通过plotOptions.gantt.point.events.click配置，能精准监听仅点击任务进度条时的触发事件，完全不会触发图表空白区域的点击动作。而且你还可以通过回调里的this对象获取当前任务的名称、起止时间等数据，方便后续扩展模态框里的内容。

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