2012-09-08 6 views
0

세로 막 대형 차트로 사용하기 위해 부트 스트랩 진행률 표시 줄을 옆으로 돌릴 수있는 방법이 있습니까? Google 그래프에 대해 생각하고 있지만 부트 스트랩으로 작업하는 것이 더 쉽습니다. 다음은 StackOverflow 품질 표준을 벗어나는 몇 가지 코드입니다.부트 스트랩 세로 막 대형 차트

Code goes here. 
+3

붙여 넣기가 작동하지 않는다고 생각합니다. –

답변

3

해결 방법입니다. 그렇게 좋지는 않지만 매우 짧고 효과적입니다.

사용 : 그것은 일반적인 진행 표시 줄과 매우 유사하지만 두 가지 차이점이 있습니다 :

  1. 당신은 폭, 바 높이를하지 설정해야이
  2. 진행 바의 높이가 고정되어 (그러나 그것을 인라인 스타일)로 변경 될 수 있습니다

CSS :

.progress-vertical { 
    width: 20px; 
    height: 100px !important; 
    position: relative; 
} 
.progress-vertical .bar { 
    width: 100% !important; 
    position: absolute; 
    bottom: 0; 
    border-bottom-left-radius: inherit; 
    border-bottom-right-radius: inherit; 
} 

예 : http://jsfiddle.net/mQzj9/251/

편집 1 : 고정 잘못된 예 링크.

편집이 2가 : 오래된 CSS 링크, 업데이트 : 감사는 파블로 Mykhalov 때문에, jQuery 코드가 더 이상 필요하지 않습니다

편집 3을 (CSS가 업데이트).

+0

['position : absolute'technic] (http://stackoverflow.com/questions/311990/how-do-i-get-a-div-to- 부동 소수점 - 투 - 하단 -의 - 컨테이너) 자바 스크립트를 사용하는 대신. – Pavlo

+0

@ PavloMykhalov 감사합니다.하지만 이미 시도했지만 작동하지 않습니다. 답변에 "이게 불가능 해 보입니다"라는 답변이 포함되어 있기 때문에 귀하의 링크가 재미 있습니다 :) 어떻게하는지 알고 있다면 제 코드를 개선하십시오. –

+2

[fiddle] (http://jsfiddle.net/mQzj9/4/)을 업데이트했습니다. 이제 그라디언트를 왼쪽에서 오른쪽으로 재 배열해야합니다. – Pavlo

관련 문제