chart.jsのhtmlとjavascriptの呼び出しについて

chart.jsのhtmlとjavascriptの呼び出しについてに質問です。
下記のようにHTML内にJavaScriptを書き込む場合はグラフが表示されるのですが。
見えにくくするのを避けるためファイルを分けたのですがグラフが表示されなくなりました。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
5<meta charset="UTF-8">
6</head>
7<body>
8<canvas id="myChart" width="400" height="400"></canvas>
9<script>
10var ctx = document.getElementById('myChart').getContext('2d');
11var myChart = new Chart(ctx, {
12    type: 'bar',
13    data: {
14        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
15        datasets: [{
16            label: '# of Votes',
17            data: [12, 19, 3, 5, 2, 3],
18            backgroundColor: [
19                'rgba(255, 99, 132, 0.2)',
20                'rgba(54, 162, 235, 0.2)',
21                'rgba(255, 206, 86, 0.2)',
22                'rgba(75, 192, 192, 0.2)',
23                'rgba(153, 102, 255, 0.2)',
24                'rgba(255, 159, 64, 0.2)'
25            ],
26            borderColor: [
27                'rgba(255, 99, 132, 1)',
28                'rgba(54, 162, 235, 1)',
29                'rgba(255, 206, 86, 1)',
30                'rgba(75, 192, 192, 1)',
31                'rgba(153, 102, 255, 1)',
32                'rgba(255, 159, 64, 1)'
33            ],
34            borderWidth: 1
35        }]
36    },
37    options: {
38        scales: {
39            yAxes: [{
40                ticks: {
41                    beginAtZero: true
42                }
43            }]
44        }
45    }
46});
47</script>
48<script type='text/javascript' src='js/custom.js'></script>
49</body>
50</html>

ファイルを分けるパターン

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
5<meta charset="UTF-8">
6</head>
7<body>
8<canvas id="myChart" width="400" height="400"></canvas>
9<script type='text/javascript' src='js/custom.js'></script>
10</body>
11</html>

JavaScript
1var ctx = document.getElementById('myChart').getContext('2d');
2var myChart = new Chart(ctx, {
3    type: 'bar',
4    data: {
5        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
6        datasets: [{
7            label: '# of Votes',
8            data: [12, 19, 3, 5, 2, 3],
9            backgroundColor: [
10                'rgba(255, 99, 132, 0.2)',
11                'rgba(54, 162, 235, 0.2)',
12                'rgba(255, 206, 86, 0.2)',
13                'rgba(75, 192, 192, 0.2)',
14                'rgba(153, 102, 255, 0.2)',
15                'rgba(255, 159, 64, 0.2)'
16            ],
17            borderColor: [
18                'rgba(255, 99, 132, 1)',
19                'rgba(54, 162, 235, 1)',
20                'rgba(255, 206, 86, 1)',
21                'rgba(75, 192, 192, 1)',
22                'rgba(153, 102, 255, 1)',
23                'rgba(255, 159, 64, 1)'
24            ],
25            borderWidth: 1
26        }]
27    },
28    options: {
29        scales: {
30            yAxes: [{
31                ticks: {
32                    beginAtZero: true
33                }
34            }]
35        }
36    }
37});

ファイルを分ける際は何か特別な事をしないといけないのでしょうか？
わかる方教えてください。
よろしくお願いいたします。

kei344

2020/02/27 03:54

エラーは出ていませんか？デベロッパーツールで確認してみてください。https://eng-entrance.com/javascript-display-error

yureighost

2020/02/27 03:58

確認しましたが少なくとも提示されているソースのみ(Javascriptはcustom.jsに書き込む)で動作させるなら不具合はなくグラフが描き出されています。デベロッパーツールとかで何かエラーが出力されているとかはないのでしょうか。

Mario_11

2020/02/27 04:06

パス指定がしっかりしていませんでした。確認ミスでのお騒がせ申し訳ありませんでした。デベロッパーツール知らなかったのでとても勉強になりました！ありがとうございます！

kei344

2020/02/27 04:09

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。

Mario_11

2020/02/27 04:09

了解です！！

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

回答1件

自己解決

パスの指定がしっかりできていなかったためエラーが出ました。

error
1Failed to load resource: the server responded with a status of 404 (NOT FOUND)

html
1<script type='text/javascript' src='js/custom.js'></script>
2```↓↓改善↓↓
3```html
4<script type='text/javascript' src='static/js/custom.js'></script>
5