JavaScript/Jquery/甘特图 Highcharts : On clicking over a task progress pop-up should get open

Question

请参阅上面的甘特图。

我正在 <div id="containter"> 中加载此甘特图。我需要一个 仅单击任务进度时的 jQuery Show Bootstrap 模态弹出窗口，而不是单击容器。

我尝试了这段代码，

  $(function () {
            $("#container").click(function () {
                $('#demoModal').modal('show');
            });
        });

   <!-- 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>

单击图表上的任意位置时，Bootstrap 模式弹出窗口会打开。我希望弹出窗口仅在单击任务进度而不是指示器时打开。

请给我一个解决方案。

Answer 1

您可以在甘特图配置中添加以下设置

plotOptions: {
   series: {
      point: {
         events: {
           click: (event) => {
              console.log(event);
              $('#demoModal').modal('show');
           }
        }
      }
   }
}