Javascript / Jquery / Gantt Highchart: при нажатии на задачу должно появиться всплывающее окно с ходом выполнения задачи.

Question

См. Диаграмму Ганта выше.

Я загружаю эту диаграмму Ганта в <div id="containter">. Мне нужно jQuery Показать 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');
           }
        }
      }
   }
}