jQuery ajax 加载的 Highcharts IE 问题 [英] Highcharts IE issues with jQuery ajax load

问题描述

我试图在一个页面中显示 x 个不同的 highchart 图表.每个图表都有自己的 .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>

用于加载 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:稍后将使用 DB 输入填充 graphPaths，这就是我必须动态生成图表的原因.图表对象也有唯一的名称.图表生成代码在 $(document).ready().

我正在寻找这样的东西:创建六个具有相同渲染、不同数据的图表(高图)但是我使用了不同的图表，其中示例使用了相同的图表.

有什么建议吗?

解决方案

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

//设置默认cssdoc.createStyleSheet().cssText ='hcv\\:fill, hcv\\:path, hcv\\:shape, hcv\\:stroke' +'{ 行为:url(#default#VML);显示:内联块；} ';

I'm trying to display x number of different highchart graphs in a single page. Each chart has it's own .js option file where it get's data and is configurated. The link to these files are embedded in the charts own HTML file which contains the div it is to be rendered to.

Each of these charts html files are upon request loaded into a div with id of "reportsWindow" through jQuery (see code below)

HTML pages layout:

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

jQuery Code for loading the html pages:

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);
    }});          
}); 

The problem is that when the code runs in IE (all versions) the first chart is not loaded correctly, it is as if the loading and appending are stopped midways, however if I request a load of the reports page a second time both charts are displayed. The charts loads perfectly in FF, Chrome etc.

I have so far tried to delay the $.each() both with the .delay() just before the append and have tried to have the ajax call inside "setTimeout()" without success.

OBS: graphPaths is to be populated on a later date with DB input, and that is the reason why I have to generate the charts dynamically. Also the charts objects have unique names. and the charts generation code is inside $(document).ready().

I'm looking for something like this: Create six chart with the same rendering,different data (highchart ) But I am using different charts where the example is with the same chart.

Any suggestions?

解决方案

Apparently there is an issue with IE when having multiple charts on one page that is loaded dynamically. The problem was solved by removing the following code from the library

// setup default css
        doc.createStyleSheet().cssText =
            'hcv\\:fill, hcv\\:path, hcv\\:shape, hcv\\:stroke' +
            '{ behavior:url(#default#VML); display: inline-block; } ';

这篇关于jQuery ajax 加载的 Highcharts IE 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！