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

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

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

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

JavaScript

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

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

Q&A

解決済

1回答

4990閲覧

Springで作ったWebアプリケーションにChart.jsでグラフを表示させようとしたが表示されない

G-ym

総合スコア16

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

JavaScript

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

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

0グッド

0クリップ

投稿2018/11/18 10:55

編集2018/11/18 12:29

前提・実現したいこと

SpringBootで作っているWebアプリケーションの画面に
Chart.jsでグラフを表示させようとしています。
テンプレートエンジンにはthymeleafを使っています。

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

エディターのライブプレビュー機能で確認したときは正常にグラフが表示されました。
しかし、EclipseでSpringBootを起動して、グラフを表示させる画面を見たところ、
グラフが表示されませんでした。

Google ChromeでF12ボタンの検証機能を使ってConsoleを確認したところ

Uncaught ReferenceError: Chart is not defined at assetGlaf:57

と書かれていました。
assetGlaf.htmlは40行しかないので原因がわかりません。

該当のソースコード

assetGlaf.html

HTML

1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> 3 4<head> 5 <meta charset="UTF-8"> 6 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script> 7</head> 8 9<body> 10 <div th:fragment="assetGlaf_contents"> 11 <div class="page-header"> 12 <h1>月々の資産グラフ</h1> 13 </div> 14 <div> 15 <canvas id="assetGlaf"></canvas> 16 <script type="text/javascript"> 17 var ctx = document.getElementById("assetGlaf").getContext('2d'); 18 var myChart = new Chart(ctx, { 19 type: 'bar', 20 data: { 21 labels: ["M", "T", "W", "R", "F", "S", "S"], 22 datasets: [{ 23 label: 'apples', 24 data: [12, 19, 3, 17, 28, 24, 7], 25 backgroundColor: "rgba(153,255,51,1)" 26 27 }, { 28 label: 'oranges', 29 data: [30, 29, 5, 5, 20, 3, 10], 30 backgroundColor: "rgba(255,153,0,1)" 31 }] 32 } 33 }); 34 35 </script> 36 </div> 37 </div> 38</body> 39 40</html> 41

homeLayout.html

html

1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"> 3 4<head> 5 <meta charset="UTF-8"> 6 <link th:href="@{/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css}" rel="stylesheet"> 7 <script th:src="@{/webjars/jquery/1.11.1/jquery.min.js}"></script> 8 <script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script> 9 <link th:href="@{/css/home.css}" rel="stylesheet"> 10 <title>Home</title> 11</head> 12 13<body> 14 <!--ナビゲーションバー--> 15 <nav class="navbar navbar-inverse navbar-fixed-top"> 16 <div class="container-fluid"> 17 <div class="navbar-header"> 18 <a class="navbar-brand" href="#">MonthlyCost</a> 19 </div> 20 <form method="post" th:action="@{/logout}"> 21 <button class="btn btn-link pull-right navbar-brand" type="submit">ログアウト</button> 22 </form> 23 </div> 24 </nav> 25 <!--サイドバー--> 26 <div class="container-fluid"> 27 <div class="row"> 28 <div class="col-sm-2 sidebar"> 29 <ul class="nav nav-pills nav-stacked"> 30 <li role="presentation"><a th:href="@{'/userList'}">ユーザ管理</a> 31 </li> 32 <li role="presentation"><a th:href="@{'/home'}">ホーム</a> 33 </li> 34 <li role="presentation"><a th:href="@{'/assetRegist'}">資産登録</a> 35 </li> 36 <li role="presentation"><a th:href="@{'/assetList'}">資産一覧</a> 37 </li> 38 <li role="presentation"><a th:href="@{'/assetGlaf'}">月々の資産グラフ</a> 39 </li> 40 41 </ul> 42 </div> 43 </div> 44 </div> 45 <!--コンテンツ--> 46 <div class="container-fluid"> 47 <div class="row"> 48 <div class="col-sm-10 col-sm-offset-2 main"> 49 <div th:include="__${contents}__"></div> 50 </div> 51 </div> 52 </div> 53</body> 54 55</html> 56

java

1@Controller 2public class AssetGrafController { 3 4 @Autowired 5 AssetService assetService; 6 7 @GetMapping("/assetGlaf") 8 public String getAssetGlaf(Model model,Principal principal) { 9 model.addAttribute("contents", "asset/assetGlaf :: assetGlaf_contents"); 10 return "home/homeLayout"; 11 } 12} 13

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

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

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

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

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

guest

回答1

0

ベストアンサー

記載されたコードを chart.html とし、このhtmlテンプレートを 以下のController経由で出力したところ特に問題なく出力されました。

java

1import org.springframework.stereotype.Controller; 2import org.springframework.web.bind.annotation.GetMapping; 3 4@Controller 5public class ChartController { 6 7 @GetMapping("chart") 8 public String display() { 9 return "chart"; 10 } 11 12}

リクエストURLにマッピングされているControllerならびにViewの名前とテンプレートがあっているかを念のため確認されると良いでしょうか。

投稿2018/11/18 12:18

A-pZ

総合スコア12011

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

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

G-ym

2018/11/18 12:31

assetGlaf.htmlの <h1>月々の資産グラフ</h1> は表示されるので、Controller、Viewの名前とテンプレートはおそらく正しいと思います。
A-pZ

2018/11/18 12:36

homelayoutを画面として表示しているようですので、asserGlaf.htmlが直接呼び出されていませんよね。 assertGlaf.htmlで出力しているグラフは、<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script> がないと表示できませんし、includeはfragmentで指定したタグの中しか出力されません。
G-ym

2018/11/18 13:02

homeLayout.htmlにChart.jsを指定したら表示されました。ありがとうございます!
退会済みユーザー

退会済みユーザー

2018/11/18 13:32

クロームの開発ツールででた行数はソースを見るでHTML化シたものを見るか 開発ツールのエラーのリンク部分を押すと見れますがサーバー上のソースは見れませんのであしからず(表示のためにダウンロードされたもののみ見れる)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問