我有这个morris.js
图表,我填充了随机值(示例中提供的图表)。虽然它在localhost
中呈现完美,但一旦我在生产服务器上传它就不再有效了。
JS代码
new Morris.Line({
element: 'daily-chart',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});
HTML代码
<div id="daily-chart" style="height: 350px; width: 1000px">
</div>
在Chrome / Opera中
尽管width
height
中设置了#daily-chart
和<div>
,但维度设置不正确。我只看到图表的一部分,其余部分被隐藏。尽管有<div id="daily-chart" style="height: 350px; width: 1000px">
,但它的宽度约为50像素。
在Firefox中
脚本忙或根本没有响应。我收到以下消息:A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete.
选项Continue|Stop script
,浏览器冻结。它声明该行是1164
,它是一个while条件:
while ((t = d.getTime()) <= dmax) { // <-- 1164 line
if (t >= dmin) {
ret.push([spec.fmt(d), t]);
}
spec.incr(d);
}
控制台中没有错误或任何错误,除非我停止脚本所在的地方:
Error: Script terminated by timeout at:
Morris.labelSeries@https://<url>/js/uncompressed/morris.js:1164:1
Morris.Line</Line.prototype.drawXAxis@https://<url>/js/uncompressed/morris.js:930:11
Morris.Line</Line.prototype.draw@https://<url>/js/uncompressed/morris.js:890:9
Morris.Grid</Grid.prototype.redraw@https://<url>/js/uncompressed/morris.js:472:9
Morris.Grid</Grid.prototype.setData@https://<url>/js/uncompressed/morris.js:338:9
Grid@https://<url>/js/uncompressed/morris.js:102:7
Line@https://<url>/js/uncompressed/morris.js:726:7
Line@https://<url>/js/uncompressed/morris.js:724:9
@https://<url>/<path/to/webpage>:1171:9
生产服务器使用HTTPS协议和PHP版本(根本不相信这是相关的)在开发时为5.4.29
,在prod上为5.4.30
。据我所知,这是唯一的区别。
导致问题的原因是什么?
答案 0 :(得分:0)
如果您仍在尝试找出解决方案,请确保检查已链接的所有样式表以及jquery插件的链接。
例如:
<link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
应替换为
<link href="https://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
等等。
答案 1 :(得分:0)
见这里:Script isn't answering any more error using morris.js in firefox
只需添加属性
即可parseTime: false
创建时到你的莫里斯图表。