Webサイトにmorrisを使ってグラフを表示したい

前提・実現したいこと

開発環境:Raspbian GNU/Linux 10
MariaDBのデータをWebでグラフ化して表示したい
htmlのプログラムはTemplate-Partyさんからお借りしてます
morrisというものを使うといいとネットで見て、jqueryとmorris関連をvar/www/js/にダウンロードしました
$ ls /var/www/js/
Gruntfile.js bower.travis.json less morris.js spec
README.md examples lib morris.min.js
bower.json jquery-3.4.1.min.js morris.css package.json

その後いろんなサイトを見ながら読み込む記述を書きましたが正直まったく分かりません。(cssとか？)

とりあえずグラフが表示できるようにしたいです。

発生している問題・エラーメッセージ

about.html:13 GET http://192.168.224.220/css/morris.css net::ERR_ABORTED 404 (Not Found)
about.html:15 GET http://192.168.224.220/js/jquery-3.4.1.min.js net::ERR_ABORTED 404 (Not Found)
about.html:16 GET http://192.168.224.220/js/morris.min.js net::ERR_ABORTED 404 (Not Found)
about.html:15 GET http://192.168.224.220/js/jquery-3.4.1.min.js net::ERR_ABORTED 404 (Not Found)
about.html:16 GET http://192.168.224.220/js/morris.min.js net::ERR_ABORTED 404 (Not Found)
about.html:51 Uncaught SyntaxError: Unexpected end of input
about.html:238 Uncaught ReferenceError: OCwindowWidth is not defined
    at about.html:238

該当のソースコード

html
1//13行目から
2<link type="text/css" rel="stylesheet" href="css/morris.css">
3	<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
4	<script src="js/jquery-3.4.1.min.js"></script>
5	<script type="text/javascript" src="js/morris.min.js"></script>
6//51行目付近
7<script>
8        new Morris.Line({
9            element: 'chart1',
10
11            data :[
12                { x: 0, y: 646, point: "Z1" },
13                { x: 1, y: 1345, point: "Z2" },
14                { x: 2, y: 1135, point: "Z3" },
15                { x: 3, y: 1525, point: "Z4" },
16                { x: 4, y: 941, point: "Z5" },
17                { x: 5, y: 864, point: "Z6" },
18                { x: 6, y: 1160, point: "Z7" },
19                { x: 7, y: 1248, point: "Z8" }
20            ],
21
22            xkey: 'x',
23            ykeys: ['y'],
24            labels: [""],
25            hideHover: true,
26            hoverCallback: function (index, options, content, row) {    
27                return "<strong>X：" + row.x + "<br />Point：" + row.point + "</strong>";
28            },
29            parseTime: false,
30            resize: true
31</script>//51行目
32
33//238行目付近
34<script>
35if (OCwindowWidth() <= 800) {//238行目
36	open_close("menubar_hdr", "menubar-s");
37}
38</script>

試したこと

最初はパス指定でjquery,raphael,morrisを使おうとしてましたが、
見つかりません的なエラーが出たのでダウンロードして使う方法に切り替えました。raphaelは公式サイトにダウンロードする場所が見つからずまだダウンロードしていません。

補足情報（FW/ツールのバージョンなど）

jsをhtmlの下に移動して、jqueryの読み込みだけをしてアラートが出るかのテストをしたらちゃんと出ました。
なので次はmorrisの読み込みだけ追加すると

morris.min.js:6 Uncaught Error: Graph container element not found
    at c.d [as constructor] (morris.min.js:6)
    at new c (morris.min.js:6)
    at about.html:87

というエラーになりました。

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

回答1件

まずは、下記の 404 のエラーを解決してください。

about.html:13 GET http://192.168.224.220/css/morris.css net::ERR_ABORTED 404 (Not Found)
about.html:15 GET http://192.168.224.220/js/jquery-3.4.1.min.js net::ERR_ABORTED 404 (Not Found)
about.html:16 GET http://192.168.224.220/js/morris.min.js net::ERR_ABORTED 404 (Not Found)
about.html:15 GET http://192.168.224.220/js/jquery-3.4.1.min.js net::ERR_ABORTED 404 (Not Found)
about.html:16 GET http://192.168.224.220/js/morris.min.js net::ERR_ABORTED 404 (Not Found)

js ファイルに関しては、

$ ls /var/www/js/

Gruntfile.js bower.travis.json less morris.js spec
README.md examples lib morris.min.js
bower.json jquery-3.4.1.min.js morris.css package.json

で、/var/www/js ディレクトリの中にファイルが有るのはわかりました。

他の関連するファイルは、どこにあるのでしょうか？

about.html は、どこにありますか？

morris.css は、どこにありますか？ /var/www/js にあるようですが、 html では、 css/morris.css と指定しているので、他にもあるのでしょうか？

Web サーバー 192.168.224.220 の DocumentRoot の設定は、/var/www ですか？ Web サーバーの設定を確認してください。

Web サーバーのログも参照して、404 エラーになったファイルを Web サーバーが「どこのファイル」を探しに行っているかを確認ください。
それによって、Webサーバーの設定を変更するかファイルの置き場所を変更するかの対応を行ってください。

投稿2019/12/16 08:01

CHERRY

総合スコア25218

yaoyao

2019/12/17 00:58

ドキュメントルートの確認の仕方が分かっていませんが、192.168.224.220/about.htmlと表示されてるのでvar/www/html/がドキュメントルートかなと思いhtml直下にjsを移動しようとして、htmlに別のjsがあるの見つけました。 $ ls /var/www/html/js Gruntfile.js examples less morris.min.js README.md fixmenu_pagetop.js lib openclose.js bower.json imgchg_pack.js morris.css package.json bower.travis.json jquery-3.4.1.min.js morris.js spec 今は二つのjsまとめてhtml直下に移動させたらそのエラーは消えました。他に使ってるcssはhtmlの下にあったのですがmorri.cssをどこでダウンロードするのか分かりません。現在のエラー↓ ``` morris.min.js:6 Uncaught Error: Graph container element not found at c.d [as constructor] (morris.min.js:6) at new c (morris.min.js:6) at about.html:87 ```

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