Highcharts 图表不显示在 jquery 对话框中答案

【问题标题】：Highcharts chart doesn't show in jquery dialogHighcharts 图表不显示在 jquery 对话框中
【发布时间】：2012-07-10 12:40:48
【问题描述】：

我正在尝试在 jQuery 对话框中显示图表。

我确实这样做了，但只是第一次。当我重新加载页面并显示对话框时，我只得到一个空白空间。这是我的代码：

function () {
    var dialog = $('#div_id').dialog({
        'autoOpen': false,
        'closeOnEscape':true, 
        'buttons':[{ 
        'text':'OK',
        'click': function() { $(this).dialog('close'); }
        }],
        'modal':true
    });
    $("#show_dialog_button").click(function () {
            dialog.dialog('open');
            var chart = Highcharts.Chart({/*some configs here*/});
            var jqChart = $("#"+chart.options.chart.renderTo);
        HighchartsHelper.autoResizeChart(jqChart,chart);
    }
}

希望有人能帮忙。

【问题讨论】：

你确定你的对话框在渲染图表之前已经创建了吗？你能在打开对话框后提醒一些东西，看看它是否被渲染了吗？
我在 .dialog('open') 函数调用之后立即创建图表，如上面的代码 sn-p 所示。我假设图表是在调用 Highcharts.Chart() 方法时呈现的，并且 .dialog() 方法在调用图表构造函数之前完成。这些假设对吗？

标签： jquery dialog highcharts

【解决方案1】：

好的，我找到了问题所在。创建对话框时，它会复制给定元素并将其放入 body 标记中。因此，具有相同 id 的元素不止一个。然后在第二次调用时，对话框不知道要获取和显示哪个元素，所以它只是打开。解决方法是从 DOM 中删除除原始元素之外的所有元素。我的代码如下所示：

$("[id='dialog_element']").not("#dialog_parent>#dialog_element").remove();

为了兼容 IE7（可能是所有 IE7+），我删除了这些寄生虫元素

【讨论】：