Highcharts一个Highslide弹出式视窗的内部结构图(Highcharts Chart

目前我正在试图把一个Highcharts图的Highslide弹出的内侧（Highslide弹出本身自带了现有Highcharts线图）。基本上，我希望有人能够点击折线图的一个点，并有一个包含与该数据点的详细信息附加图表一Highslides弹出窗口。

下面的代码工作 - 一次。用户点击一个点后，然后关闭Highslide弹出式视窗，在Highcharts图表不再在Highslide弹出式视窗显示，如果你对点再次单击（载于“砖”的div并继续出现数据，不过）。

这里发生了什么事？为什么图表只显示了当你第一次点击的点，但没有任何后续的点击？

PS：如果有折线图的多个点，点击每个点一次将正确显示该数据点的附加图表。但是，如果你再次关闭Highslide弹出式视窗和点击来看，它不会显示Highcharts图表。

注：在中，.done调用这两个函数创建为Highslide弹出的Highcharts图

代码（内部系列为现有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();
                        }),
                    })
                 }

问题是，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
                        });



                    }