解決策:javascriptをmorris.js divの後に配置します
Tiraethからのこの投稿から: https://github.com/morrisjs/morris.js/issues/137
このページのチャートを使用しない場合、これを行うことができます:
次のように変更します:before:
if (this.el === null || this.el.length === 0) {
return;
// throw new Error("Graph placeholder not found.");
}
Node.jsフレームワークを使用していたときにこの問題が発生しました。モリスチャートとjqueryを含むスクリプトタグをhtmlファイルの下部から取り出すと、うまくいきました。代わりに、Require.jsを使用して、プロジェクトの依存関係を読み込みます。これがお役に立てば幸いです。
これを試して
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
</head>
<body>
<div id="donut-example"></div>
<script type="text/javascript">
Morris.Donut({
element: 'donut-example',
data: [
{ label: "Download Sales", value: 12 },
{ label: "In-Store Sales", value: 30 },
{ label: "Mail-Order Sales", value: 20 }
]
});
</script>
</div>
</body>
JavaScriptのコードは、DOMに#annual要素が含まれる前に実行されます。 JavaScriptをdivの後に置くか、jQuery.ready()を使用します