[JavaScript] data- 속성을 이용한 그래프 바 만들기

250점 만점에 내 점수가 120점이라면 그래프에는 어떻게 표시해야할까?

- 각 그래프 바 마다 해당하는 점수를 data-num 속성에 저장.

<div class="progress_wrap">
	<p>진단결과</p>
	<div class="space_between">
		<div class="width90">
			<div class="progress_bar">
				<div id="bar1" class="bar1" data-num="250"></div>
			</div>
		</div>
		<div class="width10">
			<span>총점: 250점</span>
		</div>
	</div>
    <div class="space_between">
		<div class="width90">
			<div class="progress_bar width100">
				<div id="bar2" class="bar2" data-num="100"></div>
			</div>
		</div>
		<div class="width10">
			<span>평균: 100점</span>
		</div>
	</div>
    <div class="space_between">
		<div class="width90">
			<div class="progress_bar width100">
				<div id="bar3" class="bar3" data-num="120"></div>
			</div>
		</div>
		<div class="width10">
			<span>내 점수: 120점</span>
		</div>
	</div>
</div>

//base
.width100{
	width: 100%;
}
 
.width90{
	width: 90%
}
 
.space_between{
	display: flex;
  	justify-content: space-between;
  	align-items: center;
}
 
 
//그래프 스타일
.progress_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
.progress_bar_wrap {
  height: 20px;
  border: 1px solid #cfcfcf;
  border-radius: 4px;
  overflow: hidden;
}
 
.progress_bar {
    height: 100%;
    background: #a7a7a7;
}

- 퍼센트를 계산하는 함수를 작성

- 반복문을 사용해 각 bar와, bar의 data-num 값을 변수로 잡음.

- 변수를 함수에 넣어 실행

//반복문으로 각각의 bar의 값을 가져오고 너비를 설정
for (i = 1; i < 4; i++) {
	var ele = $("#bar" + i);
    var num = ele.data("num");
    progressBarWidth(ele, num);
}
 
//퍼센트를 계산하는 함수
function progressBarWidth(ele, n) {
    var progressBarWidth = (n / 250) * 100;
    ele.css("width", progressBarWidth + "%");
}