chart.jsを用いたグラフが描画されません

お世話になっております。

chart.jsを用いて縦棒グラフを描かせようとしておりますが、描画されません。
参考にしたのはこちらのサイトです。
https://memorva.jp/memo/html/chartjs_bar_chart.php

html
1<!DOCTYPE html>
2<html lang=" ja">
3<head>
4<meta name="viewport" content="width=device-width, initial-scale=1">
5<link rel="stylesheet" media="(min-width:640px)" href="../css/style_pc.css">
6<link href="https://fonts.googleapis.com/css?family=Lato:400,700|Noto+Sans+JP:400,700" rel="stylesheet">
7<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js'></script>
8<style>
9#ex_chart {max-width:640px;max-height:480px;}
10</style>
11<title>縦棒グラフ（1系列2データ）</title>
12</head>
13<header>
14</header>
15<main>
16<canvas id="ex_chart"></canvas>
17<script>
18var ctx = document.getElementById('ex_chart');
19var data = {
20labels:['4月','5月','6月','7月','8月','9月','10月','11月','12月','1月','2月','3月'],
21datasets: [{
22label:'提出数',
23data:[10,20,30,40,50,60,70,80,90,100,110,120],
24backgroundColor:'rgba(255, 100, 100, 1)'
25}]
26};
27var options = {
28scales: {
29yAxes: [{
30ticks: {
31min: 300
32}
33}]
34}
35};
36var ex_chart = new Chart(ctx, {
37type: 'bar',
38data: data,
39options: options
40});
41</script>
42</main>
43<footer>
44</footer>
45</body>
46</html>

括弧の数や位置、スペルミス等は何度も確認しましたので大丈夫だと思います。
どこに不備があってグラフが描画されないのか、有識者の皆様に何卒ご教授頂きたく存じます。
宜しくお願い申し上げます。

行動規範の内容に同意します

回答3件

自己解決

【自己解決】
IEで表示させるならcanvasタグを<div>で挟む

eneko0513様にはグラフが表示され、私だけ表示されないということは、ブラウザが原因ではと考えました。そこで、WINDOW10のIEではなくSleipnir4で読み込ませてみた所、最初のコードでもグラフが表示されました。
試しにcanvasタグを<div></div>で囲ってみた所、驚くべきことにIEでも表示されました。IEでchart.jsを使う際は、canvasタグを<div>で挟むとうまくいくようです。理由は分かりません。

修正前
<canvas id="ex_chart"></canvas>

修正後

尚、qnoir様の指摘である「グラフの最小値」を誤った場合は、縦軸と横軸はしっかり表示されました。

非常に重要な知見を得ることができました。回答・ご教授下さいました皆様、誠に有難うございました。

投稿2021/08/12 00:45

jyansinkai

総合スコア66

</body>がありますが、開始タグが無い気がします。これだけが影響しているかは微妙ですが・・。別の方の回答も踏まえて対応するとこうなりますかね。 https://jsfiddle.net/eneko0513/0c87sjrk/2/ ![![イメージ](a22cf0d9356493669b21d73a37e51e69.png)](fbbe20491f6b6e1f6795ab38df749ba8.png)

html
1<!DOCTYPE html>
2<html lang=" ja">
3<head>
4  <meta name="viewport" content="width=device-width, initial-scale=1">
5  <link rel="stylesheet" media="(min-width:640px)" href="../css/style_pc.css">
6  <link href="https://fonts.googleapis.com/css?family=Lato:400,700|Noto+Sans+JP:400,700" rel="stylesheet">
7  <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js'></script>
8  <style>
9    #ex_chart {max-width:640px;max-height:480px;}
10  </style>
11  <title>縦棒グラフ（1系列2データ）</title>
12</head>
13<header> </header>
14<main> <canvas id="ex_chart"></canvas>
15  <script>
16    var ctx = document.getElementById('ex_chart');
17    var data = {
18    labels:['4月','5月','6月','7月','8月','9月','10月','11月','12月','1月','2月','3月'],
19    datasets: [{
20    label:'提出数',
21    data:[10,20,30,40,50,60,70,80,90,100,110,120],
22    backgroundColor:'rgba(255, 100, 100, 1)'
23    }]
24    };
25    var options = {
26    scales: {
27    yAxes: [{
28    ticks: {
29    min: 0
30    }
31    }]
32    }
33    };
34    var ex_chart = new Chart(ctx, {
35    type: 'bar',
36    data: data,
37    options: options
38    });
39  </script>
40</main>
41<footer> </footer>
42<body>
43</body>
44</html>

投稿2021/08/11 14:46

編集2021/08/11 14:49

eneko0513

総合スコア349

jyansinkai

2021/08/12 00:35

<body>を抜かしていたとは…。ご指摘の通り<body>タグを追加してみましたが、やはり症状は改善されませんでした。

eneko0513

2021/08/12 01:46

自己解決できてよかったです。ワンポイントですが次回からはブラウザ環境についても質問文に記載するようにして下さい。特にIEと最近のブラウザでは挙動が異なる部分がありますので・・。最近のブラウザは多少のエラーでも表示しようとするのでIEと比べられると差異が出ます。

jyansinkai

2021/08/12 03:19

心得ました。重ねてのご教授、誠に有難うございます。しかしそうすると、IEは他のブラウザに比べ性能が劣るということでしょうか…。

eneko0513

2021/08/12 05:38

そうです。まず前提としてMicrosoft公式がサポートを終了しようとしているものです。 >>WebブラウザとしてのIEは（一部を除いて）2022年6月でサポート終了そのため現代の新しいスクリプトなどが使われていたりするページは描画ができなかったり HTMLの構文も解釈できなかったりなどはあります。こちらも参考にどうぞ。 https://ippecoppe.com/browser-recommended/#IEInternet_Explorer

行動規範の内容に同意します

以下の部分で表示上の最小値が300に指定されています。