Highslide弹出窗口中的Highcharts图表

Question

我目前正在尝试将Highcharts图表放在Highslide弹出窗口中( Highslide弹出窗口本身来自现有的Highcharts线状图)。基本上，我希望有人能够点击线形图中的一个点，并有一个高幻灯片弹出，其中包含了该数据点的进一步信息的额外图表。

下面的代码可以工作--一次。用户单击一个点并关闭Highslide弹出窗口后，如果您再次单击该点，Highcharts图形将不再显示在Highslide弹出窗口中(但是，包含在"tile“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();
                        }),
                    })
                 }

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



                    }