我正在尝试在单个页面中显示 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) 但我使用不同的图表,示例使用相同的图表。
有什么建议么?