100일 CSS 챌린지 #5 : 통계

문제

https://100dayscss.com/days/5/

 

Statistic: In a world of numbers, it is important to be able to interpret them correctly. Beautiful statistics help to capture these data.
통계: 숫자의 세계에서는 숫자를 올바르게 해석하는 것이 중요합니다. 아름다운 통계는 이러한 데이터를 포착하는 데 도움이 됩니다.

 

내 풀이

See the Pen 005 - Statistic by dobbyjang0 (@dobbyjang0) on CodePen.

 

그래프 그리기

꺾은선 그래프를 그대로 따라 만드는 것은 실력향상에 도움이 되지 않을 것 같았다. 그래서 값을 입력하면 값대로 그래프를 그려주도록 짜보았다.

 

svg polyline

svg에서 polyline을 그리는 법에 대해 알게되었다. 왼쪽 위를 0,0으로 잡은 후 원하는 점의 좌표를 계속 적어주면 된다.

 

HTML 커스텀 태그

class dataLine extends HTMLElement {
   connectedCallback() {
     const max = this.getAttribute('max');
     const dataArr = this.getAttribute('data').split(" ");
		 const width = this.getAttribute('width')
		 const height = this.getAttribute('height')
		 const color = this.getAttribute('color')
		 const len = dataArr.length
		 
		 this.style.width = `${width}px`
		 this.style.height = `${height}px`
     this.innerHTML = `<svg style="width:${width}px; height:${height}px;"><polyline points="${dataArr.map((val, idx)=>{
				return `${~~(idx*width/(len-1))},${~~(height-val*height/max)}`
			}).join(" ")}" stroke="${color == 'red'? '#FA7373':'#7BA2FF'}" stroke-width="2" style="fill: transparent;"></polyline></svg>`
		 
		 for(let i in dataArr){
			 let dot = document.createElement('div');
			 let dotData = document.createElement('div');
			 
			 dot.classList.add('dot')
			 dot.classList.add(color)
			 dot.style.left = `calc(${i*100/(len-1)}% - 3px)`;
			 dot.style.bottom = `calc(${dataArr[i]*100/max}% - 3px)`;
			 
			 dotData.classList.add('data-label')
			 dotData.classList.add(color)
			 dotData.innerText = dataArr[i]
			 dot.appendChild(dotData) 
			 
			 this.appendChild(dot)
		 }
   }
}

customElements.define("data-line", dataLine);

 

HTML 커스텀 태그를 이용, 입력 값을 받으면 비율에 따라 좌표를 계산해 자동으로 꺾은선을 그리고, 점을 찍도록 하였다.

 

추가로 해보고 싶은 것

polyline에 애니메이션 넣기 (stroke-dashoffset)

 

예시 모범답안

See the Pen 005 - Statistic by Matthias Martin (@roydigerhund) on CodePen.