ランダムな値(例で提供されているもの)を入力したこの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>
寸法が正しく設定されていません。チャートの一部しか表示されず、残りは非表示になっています。にもかかわらず、幅は約50pxです<div id="daily-chart" style="height: 350px; width: 1000px">
。
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
dev と5.4.30
prod にあります。私の知る限り、これらは唯一の違いです。
問題の原因は何ですか?