1

我有这张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">.

在火狐中

脚本变得忙碌或根本没有响应。我收到以下消息：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在 dev 和5.4.30prod 上。据我所知，这些是唯一的区别。

是什么导致了这个问题？

4

2 回答 2

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>

等等。

于 2017-07-12T06:45:50.533 回答
0

请参阅此处：脚本在 firefox 中使用 morris.js 不再回答任何错误

只需添加属性

parseTime: false

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

于 2018-01-15T14:00:29.677 回答