|
|
|
|
@ -43,49 +43,7 @@
|
|
|
|
|
<div class="myChart_wrap">
|
|
|
|
|
<canvas id="myChart1">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="swiper-slide">
|
|
|
|
|
<div class="nutrition_report_graph_txt">
|
|
|
|
|
<#if model['weekly']?has_content>
|
|
|
|
|
<#list model['weekly']! as item>
|
|
|
|
|
<h3>
|
|
|
|
|
<span class="date">${item['reg_dt']!}</span>
|
|
|
|
|
<span class="tit">주간 영양섭취 권장량 대비</span>
|
|
|
|
|
</h3>
|
|
|
|
|
<p class="nd_score">
|
|
|
|
|
<span class="tit">N SCORE</span>
|
|
|
|
|
<span class="score"><strong>${item['totalNutrition']!}</strong> / 100점</span>
|
|
|
|
|
</p>
|
|
|
|
|
<#break>
|
|
|
|
|
</#list>
|
|
|
|
|
</#if>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- myChart1 -->
|
|
|
|
|
<div class="myChart_wrap">
|
|
|
|
|
<canvas id="myChart2">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="swiper-slide">
|
|
|
|
|
<div class="nutrition_report_graph_txt">
|
|
|
|
|
<#if model['monthly']?has_content>
|
|
|
|
|
<#list model['monthly']! as item>
|
|
|
|
|
<h3>
|
|
|
|
|
<span class="date">${item['reg_dt']!}</span>
|
|
|
|
|
<span class="tit">월간 영양섭취 권장량 대비</span>
|
|
|
|
|
</h3>
|
|
|
|
|
<p class="nd_score">
|
|
|
|
|
<span class="tit">N SCORE</span>
|
|
|
|
|
<span class="score"><strong>${item['totalNutrition']!}</strong> / 100점</span>
|
|
|
|
|
</p>
|
|
|
|
|
<#break>
|
|
|
|
|
</#list>
|
|
|
|
|
</#if>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- myChart1 -->
|
|
|
|
|
<div class="myChart_wrap">
|
|
|
|
|
<canvas id="myChart3">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 페이징 -->
|
|
|
|
|
@ -128,32 +86,7 @@
|
|
|
|
|
prevEl: '.swiper-button-prev', // 이번 버튼 클래스명
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 차트 swiper 슬라이더
|
|
|
|
|
new Swiper('.swiper-container2-chart', {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
slidesPerView: 1, // 동시에 보여줄 슬라이드 갯수
|
|
|
|
|
slidesPerGroup: 1, // 그룹으로 묶을 수
|
|
|
|
|
|
|
|
|
|
spaceBetween: 50,
|
|
|
|
|
|
|
|
|
|
// 그룹수가 맞지 않을 경우 빈칸으로 메우기
|
|
|
|
|
// 3개가 나와야 되는데 1개만 있다면 2개는 빈칸으로 채워서 3개를 만듬
|
|
|
|
|
loopFillGroupWithBlank: true,
|
|
|
|
|
|
|
|
|
|
loop: false, // 무한 반복
|
|
|
|
|
|
|
|
|
|
pagination: { // 페이징
|
|
|
|
|
el: '.swiper-pagination',
|
|
|
|
|
clickable: true, // 페이징을 클릭하면 해당 영역으로 이동, 필요시 지정해 줘야 기능 작동
|
|
|
|
|
},
|
|
|
|
|
navigation: { // 네비게이션
|
|
|
|
|
nextEl: '.swiper-button-next', // 다음 버튼 클래스명
|
|
|
|
|
prevEl: '.swiper-button-prev', // 이번 버튼 클래스명
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 그래프 myChart1 */
|
|
|
|
|
var ctx = document.getElementById("myChart1");
|
|
|
|
|
var myChart = new Chart(ctx, {
|
|
|
|
|
@ -279,256 +212,4 @@
|
|
|
|
|
}, //옵션
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/* 그래프 myChart2 */
|
|
|
|
|
var ctx = document.getElementById("myChart2");
|
|
|
|
|
var myChart = new Chart(ctx, {
|
|
|
|
|
type: 'line',
|
|
|
|
|
data: {
|
|
|
|
|
labels: [
|
|
|
|
|
<#if model['weekly']?has_content>
|
|
|
|
|
<#list model['weekly']?reverse as item>
|
|
|
|
|
"${item['reg_dt']!}",
|
|
|
|
|
</#list>
|
|
|
|
|
</#if>
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
|
datasets: [{
|
|
|
|
|
data: [
|
|
|
|
|
<#if model['weekly']?has_content>
|
|
|
|
|
<#list model['weekly']?reverse as item>
|
|
|
|
|
"${item['totalNutrition']!}",
|
|
|
|
|
</#list>
|
|
|
|
|
</#if>
|
|
|
|
|
],
|
|
|
|
|
backgroundColor: 'rgba(255,255,255,0)',
|
|
|
|
|
borderColor: '#e7e7e7',
|
|
|
|
|
cubicInterpolationMode: true,
|
|
|
|
|
pointRadius: '5',
|
|
|
|
|
pointBackgroundColor: ['#fff', '#fff', '#fff', '#fff'],
|
|
|
|
|
pointBorderWidth: '3',
|
|
|
|
|
pointBorderColor: ['#33CC33', '#33CC33', '#33CC33', '#33CC33'],
|
|
|
|
|
borderWidth: '3',
|
|
|
|
|
lineTension: 0,
|
|
|
|
|
/*pointHoverBorderColor: "#30a9d7",*/
|
|
|
|
|
/*pointHoverBackgroundColor: "#30a9d7",*/
|
|
|
|
|
}, ]
|
|
|
|
|
},
|
|
|
|
|
options: {
|
|
|
|
|
|
|
|
|
|
maintainAspectRatio: false,
|
|
|
|
|
legend: {
|
|
|
|
|
display: false,
|
|
|
|
|
labels: {
|
|
|
|
|
fontColor: '#fff'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
layout: {
|
|
|
|
|
padding: {
|
|
|
|
|
left: 0,
|
|
|
|
|
right: 0,
|
|
|
|
|
top: 10,
|
|
|
|
|
bottom: 0
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
scales: {
|
|
|
|
|
yAxes: [{
|
|
|
|
|
display: true,
|
|
|
|
|
gridLines: {
|
|
|
|
|
offsetGridLines: false,
|
|
|
|
|
color: '#ddd',
|
|
|
|
|
drawBorder: true,
|
|
|
|
|
drawTicks: true,
|
|
|
|
|
drawOnChartArea: false,
|
|
|
|
|
tickMarkLength: 3,
|
|
|
|
|
},
|
|
|
|
|
scaleLabel: {
|
|
|
|
|
display: true,
|
|
|
|
|
labelString: '영양점수'
|
|
|
|
|
|
|
|
|
|
}, //왼쪽 라벨
|
|
|
|
|
ticks: {
|
|
|
|
|
padding: 5,
|
|
|
|
|
fontColor: '#252525',
|
|
|
|
|
fontSize: '11',
|
|
|
|
|
min: 0,
|
|
|
|
|
max: 100,
|
|
|
|
|
stepSize: 20,
|
|
|
|
|
}
|
|
|
|
|
}],
|
|
|
|
|
xAxes: [{
|
|
|
|
|
display: true,
|
|
|
|
|
gridLines: {
|
|
|
|
|
color: ['#ddd', '#f2f2f2', '#f2f2f2', '#f2f2f2', '#f2f2f2', '#ddd'],
|
|
|
|
|
drawTicks: true,
|
|
|
|
|
drawBorder: true,
|
|
|
|
|
tickMarkLength: 3,
|
|
|
|
|
},
|
|
|
|
|
scaleLabel: {
|
|
|
|
|
display: true,
|
|
|
|
|
labelString: '주간'
|
|
|
|
|
},
|
|
|
|
|
ticks: {
|
|
|
|
|
padding: 5,
|
|
|
|
|
fontColor: '#252525',
|
|
|
|
|
fontSize: '11',
|
|
|
|
|
}
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
tooltips: { //툴팁
|
|
|
|
|
callbacks: {
|
|
|
|
|
label: function(tooltipItem, data) {
|
|
|
|
|
|
|
|
|
|
var label = data.datasets[tooltipItem.datasetIndex].label || '';
|
|
|
|
|
|
|
|
|
|
if (label) {
|
|
|
|
|
label += ' N SCORE : ';
|
|
|
|
|
}
|
|
|
|
|
label += Math.round(tooltipItem.yLabel * 100) / 100;
|
|
|
|
|
return label + " 점";
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
enabled: 'true',
|
|
|
|
|
intersect: false,
|
|
|
|
|
displayColors: false,
|
|
|
|
|
backgroundColor: '#FF8135',
|
|
|
|
|
yPadding: 15,
|
|
|
|
|
xPadding: 10,
|
|
|
|
|
titleFontSize: 15,
|
|
|
|
|
titleFontColor: '#fff',
|
|
|
|
|
titleFontFamily: 'Noto Sans KR',
|
|
|
|
|
bodyFontSize: 15,
|
|
|
|
|
bodyFontColor: '#fff',
|
|
|
|
|
bodyFontFamily: 'Noto Sans KR',
|
|
|
|
|
caretPadding: 5,
|
|
|
|
|
cornerRadius: 10,
|
|
|
|
|
caretSize: 5,
|
|
|
|
|
}
|
|
|
|
|
}, //옵션
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/* 그래프 myChart3 */
|
|
|
|
|
var ctx = document.getElementById("myChart3");
|
|
|
|
|
var myChart = new Chart(ctx, {
|
|
|
|
|
type: 'line',
|
|
|
|
|
data: {
|
|
|
|
|
labels: [
|
|
|
|
|
<#if model['monthly']?has_content>
|
|
|
|
|
<#list model['monthly']?reverse as item>
|
|
|
|
|
"${item['reg_dt']!}",
|
|
|
|
|
</#list>
|
|
|
|
|
</#if>
|
|
|
|
|
],
|
|
|
|
|
datasets: [{
|
|
|
|
|
data: [
|
|
|
|
|
<#if model['monthly']?has_content>
|
|
|
|
|
<#list model['monthly']?reverse as item>
|
|
|
|
|
"${item['totalNutrition']!}",
|
|
|
|
|
</#list>
|
|
|
|
|
</#if>
|
|
|
|
|
],
|
|
|
|
|
backgroundColor: 'rgba(255,255,255,0)',
|
|
|
|
|
borderColor: '#e7e7e7',
|
|
|
|
|
cubicInterpolationMode: true,
|
|
|
|
|
pointRadius: '5',
|
|
|
|
|
pointBackgroundColor: ['#fff', '#fff', '#fff', '#fff', '#fff'],
|
|
|
|
|
pointBorderWidth: '3',
|
|
|
|
|
pointBorderColor: ['#33CC33', '#33CC33', '#33CC33', '#33CC33'],
|
|
|
|
|
borderWidth: '3',
|
|
|
|
|
lineTension: 0,
|
|
|
|
|
/*pointHoverBorderColor: "#30a9d7",*/
|
|
|
|
|
/*pointHoverBackgroundColor: "#30a9d7",*/
|
|
|
|
|
}, ]
|
|
|
|
|
},
|
|
|
|
|
options: {
|
|
|
|
|
|
|
|
|
|
maintainAspectRatio: false,
|
|
|
|
|
legend: {
|
|
|
|
|
display: false,
|
|
|
|
|
labels: {
|
|
|
|
|
fontColor: '#fff'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
layout: {
|
|
|
|
|
padding: {
|
|
|
|
|
left: 0,
|
|
|
|
|
right: 0,
|
|
|
|
|
top: 10,
|
|
|
|
|
bottom: 0
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
scales: {
|
|
|
|
|
yAxes: [{
|
|
|
|
|
display: true,
|
|
|
|
|
gridLines: {
|
|
|
|
|
offsetGridLines: false,
|
|
|
|
|
color: '#ddd',
|
|
|
|
|
drawBorder: true,
|
|
|
|
|
drawTicks: true,
|
|
|
|
|
drawOnChartArea: false,
|
|
|
|
|
tickMarkLength: 3,
|
|
|
|
|
},
|
|
|
|
|
scaleLabel: {
|
|
|
|
|
display: true,
|
|
|
|
|
labelString: '영양점수'
|
|
|
|
|
|
|
|
|
|
}, //왼쪽 라벨
|
|
|
|
|
ticks: {
|
|
|
|
|
padding: 5,
|
|
|
|
|
fontColor: '#252525',
|
|
|
|
|
fontSize: '11',
|
|
|
|
|
min: 0,
|
|
|
|
|
max: 100,
|
|
|
|
|
stepSize: 20,
|
|
|
|
|
}
|
|
|
|
|
}],
|
|
|
|
|
xAxes: [{
|
|
|
|
|
display: true,
|
|
|
|
|
gridLines: {
|
|
|
|
|
color: ['#ddd', '#f2f2f2', '#f2f2f2', '#f2f2f2', '#f2f2f2', '#ddd'],
|
|
|
|
|
drawTicks: true,
|
|
|
|
|
drawBorder: true,
|
|
|
|
|
tickMarkLength: 3,
|
|
|
|
|
},
|
|
|
|
|
scaleLabel: {
|
|
|
|
|
display: true,
|
|
|
|
|
labelString: '월간'
|
|
|
|
|
},
|
|
|
|
|
ticks: {
|
|
|
|
|
padding: 5,
|
|
|
|
|
fontColor: '#252525',
|
|
|
|
|
fontSize: '11',
|
|
|
|
|
}
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
tooltips: { //툴팁
|
|
|
|
|
callbacks: {
|
|
|
|
|
label: function(tooltipItem, data) {
|
|
|
|
|
|
|
|
|
|
var label = data.datasets[tooltipItem.datasetIndex].label || '';
|
|
|
|
|
|
|
|
|
|
if (label) {
|
|
|
|
|
label += ' N SCORE : ';
|
|
|
|
|
}
|
|
|
|
|
label += Math.round(tooltipItem.yLabel * 100) / 100;
|
|
|
|
|
return label + " 점";
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
enabled: 'true',
|
|
|
|
|
intersect: false,
|
|
|
|
|
displayColors: false,
|
|
|
|
|
backgroundColor: '#FF8135',
|
|
|
|
|
yPadding: 15,
|
|
|
|
|
xPadding: 10,
|
|
|
|
|
titleFontSize: 15,
|
|
|
|
|
titleFontColor: '#fff',
|
|
|
|
|
titleFontFamily: 'Noto Sans KR',
|
|
|
|
|
bodyFontSize: 15,
|
|
|
|
|
bodyFontColor: '#fff',
|
|
|
|
|
bodyFontFamily: 'Noto Sans KR',
|
|
|
|
|
caretPadding: 5,
|
|
|
|
|
cornerRadius: 10,
|
|
|
|
|
caretSize: 5,
|
|
|
|
|
}
|
|
|
|
|
}, //옵션
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
jonghwan76
3 years ago