| 서버 | Local 작업 |
|---|---|
| 문서 및 버전 | HTML5, CSS3, Javascript |
| 인코딩 | UTF-8 |
| 유형 | Mobile WebView |
| 해상도 범위 |
Mobile : 280 ~ 768 (뷰포트 너비에 따라 사이즈 변동) Tablet : 769 ~ |
| library |
chart.js - v4.0.1 chartjs-plugin-annotation.min.js - v2.0.1 chartjs-plugin-datalabels.min.js - v2.1.0 swiper-bundle.min.js - 8.3.2 |
| Fonts |
Noto Sans KR RixSinHead_Pro |
root
├── assets
│ ├── fonts
│ ├── img
│ │ ├── icon
│ │ └── myLab
│ ├── js
│ │ ├── plugins
│ │ ├── exbody
│ │ │ ├── detail.js
│ │ │ └── detail_normal.js
│ │ ├── inbody
│ │ │ ├── detail.js
│ │ │ └── detail_normal.js
│ │ ├── myLab
│ │ │ ├── list.js
│ │ │ └── detail.js
│ │ ├── nq
│ │ │ ├── detail.js
│ │ │ └── detail_normal.js
│ │ ├── vuno
│ │ │ ├── detail.js
│ │ │ └── detail_normal.js
│ │ ├── data
│ │ │ ├── exbody_normal.json
│ │ │ ├── exbody.json
│ │ │ ├── inbody_normal.json
│ │ │ ├── nq_normal.json
│ │ │ ├── nq.json
│ │ │ ├── vuno_normal.json
│ │ │ └── vuno.json
│ │ └── common.js
│ └── css
│ ├── pages
│ └── common.css
│
└── html
├── myLab
├── inbody
├── exbody
├── nq
└── vuno
[기본 주석]
<!-- Header -->
내용
<!-- // Header -->
[변경사항 여러줄일 경우 주석]
<!-- YYYYMMDD_수정 -->
내용
<!-- // YYYYMMDD_수정 -->
[변경사항 한줄일 경우 주석]
<p>hellow world!</p>
<!-- // YYYYMMDD_수정 -->
[기본 주석]
/* Header */
.title {font-size: 40px; color: #ffffff}
/* // Header */
[변경사항 여러줄일 경우 주석]
/* YYYYMMDD_수정 */
.title {font-size: 40px; color: #ffffff}
.description {font-size: 20px; color: #000000}
/* // YYYYMMDD_수정 */
[변경사항 한줄일 경우 주석]
.title {font-size: 40px; color: #ffffff}
/* // YYYYMMDD_수정 */
[설명 주석]
// radio 유효성 체크
const validRadio = () => {
...
}
[개발 코멘트 주석]
<!--
to dev : 버튼노출대상 - 부모
-->
접두사를 사용하는 이유는 접두사로써 네임스페이스를 나눠주고 클래스네임만 보고도 이녀석이 어떤 역할을 하는지, 그리고 어느 위치에 작성되어 있는지 쉽게 유추하기 위해서이다.
.test {
display: block;
overflow: hidden;
float: left;
position: top; // top right bottom left z-index
// 크기 관련
width: 100px;
height: 100px;
// max- , min-
// 여백/간격
margin: 100px;
padding: 100px;
// font
font-size: 14px;
font-weight: 500;
font-family: 'test', test;
line-height: 1;
// text- , word- , white- , etc...
// 배경
background: #fff;
// 테두리
border: 1px solid #fff;
// 기타 style
}
| Icon | icon_ |
|---|---|
| 일반 | img_ |
| 임시 | @dummy_ |
<div>
<canvas id="myChart"></canvas>
</div>
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
const setChartData = () => {
async function fetchData() {
const url = '/assets/js/data/목업데이터.json'
const res = await fetch(url)
const dataPoints = await res.json()
return dataPoints
}
fetchData().then(dataPoints => {
// 반환된 dataPoints로 접근하여 변수 chartData에 데이터를 담는다
const chartData = dataPoints.data
// 날짜 데이터 셋팅
// canvas에서 텍스트는 filltext로 구성되는데 filltext는 줄바꿈이 안된다.
// 날짜데이터를 '.' 기준으로 년, 월, 일로 분리한다.
// 분리된 날짜 데이터를 배열 두개로 나누어 담으면 줄바꿈 된 것 처럼 보인다.
// 2022.01.01 월과 일이 한자리일 경우 padStart(2, "0")를 이용해 앞에 0붙여준다
let dataDate = chartData.map(idx => idx.date)
for (let i = 0; i < dataDate.length; i++) {
let temp = dataDate[i].split('.')
dataDate[i] = [`${temp[0]}.`, `${temp[1].padStart(2, "0")}.${temp[2].padStart(2, "0")}`]
}
// 각 케이스별로 chartData에서 매칭 시킨다
const dataArray = {
balance: chartData.map(idx => idx.balance),
...
}
// 버튼 클릭시 각 케이스별로 매칭된 차트데이터 업데이트 시켜준다
chartNav.forEach((el, idx) => {
el.querySelector('.chart__nav-btn').addEventListener('click', () => {
switch (idx) {
case 0: // 균형
chartData.data.datasets[0].data = dataArray.balance
break;
case 1: // 절제
chartData.data.datasets[0].data = dataArray.moderation
break;
case 2: // 다양
chartData.data.datasets[0].data = dataArray.diversity
break;
case 3: // 실천
chartData.data.datasets[0].data = dataArray.practice
break;
case 4: // 환경
chartData.data.datasets[0].data = dataArray.environment
break;
}
Chart.update()
})
})
// 첫 로드시 데이터 셋팅
Chart.data.labels = dataDate
Chart.data.datasets[0].data = dataArray.balance
Chart.update()
})
}
const customTooltip = (context) => {
...
}
new Chart(ctx, {
options: {
plugins: {
tooltip: {
enabled: false, // 기본제공 툴팁 제거하고 커스텀 툴팁으로 변경
external: customTooltip // 커스텀 툴팁 함수 이름
},
},
}
});
const dataArray = {
balance: nqData.map(idx => idx.balance),
moderation: nqData.map(idx => idx.moderation),
diversity: nqData.map(idx => idx.diversity),
practice: nqData.map(idx => idx.practice),
environment: nqData.map(idx => idx.environment)
}
let dataOption = {
balance: { max: '', min: '', step: '' },
moderation: { max: '', min: '', step: '' },
diversity: { max: '', min: '', step: '' },
practice: { max: '', min: '', step: '' },
environment: { max: '', min: '', step: '' }
}
Object.keys(dataArray).forEach(element => {
dataOption[element].max = (Math.ceil(parseInt(Math.max.apply(null, dataArray[element])) / 10) * 10) + 10
dataOption[element].min = Math.floor(parseInt(Math.min.apply(null, dataArray[element])) / 10) * 10
dataOption[element].step = (dataOption[element].max - dataOption[element].min) / 5 // 데이터 스탭이 무조건 6개의 구간으로 보여지기 위한 계산
})