2012-06-05 3 views
1

Я пытаюсь отобразить x число разных графиков в одной странице. Каждый график имеет собственный файл .js, где он получает данные и настраивается. Ссылка на эти файлы встроена в собственный HTML-файл диаграмм, который содержит div, для которого он будет отображаться.Проблемы с Highcharts IE с загрузкой jQuery ajax

Каждый из этих графиков HTML файлы являются по запросу загруженным в DIV с идентификатором «reportsWindow» через JQuery (см код ниже)

HTML страницы макета:

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

JQuery код для загрузки HTML страницы:

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 (все версии) первая диаграмма не загружена правильно, это как если загрузка и appendi ng останавливаются в середине, но если я запрошу загрузку страницы отчетов, второй раз отображаются обе диаграммы. Таблицы загружаются отлично в FF, Chrome и т. Д.

Я до сих пор пытался отложить $ .each() как .delay() перед добавлением и попытался вызвать вызов ajax внутри «setTimeout»()" безуспешно.

OBS: graphPaths должен быть заполнен позднее с вводом DB, и именно поэтому я должен динамически генерировать диаграммы. Также объекты диаграмм имеют уникальные имена. и код генерации диаграмм находится внутри $ (document) .ready().

Я ищу что-то вроде этого: Create six chart with the same rendering,different data (highchart) Но я использую разные диаграммы, где приведен пример с одной диаграммой.

Любые предложения?

ответ

1

Очевидно, что существует проблема с IE при наличии нескольких диаграмм на одной странице, загружаемой динамически. Данная проблема была решена, удалив следующий код из библиотеки.

// setup default css 
     doc.createStyleSheet().cssText = 
      'hcv\\:fill, hcv\\:path, hcv\\:shape, hcv\\:stroke' + 
      '{ behavior:url(#default#VML); display: inline-block; } '; 
Смежные вопросы