1

我目前正在尝试将 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();
                        }),
                    })
                 }
4

1 回答 1

0

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



                    }
于 2013-06-06T14:59:34.727 回答