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

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

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

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

jQuery

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

Raspberry Pi

Raspberry Piは、ラズベリーパイ財団が開発した、名刺サイズのLinuxコンピュータです。 学校で基本的なコンピュータ科学の教育を促進することを意図しています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

1848閲覧

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

yaoyao

総合スコア4

JavaScript

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

jQuery

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

Raspberry Pi

Raspberry Piは、ラズベリーパイ財団が開発した、名刺サイズのLinuxコンピュータです。 学校で基本的なコンピュータ科学の教育を促進することを意図しています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/12/16 04:28

編集2022/01/12 10:55

前提・実現したいこと

開発環境: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

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

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

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

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

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

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

guest

回答1

0

まずは、下記の 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

総合スコア25171

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

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

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 ```
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問