Bootstrap轮播与morris.js图表​​有冲突吗？ [英] Bootstrap carousel has conflict with morris.js chart?

问题描述

我使用morris.js绘制图表，我想通过bootstrap carousel显示这些图表，但是如果我这样做，Firefox会停止响应。他们可以单独工作，但如果放在一起会崩溃。萤火虫告诉我有关拉斐尔图书馆的事情，但我仍然无法弄清楚。那里的任何人都遇到类似的问题，并知道如何解决这个问题？

这是我的代码的一部分。

 < div id =myCarouselclass =carousel slide> 
 
< li data-target =＃myCarouseldata-slide-to =0class =active>< / li> 
< li data-target =＃myCarouseldata-slide-to =1>< / li> 
< li data-target =＃myCarouseldata-slide-to =2>< / li> 
< / ol> 
 <！ - 传送带物品 - > 
< div class =carousel-inner> 
< div class =活动项目> 
< div id =A-lineChartstyle =height：250px;>< / div> 
< / div> 
< div class =item> 
< div id =B-lineChartstyle =height：250px;>< / div> 
< / div> 
< div class =item> 
< div id =C-lineChartstyle =height：250px;>< / div> 
< / div> 
< / div> 
<！ -  Carousel nav  - > 
< a class =carousel-control lefthref =＃myCarouseldata-slide =prev>& lsaquo;< / a> 
< a class =carousel-control righthref =＃myCarouseldata-slide =next>& rsaquo;< / a> 
< / div> 
 
< script> 
 $（'。carousel'）。carousel（{
 interval：1000 
}）; 
 $ b $ .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'：日期，'B'：B}; 
 BData.push（col）; 
 col = {'date'：date，'C'：C}; 
 CData.push（col） ; 
} 
 new Morris.Line（{
元素：'A-lineChart'，
 data：AData，
 xkey：'date'，
 ykeys：['A']，
 labels：['A'] 
}）; 
 new Morris.Line（{
 element： B-lineChart'，
 data：BData，
 xkey：'date'，
 ykeys：['B']，
标签：['B'] 
 }）; 
新的Morris.Line（{
元素：'C-lineChart'，
 data：CData，
 xkey：'date'，
 ykeys：['C' ]，
标签：['C'] 
}）; 
 
} 
}）; 
 
< / script> 
  

解决方案

这与使用选项卡时相同。我假设第一张图显示出来（如果没有，你可能会有多个问题），但是一旦它们在传送带中被调用，它们之后的图都不会显示。这些图表是在document.ready上绘制的，但由于它们在旋转木马中，因此它们不会被绘制，因为它们是显示的：无需调用。

这已经在另一个线程。

您必须使用 .redraw（）在这里查看工作小提琴： http://jsfiddle.net/b3rgstrom/vbfzr/

您应该能够根据您在我提供的资源中找到的内容拼凑出某些东西。我希望这有助于！

I am using morris.js to plot charts and I would like to show these charts by bootstrap carousel, however Firefox stops responding if I do so. They can work well separately but will crash if being put together. firebug told me there is something to do with Raphael library, but I still cannot figure out. Anyone out there had bumped into the similar problem and know how to solve this? Thanks.

Here is part of my code.

<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>

解决方案

This is the same issue as when using tabs. I would assume that the first graph shows up (if not, you may have multiple issues), but none of the graphs after that render once they are called upon in the carousel. The charts are drawn on document.ready, but since they are in a carousel they are not drawn because they are display:none until called upon.

This has been solved in another thread.

You'll have to put together a function that uses .redraw() See working fiddle here: http://jsfiddle.net/b3rgstrom/vbfzr/

You should be able to piece together something based off of what you find in the resources I provided. I hope this helps!

这篇关于Bootstrap轮播与morris.js图表​​有冲突吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！