[CSS]3D 막대그래프 그리기

 

 

그림자를 이용해 3D의 입체적인 느낌을 나타낸다 

 

background: #f49842; 
box-shadow: 1px -1px #d88a41, 
	2px -2px #d88a41, 
    3px -3px #d88a41,   
    4px -4px #d88a41, 
    5px -5px #d88a41, 
    6px -6px #d88a41, 
    7px -7px   #d88a41, 
    8px -8px #d88a41, 
    9px -9px #d88a41, 
    10px -10px #d88a41;

 

 

스크립트 attr을 이용해 높이를 지정한다. 

<li class="graph-bar bar1" graph-val="30"></li>

for(var i=0; i<maxIndex; i++){
  var val = $("li.graph-bar").eq(i).attr('graph-val');
  var color = $("li.graph-bar").eq(i).attr('graph-color');
  $("li.graph-bar").eq(i).css({
    "left": (i+1)*80+"px"
  }).animate({
    "height":val+"%"
  },800);
}

 

 

 

 

 

3D가 아니라면 아래와 같이 색 지정도 가능하다

<li class="graph-bar bar1" graph-val="30" graph-color="red"></li>

 

 

 

 

다른그래프보기

[javascript/javascript] - [자바스크립트플러그인]도넛 차트 그려주는 플러그인 옵션설정

[CSS/CSS 응용] - [CSS]CSS만을 이용해서 차트 그리기

[CSS/CSS 응용] - [CSS]그라디언트를 이용해 간단하게 원형차트/도넛차트 그리기(애니메이션으로 차트그리기 )