質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1637閲覧

<canvas>要素に描画するのに、なぜ<head>要素内ではだめなのか

Avenue

総合スコア7

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/12/23 15:46

編集2017/12/23 16:05

###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

以上です。
よろしくおねがいします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

このようにすれば動きます。

<script> window.addEventListener('load', function() { // ここにソースコードを書く }); </script>

ソースコードの全文です。

<!doctype html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script> <script> window.addEventListener('load', function() { //「月別データ」 var mydata = { labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], datasets: [ { label: '数量', hoverBackgroundColor: "rgba(255,99,132,0.3)", data: [65, 59, 80, 81, 56, 55, 48], } ] }; //「オプション設定」 var options = { title: { display: true, text: 'サンプルチャート' } }; var canvas = document.getElementById('stage'); var chart = new Chart(canvas, { type: 'bar', //グラフの種類 data: mydata, //表示するデータ options: options //オプション設定 }); }); </script> </head> <body> <canvas id="stage"></canvas> </body> </html>

エラーの原因は

  • まだブラウザが <canvas id="stage"></canvas> を読み込んでいないのに
  • document.getElementById('stage') で canvas 要素を取得しているから

です。

null とは「なにもない」ことです。
試しに変更前のソースコードの

var canvas = document.getElementById('stage'); の下の行で console.log(canvas); としてみると canvas 変数が null であることが分かります。

そこで window.addEventListener('load', function() {

canvas要素を含んだhtmlが すべて読み込まれてから コードを実行します。
そうすると canvas 要素が取得できるようになります。

head 内に書いても動かなかった理由は body より head の方が先に読み込まれるから です。
まだ読み込まれていない body 要素の内側の canvas にアクセスしようとしても見つからないと言われてしまいます…

きちんと読んだわけではないので憶測で書きます。
null(なにもない)ものに length というプロパティにアクセスしようとしているから起きています。
なにも持ってないのに、xxx出して!と言われても困ってしまいますよね…

ぜひお試しください。

投稿2017/12/23 16:59

編集2017/12/23 17:11
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Avenue

2017/12/24 03:05

早速のご回答ありがとうございます。 対処法と、簡潔な原因の解説が大変勉強になります。 読み込みの際の問題ということは、htmlを読み込んだ後に動作を指定するタイプの書き方に変えればいいということですね。 jQueryだと $(function(){}); とかでしょうか。 知りたかったことを非常に短期で知ることができたので、ベストアンサーにしておきます。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問