morris.js 图表在生产服务器上不起作用

Question

我有这个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 中

尽管在#daily-chart <div> 中设置了width 和height，但尺寸设置不正确。我只看到图表的一部分，其余部分被隐藏。尽管有<div id="daily-chart" style="height: 350px; width: 1000px">，但宽度约为 50px。

在 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 版本（根本不认为这是相关的）在 dev 上是 5.4.29，在 prod 上是 5.4.30。据我所知，这些是唯一的区别。

---

导致问题的原因是什么？

Answer 1

请看这里：Script isn't answering any more error using morris.js in firefox

只需添加属性

parseTime: false

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

Answer 2

如果您仍在尝试找出解决方案，请确保检查所有已链接的样式表以及 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>

等等。