Question

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

以下代码有效 - 一次。在用户单击某个点然后关闭Highslide弹出窗口后，如果再次单击该点，Highfrts图形将不再显示在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
                        });



                    }

Highslide popout中的Highcharts Chart

1 个答案: