Highslide弹出窗口内的Highcharts图表 [英] Highcharts Chart inside of a Highslide popout

问题描述

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

I am currently trying to put a Highcharts chart inside of a Highslide pop-out (the Highslide pop-out itself comes out of an existing Highcharts line graph). Basically, I want someone to be able to click on a point in the line graph and have a Highslides popout that contains additional charts with further information on that data point.

下面的代码有效-一次.用户单击一个点然后关闭高幻灯片"弹出窗口后，如果再次单击该点，则高图表"图形将不再显示在高幻灯片"弹出窗口中(但是，"tile" div中包含的数据的确会继续出现).

The code below works - once. After the user clicks on a point and then closes the Highslide popout, the Highcharts graphs no longer show up in the Highslide popout if you click on the point again (the data contained in the "tile" div does continue to appear, however).

这是怎么回事?为什么只在您第一次单击该点而不是随后的任何单击时才显示图表?

What's happening here? Why do the charts only show up when you first click on the point but not on any subsequent clicks?

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

PS: If there are multiple points in the line graph, clicking on each point once will correctly show the additional charts for that data point. But if you close the Highslide popout and click on the point again, it will not show the Highcharts graphs.

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

Note: The two functions in the .done call create the Highcharts graphs for the Highslide pop-out

代码(现有Highcharts折线图的内部序列):

Code (inside series for the existing Highcharts line graph):

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/

The problem is that Highslide each time creates new window (that's why you can have more than one), so you need to change each time container's ID (not create duplicates). For example: http://jsfiddle.net/y4JV5/4/

我知道，这不是使用AJAX，但是想法应该是相同的:

I know, this is not using AJAX, but idea should be the same:

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弹出窗口内的Highcharts图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！