3

Я использую morris.js для построения графиков, и я хотел бы показать эти диаграммы карусельной загрузкой, однако Firefox перестает отвечать, если я это сделаю. Они могут работать хорошо по отдельности, но будут разбиваться, если их собрать вместе. firebug сказал мне, что есть что-то делать с библиотекой Рафаэля, но я все еще не могу понять. Кто-то там столкнулся с подобной проблемой и знает, как это решить? Благодарю.Кассета Bootstrap имеет конфликт с графиком morris.js?

Это часть моего кода.

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

То же самое произошло, когда я попытался использовать вкладку. Я думаю, проблема в том, что скрытая/отображаемая диаграмма ... но на самом деле не знаю, как исправить .... –

+1

Можете ли вы опубликовать пример json, возвращенный вашим вызовом AJAX, чтобы я мог проверить это? – asgallant

+0

Вы разрешили это? @GigiWu Тот же вопрос здесь, но с Slick. – Ben

ответ

1

Это та же проблема, что и при использовании вкладок. Я бы предположил, что появляется первый график (если нет, у вас может быть несколько проблем), но ни один из графиков после этого не отображается, как только они вызываются в карусели. Графики нарисованы на document.ready, но поскольку они находятся в карусели, они не нарисованы, потому что они отображаются: до тех пор, пока не будут вызваны.

Это решение было разрешено в another thread.

Вы должны собрать функцию, которая использует .redraw() См рабочую скрипку здесь: http://jsfiddle.net/b3rgstrom/vbfzr/

Вы должны быть в состоянии собрать вместе что-то на основе от того, что вы найдете в ресурсах, предоставленных мной. Надеюсь, это поможет!

+1

Ах! Я борюсь с той же проблемой в карусели Слайка. Уверен, что jsfiddle все еще активна ... Ну ладно. @Mussser – Ben

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>

сохраняя активный класс только для одного элемента удалить класс от остальных.