前提・実現したいこと
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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/18 12:31
2018/11/18 12:36
2018/11/18 13:02
退会済みユーザー
2018/11/18 13:32