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 回答