1

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) しかし、例が同じグラフである場合、私は異なるグラフを使用しています。

助言がありますか?

4

1 に答える 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 に答える