morris.js图表​​不适用于生产服务器

时间:2014-08-28 13:55:51

标签: javascript raphael morris.js dev-to-production

我有这个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。据我所知,这是唯一的区别。


导致问题的原因是什么?

2 个答案:

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

创建时到你的莫里斯图表。