javascript - 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 中

尽管 width和height设置在#daily-chart <div> ，尺寸设置不正确。我只看到图表的一部分，其余部分被隐藏。尽管<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协议(protocol)，PHP版本(不认为这有任何关系)是5.4.29在开发和 5.4.30在产品上。据我所知，这些是唯一的区别。

<小时/>

是什么导致了这个问题？

Answer 1

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

等等。