使用CSS創建負面條形圖

Question

我已經提出了一個非常類似的問題，但那是使用JavaScript/PHP - 我沒有太多的運氣找到理想的解決方案，所以想嘗試模仿使用只看起來類似CSS的圖表到下面

正如你所看到的圖表行有一個次要元素覆蓋在一個不同的顏色&與黑色邊框。這是我試圖達到的風格 - 任何人都可以建議如何最好地去做這件事？

任何人都可以建議通過創建另一個圖表疊加在另一個之上的最佳方式來解決這個問題嗎？

Answer 1

我在做圖用純CSS http://dabblet.com/gist/3142994

嘗試......和少了很多HTML和CSS清潔第二個版本：http://dabblet.com/gist/3143479

Answer 2

而是另起爐竈，在這種情況下，我建議你使用現有的可視化的API。谷歌提供了一個相當廣泛的一個：

https://developers.google.com/chart/interactive/docs/gallery

如果你喜歡冒險的感覺，這是不是你以後，用float: right;到左側柱右對齊。