我正在使用 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">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</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>
这与使用选项卡时的问题相同。我假设第一个图表显示出来(如果没有,您可能会遇到多个问题),但是一旦在轮播中调用它们,之后的图表就不会呈现。图表是在 document.ready 上绘制的,但由于它们位于轮播中,因此不会绘制它们,因为它们在调用之前是 display:none 。
这已经解决了另一个线程 https://stackoverflow.com/questions/22128708/load-morris-js-graph-in-active-tab-bootstrap.
你必须组合一个使用的函数.redraw()
请参阅此处的工作小提琴:http://jsfiddle.net/b3rgstrom/vbfzr/ http://jsfiddle.net/b3rgstrom/vbfzr/
您应该能够根据我提供的资源中找到的内容拼凑出一些内容。我希望这有帮助!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)