1

我正在尝试在单个页面中显示 x 个不同的高图。每个图表都有自己的 .js 选项文件，它可以在其中获取数据并进行配置。这些文件的链接嵌入在图表自己的 HTML 文件中，该文件包含要呈现到的 div。

这些图表 html 文件中的每一个都根据请求通过 jQuery 加载到 id 为“reportsWindow”的 div 中（参见下面的代码）

HTML页面布局：

<script type="text/javascript" src="/graf/revenue/revenueGraphScript.js"></script>
<div class="clear">
    <div id="revenue" style="width: 600px; height: 200px;"></div>
</div>

用于加载 html 页面的 jQuery 代码：

var graphPaths = {
    'revChart': '/graf/revenue/revenueChart.html',
    'revDisChart': '/graf/revenueDistribution/revenueDistributionChart.html'
}

$.each(graphPaths, function(index, value){  
    $.ajax({url: value, dataType: "html", success: function(data){
        $('#reportsWindow').append(data);
    }});          
});

问题是，当代码在 IE（所有版本）中运行时，第一个图表未正确加载，就好像加载和附加在中途停止，但是如果我第二次请求加载报告页面，两个图表都是显示。图表在 FF、Chrome 等中完美加载。

到目前为止，我已经尝试在追加之前使用 .delay() 来延迟 $.each()，并尝试在“setTimeout()”内进行 ajax 调用，但没有成功。

OBS：graphPaths 将在以后使用数据库输入填充，这就是我必须动态生成图表的原因。图表对象也有唯一的名称。图表生成代码在 $(document).ready() 中。

我正在寻找这样的东西：创建六个具有相同渲染、不同数据的图表（highchart） 但我使用不同的图表，示例使用相同的图表。

有什么建议么？

4

1 回答 1

1

显然，在动态加载的一页上有多个图表时，IE 存在问题。通过从库中删除以下代码解决了该问题

// setup default css
        doc.createStyleSheet().cssText =
            'hcv\\:fill, hcv\\:path, hcv\\:shape, hcv\\:stroke' +
            '{ behavior:url(#default#VML); display: inline-block; } ';
于 2012-06-08T12:44:43.617 回答