Highcharts Chart внутри всплывающего окна Highslide

Question

В настоящее время я пытаюсь поместить диаграмму Highcharts внутри всплывающего окна Highslide (всплывающее окно Highslide выходит из существующего графика линий Highcharts). В принципе, я хочу, чтобы кто-то мог щелкнуть точку в линейном графике и иметь всплывающее окно Highslides, содержащее дополнительные диаграммы с дополнительной информацией об этой точке данных.

Код ниже работает - один раз. После того, как пользователь нажимает на точку и затем закрывает всплывающее окно Highslide, графики Highcharts больше не отображаются в всплывающем списке Highslide, если вы снова нажмете на эту точку (однако данные, содержащиеся в div «tile», продолжают отображаться).

Что здесь происходит? Почему диаграммы отображаются только при первом щелчке по точке, но не при последующих кликах?

PS: Если в линейном графике имеется несколько точек, щелчок по каждой точке будет правильно отображать дополнительные диаграммы для этой точки данных. Но если вы закроете всплывающее окно Highslide и снова щелкните по точке, он не отобразит графики Highcharts.

Примечание: Две функции в вызове .done создавать графики Highcharts для Highslide Выдвижной

кодекса (внутри серии для существующего Highcharts графа линии):

click: function() 
          { 
           window.Task_ID = this.Task_ID; 

           window.Task_Record = this.Task_Record; 

        hs.htmlExpand(null, 
        { 
         pageOrigin: 
         { 
          x: this.pageX, 
          y: this.pageY 
         }, 

         headingText: "<p style='margin: 0 auto;'> Task: " + this.Task_ID + " for " + this.Company + "</p>", 

         maincontentText: "<p class='tile'></p>" + "<div class='charts'><p class = 'studentTaskChart' id='studentTaskChart" + this.Task_ID + "'></p>" + "<p class = 'businessTaskChart' id='businessTaskChart" + this.Task_ID + "'></p></div>", 

         width: 700, 

         height: 700 
        }), 

        hs.Expander.prototype.onAfterExpand(null, { 
          maincontentText: 
          $.ajax 
         ({ 
          type: "post", 
          url: "TrackRecord_Beta/practice.php", 
          data: 
          { 
           "timestamp" : this.x 
          }, 
          success: function(result) 
          { 
           $('.tile').html(result); 
          } 
         }) 
         .done(function() 
         { 
          createStudentTaskChart(); 
          createBusinessTaskChart(); 
         }), 
        }) 
       } 

Answer 1

Проблема заключается в том что Highslide каждый раз создает новое окно (поэтому у вас может быть более одного), поэтому вам нужно изменить каждый раз ID контейнера (не создавать дубликаты). Например: http://jsfiddle.net/y4JV5/4/

Я знаю, это не с помощью AJAX, но идея должна быть такой же:

var counter = 0; 

hs.Expander.prototype.onAfterExpand = addChart; 

function addChart() { 
    var chart = $("#hc-test" + counter).highcharts(); 
    if (chart) { 
     chart.destroy(); 
    } 
    $("#hc-test" + counter).highcharts({ 
     chart: { 
      width: 300, 
      height: 300 
     }, 
     series: [{ 
      type: 'pie', 
      data: [Math.random() * 10, Math.random() * 10, Math.random() * 10] 
     }] 
    }); 
} 

Нажмите обработчик:

    click: function() { 
         counter++; 
         hs.htmlExpand(null, { 
          pageOrigin: { 
           x: this.pageX, 
           y: this.pageY 
          }, 
          headingText: this.series.name, 
          maincontentText: '<div>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' + this.y + ' visits' + '</div><div id="hc-test' + counter + '"></div>', 
          width: 310, 
          height: 500 
         }); 



        }