Bootstrap 轮播与 morris.js 图表有冲突？答案

【问题标题】：Bootstrap carousel has conflict with morris.js chart?Bootstrap 轮播与 morris.js 图表有冲突？
【发布时间】：2013-07-25 08:00:12
【问题描述】：

我正在使用 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>

【问题讨论】：

当我尝试使用标签时发生了同样的事情。我认为问题在于隐藏/显示图表....但真的不知道如何解决....
您能否发布一个由您的 AJAX 调用返回的 json 示例，以便我进行测试？
您解决了吗？ @GigiWu 这里有同样的问题，但使用 Slick。

标签： twitter-bootstrap raphael google-visualization carousel morris.js

【解决方案1】：

这与使用标签时的问题相同。我会假设第一个图表会显示（如果没有，您可能会遇到多个问题），但是一旦在轮播中调用它们之后的所有图表都不会呈现。这些图表是在 document.ready 上绘制的，但由于它们在轮播中，因此它们不会被绘制，因为它们是 display:none，直到被调用。

这已在another thread 中解决。

您必须组合一个使用 .redraw() 的函数，请参阅此处的工作小提琴：http://jsfiddle.net/b3rgstrom/vbfzr/

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

【讨论】：

啊！我在 Slick carousel 中遇到了同样的问题。当然希望jsfiddle仍然活跃......哦，好吧。 @Mussser

【解决方案2】：

这不是完美的解决方案，但它会起作用。插入活动类到 <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>

只为一个项目保留活动类，从其余项目中删除该类。

【讨论】：