Highcharts Highslide弹出窗口内的图表

我目前正在尝试将Highcharts图表放在Highslide弹出框中（Highslide弹出框本身来自现有的Highcharts折线图）。基本上，我希望有人能够点击线图中的一个点，并有一个Highslides弹出窗口，其中包含关于该数据点的更多信息的其他图表

下面的代码工作-一次。用户单击某个点并关闭Highslide弹出窗口后，如果再次单击该点，Highcharts图形将不再显示在Highslide弹出窗口中（但是，“平铺”div中包含的数据会继续显示）

这里发生了什么事？为什么图表仅在您第一次单击该点时显示，而在随后的任何单击中不显示

PS：如果折线图中有多个点，单击每个点一次将正确显示该数据点的其他图表。但是如果关闭Highslide弹出窗口并再次单击该点，它将不会显示Highcharts图形

注意：.done调用中的两个函数为Highslide弹出窗口创建Highcharts图形

代码（现有Highcharts折线图的内部系列）：

单击：函数（）
{
window.Task\u ID=this.Task\u ID；
window.Task\u Record=this.Task\u Record；
hs.htmlExpand（空，
{ 
页面来源：
{
x:this.pageX，
y:这个，佩吉
},
标题文本：“
”+“
”+“
”，
宽度：700，
身高：700
}),
hs.Expander.prototype.onAfterExpand（空{
主要内容文本：
$.ajax
({
类型：“post”，
url:“TrackRecord_Beta/practice.php”，
数据：
{
“timestamp”：这个.x
},
成功：功能（结果）
{
$（'.tile'）.html（结果）；
}
}) 
.done（函数（）
{
createStudentTaskChart（）；
createBusinessTaskChart（）；
}),
})
}

问题在于Highslide每次都会创建新窗口（这就是为什么可以有多个窗口），因此每次都需要更改容器的ID（而不是创建重复的窗口）。例如：

我知道，这不是使用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
                        });



                    }

单击：函数（）{
计数器++；
hs.htmlExpand（空{
页面来源：{
x:this.pageX，
y:这个，佩吉
},
headingText:this.series.name，
maincontentText:''+Highcharts.dateFormat（“%A，%b%e，%Y'，this.x）+'：
'+this.Y+'访问'+''，
宽度：310，
身高：500
});
}

                    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
                        });



                    }