[JS] 배열로 저장된 데이터 활용하여 드래그 슬라이드를 이용한 막대차트 만들기

 

=== Prologue ===

 

신입 초반때 꽤 재미있었던 작업이었던 걸로 기억한다.

고민하고 찾아보면서 완성시켰었는데 그때의 기록을 남겨놓고자 한다.

 

==== Mission ====

배열로 저장된 데이터 활용하여 

드래그 슬라이드를 이용한 막대차트 만들어 보자! 

 

 

=== description ===

사실 로직은 간단하다. 

 

1. 각각의 데이터를 js 에 배열로 저장한다.

각각 노트북 / 타블렛의 값들을 

장치개수와 수명주기 별로 데이터에 넣어주었다. 

데이터를 수기로 입력해야해서 조금 번거로웠다. 

 

2. 프로그래스 바를 선택했을때, 그 값을 가져온다. 

 

3. 값에 대응되는 값을 데이터 배열에서 불러온다. 

 

4. 값마다 % 를 부여해서 높이값을 바꿔준다 (그래프가 움직이는 방식) 

 

 

반응형

 

==== detail progress ====

 

코드펜으로 확인해보면 이렇다. 

 

See the Pen Untitled by bok-world (@bok-world) on CodePen.

 

혹시나 큰 화면을 원하시는 분들은 여기로 :-) 🐥

 

slide bar - graph

 

 

 

 

==== Result ====

🌵 변수에 담아서 그래프로 값을 보여주는 것 까지 구현 해 내었다.

🌵 슬라이드 바 (프로그래스바) 를 기본이 아니라 디자인 요구사항 대로 편집해 내었다. 꽤 까다로웠는데 하고 나니 뿌듯했다.  

 

 

 

==== You may also Like! ====

 

 

 

🧐 사이드 프로젝트 월간테크를 영상으로 보고싶다면? 

 

요주의 개발자, 쥬디

 

🧐 "앱 개발"을 위한 첫 단계가 무엇인지 궁금하다면? 

[사이드 프로젝트] 사이드 프로젝트 "앱개발" 첫 단계는 기획이다.

 

 

🧐 사이드프로젝트 [월간테크 2번째 프로젝트] 스토리가 "더" 궁금하다면? 

 

[월간TECH프로젝트] 로블록스 "빨간마스크" 게임 제작기 1주차

 

==== Reference====

 

📌 직접 작성한 코드입니다.