kyebyungha
3 years ago
parent
80274cd833
commit
3a753e8110
@ -0,0 +1,481 @@
|
||||
|
||||
<!-- m_coach -->
|
||||
<div class="m_coach">
|
||||
|
||||
<!-- m_nutrition_report -->
|
||||
<div class="m_nutrition_report">
|
||||
|
||||
<!-- m_nutrition_report_wrap -->
|
||||
<div class="m_nutrition_report_wrap">
|
||||
|
||||
<h2>키 성장</h2>
|
||||
|
||||
<!-- report_tab -->
|
||||
<ul class="report_tab report_tab01">
|
||||
<li class="tab01">
|
||||
<a href="javascript:void(0);">키 성장</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- report_tab -->
|
||||
|
||||
<!-- nutrition_report_graph -->
|
||||
<div class="nutrition_report_graph">
|
||||
|
||||
<div class="swiper-container swiper-container1-chart">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="nutrition_report_graph_txt">
|
||||
<h3>
|
||||
<span class="date"></span>
|
||||
<span class="tit">이번 달</span>
|
||||
</h3>
|
||||
</div>
|
||||
<!-- myChart11 -->
|
||||
<div class="myChart_wrap">
|
||||
<canvas id="myChart11">
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="nutrition_report_graph_txt">
|
||||
<h3>
|
||||
<span class="date"></span>
|
||||
<span class="tit">지난달</span>
|
||||
</h3>
|
||||
</div>
|
||||
<!-- myChart12 -->
|
||||
<div class="myChart_wrap">
|
||||
<canvas id="myChart12">
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="nutrition_report_graph_txt">
|
||||
<h3>
|
||||
<span class="date"></span>
|
||||
<span class="tit">2개월전</span>
|
||||
</h3>
|
||||
</div>
|
||||
<!-- myChart13 -->
|
||||
<div class="myChart_wrap">
|
||||
<canvas id="myChart13">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 페이징 -->
|
||||
<div class="swiper-pagination"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- //nutrition_report_graph -->
|
||||
|
||||
</div>
|
||||
<!-- //m_nutrition_report_wrap -->
|
||||
|
||||
</div>
|
||||
<!-- //m_nutrition_report -->
|
||||
|
||||
</div>
|
||||
<!-- //m_coach -->
|
||||
|
||||
|
||||
<script>
|
||||
// swiper 슬라이더
|
||||
new Swiper('.swiper-container1', {
|
||||
|
||||
slidesPerView: 4, // 동시에 보여줄 슬라이드 갯수
|
||||
slidesPerGroup: 4, // 그룹으로 묶을 수
|
||||
|
||||
// 그룹수가 맞지 않을 경우 빈칸으로 메우기
|
||||
// 3개가 나와야 되는데 1개만 있다면 2개는 빈칸으로 채워서 3개를 만듬
|
||||
loopFillGroupWithBlank: true,
|
||||
|
||||
loop: false, // 무한 반복
|
||||
|
||||
pagination: { // 페이징
|
||||
el: '.swiper-pagination',
|
||||
clickable: true, // 페이징을 클릭하면 해당 영역으로 이동, 필요시 지정해 줘야 기능 작동
|
||||
},
|
||||
navigation: { // 네비게이션
|
||||
nextEl: '.swiper-button-next', // 다음 버튼 클래스명
|
||||
prevEl: '.swiper-button-prev', // 이번 버튼 클래스명
|
||||
}
|
||||
});
|
||||
|
||||
// 차트 swiper 슬라이더
|
||||
new Swiper('.swiper-container1-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', // 이번 버튼 클래스명
|
||||
},
|
||||
});
|
||||
|
||||
/* 그래프 myChart11 */
|
||||
var ctx = document.getElementById("myChart11");
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [ <#if model['lm_growth_body']?has_content>
|
||||
<#list model['lm_growth_body']?reverse as item>
|
||||
"${item['base_day']!}",
|
||||
</#list>
|
||||
</#if>
|
||||
],
|
||||
datasets: [{ label: '',
|
||||
data: [
|
||||
<#if model['lm_growth_body']?has_content>
|
||||
<#list model['lm_growth_body']?reverse as item>
|
||||
"${item['height']!}",
|
||||
</#list>
|
||||
</#if>
|
||||
],
|
||||
backgroundColor: 'rgba(255,255,255,0)',
|
||||
borderColor: '#e7e7e7',
|
||||
cubicInterpolationMode: true,
|
||||
pointRadius: '5',
|
||||
// pointBackgroundColor: [ '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff' ],
|
||||
pointBorderWidth: '3',
|
||||
pointBorderColor: '#33CC33' ,
|
||||
borderWidth: '3',
|
||||
lineTension: 0,
|
||||
}, ]
|
||||
},
|
||||
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: '${model['rm_child']['name']} 키'
|
||||
|
||||
}, //왼쪽 라벨
|
||||
ticks: {
|
||||
padding: 5,
|
||||
fontColor: '#252525',
|
||||
fontSize: '11',
|
||||
min: 20,
|
||||
max: 120,
|
||||
stepSize: 20,
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
display: true, //세로선
|
||||
gridLines: {
|
||||
color: '#f2f2f2',
|
||||
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 || '';
|
||||
label += tooltipItem.yLabel ;
|
||||
return label + " cm";
|
||||
}
|
||||
},
|
||||
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,
|
||||
}
|
||||
}, //옵션
|
||||
});
|
||||
|
||||
/* 그래프 myChart12 */
|
||||
var ctx = document.getElementById("myChart12");
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [ <#if model['lm_growth_body_1']?has_content>
|
||||
<#list model['lm_growth_body_1']?reverse as item>
|
||||
"${item['base_day']!}",
|
||||
</#list>
|
||||
</#if>
|
||||
],
|
||||
datasets: [{ label: '',
|
||||
data: [
|
||||
<#if model['lm_growth_body_1']?has_content>
|
||||
<#list model['lm_growth_body_1']?reverse as item>
|
||||
"${item['height']!}",
|
||||
</#list>
|
||||
</#if>
|
||||
],
|
||||
backgroundColor: 'rgba(255,255,255,0)',
|
||||
borderColor: '#e7e7e7',
|
||||
cubicInterpolationMode: true,
|
||||
pointRadius: '5',
|
||||
// pointBackgroundColor: [ '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff' ],
|
||||
pointBorderWidth: '3',
|
||||
pointBorderColor: '#33CC33' ,
|
||||
borderWidth: '3',
|
||||
lineTension: 0,
|
||||
}, ]
|
||||
},
|
||||
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: '${model['rm_child']['name']} 키'
|
||||
|
||||
}, //왼쪽 라벨
|
||||
ticks: {
|
||||
padding: 5,
|
||||
fontColor: '#252525',
|
||||
fontSize: '11',
|
||||
min: 20,
|
||||
max: 120,
|
||||
stepSize: 20,
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
display: true, //세로선
|
||||
gridLines: {
|
||||
color: '#f2f2f2',
|
||||
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 || '';
|
||||
label += tooltipItem.yLabel ;
|
||||
return label + " cm";
|
||||
}
|
||||
},
|
||||
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,
|
||||
}
|
||||
}, //옵션
|
||||
});
|
||||
|
||||
/* 그래프 myChart13 */
|
||||
var ctx = document.getElementById("myChart13");
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [ <#if model['lm_growth_body_2']?has_content>
|
||||
<#list model['lm_growth_body_2']?reverse as item>
|
||||
"${item['base_day']!}",
|
||||
</#list>
|
||||
</#if>
|
||||
],
|
||||
datasets: [{ label: '',
|
||||
data: [
|
||||
<#if model['lm_growth_body_2']?has_content>
|
||||
<#list model['lm_growth_body_2']?reverse as item>
|
||||
"${item['height']!}",
|
||||
</#list>
|
||||
</#if>
|
||||
],
|
||||
backgroundColor: 'rgba(255,255,255,0)',
|
||||
borderColor: '#e7e7e7',
|
||||
cubicInterpolationMode: true,
|
||||
pointRadius: '5',
|
||||
// pointBackgroundColor: [ '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff' ],
|
||||
pointBorderWidth: '3',
|
||||
pointBorderColor: '#33CC33' ,
|
||||
borderWidth: '3',
|
||||
lineTension: 0,
|
||||
}, ]
|
||||
},
|
||||
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: '${model['rm_child']['name']} 키'
|
||||
|
||||
}, //왼쪽 라벨
|
||||
ticks: {
|
||||
padding: 5,
|
||||
fontColor: '#252525',
|
||||
fontSize: '11',
|
||||
min: 20,
|
||||
max: 120,
|
||||
stepSize: 20,
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
display: true, //세로선
|
||||
gridLines: {
|
||||
color: '#f2f2f2',
|
||||
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 || '';
|
||||
label += tooltipItem.yLabel ;
|
||||
return label + " cm";
|
||||
}
|
||||
},
|
||||
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>
|
||||
Loading…
Reference in new issue