###MonacaでのChart.jsの読み込みがうまくいきませんでした
Monacaでグラフ表示を行うアプリケーションを作るのに、Chart.jsを使おうと考え
「JavaScriptでグラフ描画入門!全8個のライブラリをコード付きで一挙に解説!(http://paiza.hatenablog.com/entry/2016/06/07/JavaScript%E3%81%A7%E3%82%B0%E3%83%A9%E3%83%95%E6%8F%8F%E7%94%BB%E5%85%A5%E9%96%80%EF%BC%81%E5%85%A8%EF%BC%98%E5%80%8B%E3%81%AE%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%82%92%E3%82%B3%E3%83%BC)」
という、こちらのサイトのサンプルを参考にグラフの表示を行おうとしました。
ですがChart.jsの読み込みの時点でエラーが出てしまい、うまくグラフの描画がされません。
エラーの内容には「null」が書かれています。
また、ここで出ている'e.length'とはなんのことなのでしょうか。
どなたかお答えいただければと思います。
###発生している問題・エラーメッセージ
TypeErr: null is not an object (evaluating 'e.length')
###該当のソースコード
HTML
1 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script> 2 <script> 3 ---ここに下記のコードを記入--- 4 </script> 5</head> 6<body> 7<canvas id="stage"></canvas> 8</body> 9
JavaScript
1//「月別データ」 2var mydata = { 3 labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], 4 datasets: [ 5 { 6 label: '数量', 7 hoverBackgroundColor: "rgba(255,99,132,0.3)", 8 data: [65, 59, 80, 81, 56, 55, 48], 9 } 10 ] 11}; 12 13//「オプション設定」 14var options = { 15 title: { 16 display: true, 17 text: 'サンプルチャート' 18 } 19}; 20 21var canvas = document.getElementById('stage'); 22var chart = new Chart(canvas, { 23 24 type: 'bar', //グラフの種類 25 data: mydata, //表示するデータ 26 options: options //オプション設定 27 28});
###試したこと
「JavaScriptのCanvasが使えません
(https://teratail.com/questions/24781)」
こちらの質問と回答を参考にして、Chart.jsの読み込みを<canvas>要素の下に書き込んでみたところ、エラーも表示されず、正常にグラフが表示されました。
ですが、なぜ<head>要素内で読み込もうとした際にうまく行かなかったのかがわからず、モヤモヤします。
<canvas>と「null」で検索もかけてみましたが詳細が知りたいのでどなたかお教え願います。
###補足情報(言語/FW/ツール等のバージョンなど)
Monaca
HTML5
CSS3
JavaScript
chart.js ver.2.1.4
以上です。
よろしくおねがいします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/24 03:05