3

グラフをプロットするために morris.js を使用しています。これらのグラフをブートストラップ カルーセルで表示したいのですが、そうすると Firefox が応答しなくなります。それらは別々にうまく機能しますが、一緒にするとクラッシュします。firebug は、Raphael ライブラリと関係があると言いましたが、まだわかりません。同様の問題に遭遇したことがあり、これを解決する方法を知っている人はいますか? ありがとう。

これが私のコードの一部です。

<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
    <div class="active item">
        <div id="A-lineChart" style="height:250px;"></div>
    </div>
    <div class="item">
        <div id="B-lineChart" style="height:250px;"></div>
    </div>
    <div class="item">
        <div id="C-lineChart" style="height:250px;"></div>
    </div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

<script>
$('.carousel').carousel({
    interval: 1000
});

$.post('/my/handler.json',{ 
    parameter:value},
    function(data){
    if(data.hasOwnProperty('error')){
        alert('error');
    }
    else{
        var r = data['results']
        var AData = new Array();
        var BData = new Array();
        var CData = new Array();
        for(var i = 0; i < r.length; i++){
            d = r[i];
            col = {'date':date, 'A': A};
            AData.push(col);
            col = {'date':date, 'B': B};
            BData.push(col);
            col = {'date':date, 'C': C};
            CData.push(col);
        }
        new Morris.Line({
            element: 'A-lineChart',
            data: AData,
            xkey: 'date',
            ykeys: ['A'],
            labels: ['A']
        });
        new Morris.Line({
            element: 'B-lineChart',
            data:BData,
            xkey:'date',
            ykeys:['B'],
            labels:['B']
        });
        new Morris.Line({
            element: 'C-lineChart',
            data:CData,
            xkey:'date',
            ykeys:['C'],
            labels:['C']
        });

    }
});

</script>
4

2 に答える 2

1

これは、タブを使用する場合と同じ問題です。最初のグラフが表示されると思いますが (そうでない場合は、複数の問題がある可能性があります)、カルーセルで呼び出されると、その後のグラフはレンダリングされません。グラフは document.ready で描画されますが、カルーセルにあるため、呼び出されるまで display:none であるため描画されません。

これは別のスレッドで解決されました。

.redraw()ここで作業フィドルを参照してください: http://jsfiddle.net/b3rgstrom/vbfzr/

私が提供したリソースで見つけたものに基づいて、何かをつなぎ合わせることができるはずです. これが役立つことを願っています！

于 2014-04-11T18:45:35.433 に答える
0

これは完璧な解決策ではありませんが、うまくいきます。アクティブなクラスを 挿入<div class="item active" id="graphElemnt>

次に、そのクラス「アクティブ」を削除します

<script type="text/javascript"> $(document).ready(function () { setTimeout(function () { $('#graphElemnt').removeClass("active"); //your code to be executed after 1 seconds }, 5000); }) </script>

アクティブなクラスを 1 つのアイテムだけに保持すると、そのクラスを残りのアイテムから削除できます。

于 2015-02-24T11:49:37.530 に答える