x個の異なるハイチャートグラフを1ページに表示しようとしています。各チャートには、データを取得して構成する独自の.jsオプションファイルがあります。これらのファイルへのリンクは、レンダリング先のdivを含むチャート独自のHTMLファイルに埋め込まれています。
これらの各チャートのhtmlファイルは、リクエストに応じて、jQueryを介して「reportsWindow」のIDを持つ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には、後日DB入力が入力される予定です。そのため、グラフを動的に生成する必要があります。また、チャートオブジェクトには一意の名前が付いています。チャート生成コードは$(document).ready()内にあります。
私は次のようなものを探しています:同じレンダリング、異なるデータで6つのグラフを作成します(highchart) しかし、例が同じグラフである場合、私は異なるグラフを使用しています。
助言がありますか?