[html]thymeleaf chart.js 적용방법
controller 에서
List<Map<Object,Object>> dataPoints1 = new ArrayList<Map<Object,Object>>();
Map<Object , Object> map1 = new HashMap<Object,Object>();
map1.put("label", "Chrome");
map1.put("y", 51.08);
dataPoints1.add(map1);
Map<Object , Object> map2 = new HashMap<Object,Object>();
map2.put("label", "Internet Explorer");
map2.put("y", 27.34);
dataPoints1.add(map2);
Map<Object , Object> map3 = new HashMap<Object,Object>();
map3.put("label", "Firefox");
map3.put("y", 10.62);
dataPoints1.add(map3);
// chart
mv.addObject("dataPointsList", dataPoints1);
이런식으로 데이터가 넘어온다고 하고...
html 상에서
<script th:inline="javascript">
window.onload = function() {
// 서버에서 넘어온 값을 스크립트에 넣어주고~
var dataPointsList = [[${dataPointsList}]];
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2", // "light1", "light2", "dark1", "dark2"
exportEnabled: true,
animationEnabled: true,
title: {
text: "Desktop Browser Market Share in 2016"
},
data: [{
type: "pie",
startAngle: 25,
toolTipContent: "<b>{label}</b>: {y}%",
showInLegend: "true",
legendText: "{label}",
indexLabelFontSize: 16,
indexLabel: "{label} - {y}%",
dataPoints: []
}]
});
chart.options.data[0].dataPoints = dataPointsList;
chart.render();
}
</script>
<script th:inline="javascript"> -> 적용 시켜야지만 동작한다.. 기억해야한다..
[참조] https://canvasjs.com/forums/topic/spring-mvc-with-thymeleaf/
Spring MVC with Thymeleaf | CanvasJS Charts
I have tried to implement one of the Spring MVC examples. Unfortunately, these examples use JSP which is not recommended by Spring and setting up the IDE for JSP development is not straightforward. I was wondering if there is an example using Thymeleaf as
canvasjs.com