Chart.js를 Thymeleaf x SpringBoot로
Chart.js를 Thymeleaf에서 사용
Chart.js 을 Thymeleaf 로 사용하려고 했을 때, 어때? 그래서 메모 쓰기
꺾은선형 그래프로 하고 싶은 값을 컨트롤러로 준비해, 뷰로 표시할 뿐의 샘플입니다.
컨트롤러
뷰에 전달할 값을 Model에 저장합니다.
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class Chart {
@RequestMapping("/chart")
// ビュー側にグラフで使う値を渡すためにModelを引数にとっておきます。
public String hello(Model model) {
// グラフの横軸と縦軸の値を、それぞれString、int型の配列に格納しておきます。
// 横軸
// ラベルです。String型の配列に、適当に値を入れておきます。
String label[] = {"a","b","c","d","e","f","g"};
// 縦軸
// 具体的な値です。int型で、この値も適当です。
int point[] = {5,3,7,1,8,3,4,};
// Modelに格納します。ビュー側でグラフ用の配列を受け取れるようにしておきます。
model.addAttribute("label",label);
model.addAttribute("point",point);
return "chart";
}
}
뷰측
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<title>折れ線グラフサンプル</title>
</head>
<body>
<canvas id="ChartDemo"></canvas>
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var ctx = document.getElementById("ChartDemo").getContext('2d');
var ChartDemo = new Chart(ctx, {
type: 'line',
data: {
// コントローラーで格納したlabelを変数式で取り出すだけ。
labels: /*[[ ${label} ]]*/,
datasets: [
{
label: "Chart-1",
borderColor: 'rgb(255, 0, 0)',
lineTension: 0,
fill: false,
// 上記と同様、pointを変数式で取り出しているだけです。
data: /*[[ ${point} ]]*/,
},
]
},
options: {
responsive: true,
}
});
/*]]>*/
</script>
</body>
</html>
실행해 보았습니다.
참고
Thymeleaf 버전 2.1.4의 기능 메모
Thymeleaf 치트 시트
Reference
이 문제에 관하여(Chart.js를 Thymeleaf x SpringBoot로), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tf-tky/items/49cee83229d1294e4de2
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class Chart {
@RequestMapping("/chart")
// ビュー側にグラフで使う値を渡すためにModelを引数にとっておきます。
public String hello(Model model) {
// グラフの横軸と縦軸の値を、それぞれString、int型の配列に格納しておきます。
// 横軸
// ラベルです。String型の配列に、適当に値を入れておきます。
String label[] = {"a","b","c","d","e","f","g"};
// 縦軸
// 具体的な値です。int型で、この値も適当です。
int point[] = {5,3,7,1,8,3,4,};
// Modelに格納します。ビュー側でグラフ用の配列を受け取れるようにしておきます。
model.addAttribute("label",label);
model.addAttribute("point",point);
return "chart";
}
}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<title>折れ線グラフサンプル</title>
</head>
<body>
<canvas id="ChartDemo"></canvas>
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var ctx = document.getElementById("ChartDemo").getContext('2d');
var ChartDemo = new Chart(ctx, {
type: 'line',
data: {
// コントローラーで格納したlabelを変数式で取り出すだけ。
labels: /*[[ ${label} ]]*/,
datasets: [
{
label: "Chart-1",
borderColor: 'rgb(255, 0, 0)',
lineTension: 0,
fill: false,
// 上記と同様、pointを変数式で取り出しているだけです。
data: /*[[ ${point} ]]*/,
},
]
},
options: {
responsive: true,
}
});
/*]]>*/
</script>
</body>
</html>
Reference
이 문제에 관하여(Chart.js를 Thymeleaf x SpringBoot로), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tf-tky/items/49cee83229d1294e4de2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
