自舉列圖表

有沒有一種方法可以將自舉進度條橫向轉換爲列圖表？我正在考慮去Google圖表，但使用bootstrap更容易。下面是一些代碼，以通過StackOverflow質量標準。自舉列圖表

Code goes here.

來源

2012-09-08 Phillip Senn

我認爲粘貼不起作用:) –

這是一種解決方法。這不是很好，但它很短，它的工作原理。

使用：它非常類似於通常的進度條，但有兩點不同：

你應該設置欄高度，不寬
進度條的高度是固定的（但可以用內聯樣式）來改變

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：帕夫洛Mykhalov，不需要感謝jQuery代碼了（CSS更新）

編輯3：CSS鏈接過時，更新。

來源

2012-09-08 20:41:58

嘗試['position：absolute'technic]（http://stackoverflow.com/questions/311990/how-do-i-get-a-div-to-浮動到它的底部的容器），而不是使用JavaScript。 – Pavlo

@PavloMykhalov謝謝，但我已經嘗試過，但我無法得到它的工作。您的鏈接很有趣，因爲接受的答案包含「這似乎是不可能的」:)如果您知道如何做，請改進我的代碼。 –

我更新了[小提琴]（http://jsfiddle.net/mQzj9/4/）。現在您必須重新排列從左到右的漸變。 – Pavlo

回答

相關問題