정말 간단하게 만드는 Jquery 애니메이션 세로막대차트 (Column Chart)

 

col1 - 첫번째 막대값.

col2 - 두번째 막대값.

테스트해보려면 col1, col2에 그냥 숫자값 넣어놓고 함수만 실행시켜도 돌아갑니다.

 

ChartArea 는 <div>영역이다. 이놈만 생성해주고 돌리면 됨.

<div id="ChartArea" style="width:300px; height:200px;">

</div>

 

function BindColumnChart(col1, col2) {
        

        $("#ChartArea").append("<div id=col1Area> <div id=col1 class='col1' style='height:0px; width:50px; margin-top:185px; margin-left:20px; float:left;'></div> </div>") // Chart 영역에 값1 막대차트를 생성
        $("#ChartArea").append("<div id=col2Area> <div id=col2 class='col2' style='height:0px; width:50px; margin-top:185px; margin-left:20px; float:left;'></div> </div>") // Chart 영역에 값2 막대차트를 생성 (float:left 로 해서 가로로 붙였다)

        var plan = null; // 값1 변수 초기화
        var out = null; // 값2 변수 초기화

        var maxValue = (Number(col1) > Number(col2)) ? Number(col1) : Number(col2);

        var maxHeight = 140;
        var marginTop = $("#col1").get(0).style.marginTop.replace('px', '');

        plan = Math.floor(Number((maxHeight * col1) / maxValue));
        out = Math.floor(Number((maxHeight * col2) / maxValue));  // 여기까지는 계산값이다. 최대값을 구하고, 최대높이 올라갈 세로픽셀을 구해서 값1과, 값2가 해당영역 DIV에 세로크기 만큼 올라간다.

        $("#col1").append("<div id='col1_Text' >" + col1 + "</div>").append("<div id='col1_Text' style=margin-top:" + (plan + 5) + "px; >값1</div>")
        $("#col2").append("<div id='col2_Text' >" + col2 + "</div>").append("<div id='col1_Text' style=margin-top:" + (out + 5) + "px;>값2</div>") // 각 차트의 text 값이다.

 

// 이제 세로 0값에서 값만큼 올라가도록 animation 설정을 해준다. 뒤에 1800은 시간이다.

        $("#col1").animate({ height: plan + "px", marginTop: (Number(marginTop) - plan) - 1 + "px" }, 1800); // 전체크기에서 현재값을 뺀게 나머지 마진
        $("#col2").animate({ height: out + "px", marginTop: (Number(marginTop) - out) - 1 + "px" }, 1800);

        $("#col1_Text").animate({ marginTop: "-25px" }, 1500);
        $("#col2_Text").animate({ marginTop: "-25px" }, 1500);

    }

 

*보너스 그라데이션 CSS*

IE8에서 작동시키려면 CSS 핵을 사용하는게 정신건강에 이롭다.

그냥 IE9 쓰던지. 크롬이나 파폭을 쓰는게..

 #col1_Text, #col2_Text
            {
                font-weight:bold;
                font-family:맑은 고딕;
                color:white;
                text-align:center;
            }
           
            .col1
            {
                background: rgb(255,183,107); /* Old browsers */
                background: -moz-linear-gradient(left,  rgb(255,183,107) 0%, rgb(255,167,61) 50%, rgb(255,127,4) 74%, rgb(255,124,0) 88%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(255,183,107)), color-stop(50%,rgb(255,167,61)), color-stop(74%,rgb(255,127,4)), color-stop(88%,rgb(255,124,0))); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(left,  rgb(255,183,107) 0%,rgb(255,167,61) 50%,rgb(255,127,4) 74%,rgb(255,124,0) 88%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(left,  rgb(255,183,107) 0%,rgb(255,167,61) 50%,rgb(255,127,4) 74%,rgb(255,124,0) 88%); /* Opera 11.10+ */
                background: -ms-linear-gradient(left,  rgb(255,183,107) 0%,rgb(255,167,61) 50%,rgb(255,127,4) 74%,rgb(255,124,0) 88%); /* IE10+ */
                background: linear-gradient(left,  rgb(255,183,107) 0%,rgb(255,167,61) 50%,rgb(255,127,4) 74%,rgb(255,124,0) 88%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7c00',GradientType=1 ); /* IE6-9 */

            }
           
            .col2
            {
                background: rgb(197,222,234); /* Old browsers */
                background: -moz-linear-gradient(left,  rgb(197,222,234) 0%, rgb(138,187,215) 31%, rgb(6,109,171) 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(197,222,234)), color-stop(31%,rgb(138,187,215)), color-stop(100%,rgb(6,109,171))); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(left,  rgb(197,222,234) 0%,rgb(138,187,215) 31%,rgb(6,109,171) 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(left,  rgb(197,222,234) 0%,rgb(138,187,215) 31%,rgb(6,109,171) 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(left,  rgb(197,222,234) 0%,rgb(138,187,215) 31%,rgb(6,109,171) 100%); /* IE10+ */
                background: linear-gradient(left,  rgb(197,222,234) 0%,rgb(138,187,215) 31%,rgb(6,109,171) 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=1 ); /* IE6-9 */
            }

별다른 플러그인 쓰지않고. 기본적인 Jquery + CSS 조합으로 만든 세로차트다. 더 복잡하고 화려한게 많지만.

기능이 나쁘지 않다. 모바일에서도 예쁘게 잘 보인다. 최대장점은 내가 만든거니까 내맘대로 커스터마이징이 쉽다는것.