여러개 막대 가로 그래프 스크립트로 각각 값 불러오기

포스텔러앱에 가로막대를 보면 길이는 같고 전체값에 따라서 현재값이 표시되는 가로 막대그래프

 

1. 하나의 스크립트로 막대그래프 공용으로 사용 가능 
2. 전체값, 현재값 각각 인라인으로 각각 넣어서 막대그래프 여러개일때도 유동적으로 변경가능

3. 막대그래프가 보여질때 오른쪽으로 길어지는 에니메이션 효과

 

막대그래프가 보여질때 오른쪽으로 길어지는 에니메이션 효과를 css로 줄려고 했으나 생기는 문제점

아래와 같이 값을 스크립트로 뿌려주는거라서 css로 적용시 값이 적용은 0에서 100%기준이라 적용이 안됨

=> 에니메이션 효과는 스크립트로

See the Pen 전체 값 현재값 각각 값받아와서 막대그래프에 넣어주기 by uni (@agosto) on CodePen.