jQuery 그래프 [graph] - 수치 적용

그래프 [graph] - 수치를 그래프에 대입

---

이것이 딱히 그래프라고 하기엔 조금... 뭔가 적당한 용어라던지 그런것이 생각이 안나서 그냥 그래프로 이름을 정하는 걸로..
일단 구조는 간단합니다. 우선 저는 퍼블리셔이니까 제가 하고자 했던 부분은 그래프우측에 위치하고 있는 수치 아마 이 부분은 
"개발자"분들이 값을 던저 주겠죠...? 아닐까나? 아님 뭐 .. 어쩔수 없고 ..
하여 우측에 텍스트의 값을 받아서 그래프[도표] 안에 대입을 시켜줍니다.  하단의 이미지를 참고해주세요.

 

  

    

      
사용 연차
      

        

          

        
        30%
      
    
  
  

    

      
사용가능 연차
      

        

          

        
        70%
      
    
  

.present-area {margin:0 auto; background:#fff; border-radius: 1rem; box-sizing: border-box}
.present-area .box {display:table; width:100%;}
.present-area .box + .box {margin-top:4rem;}
.present-area .box.t02 .num strong{color:#4384fb;}
.present-area .graph-box {display:table-cell; vertical-align: middle; width:10rem}
.present-area .num {display:table-cell; font-size:2.9rem; margin-top:0; width: calc(100% / 2 - 10rem);}
.present-area .num strong {font-size:3.1rem; color:#4d5e7e;}
.present-area .graph-box .graph {margin-top:-.7rem;}
.present-area .graph-box .graph .data {width:5rem; height:.7rem; background-color:#dbdbdb; border-radius:.6rem; overflow:hidden; position: relative; display:inline-block;}
.present-area .graph-box .graph .data div {background-color:orange; background-size:6px auto; position:absolute; left:0; top:0; height:100%; width:100%; border-radius:.6rem; }

.present-area .graph-box .txt {font-size:.7rem; display:inline-block;}

(function(){
  var $wrap = $('.present-area'),
      $box = $wrap.find('.box');

  for(var i = 0 ; i < $box.length ; i++){

    var pre = $box.eq(i).find('.txt').html();
    var _pre = pre.replace(/[^0-9]/g,''); // 문자열에서 숫자만 추출하는 정규식

    $('.graph .data div').eq(i).animate({
      width : _pre + '%'
    }, 1000);	

  }

})();

sub's

Blog