使用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;到左侧柱右对齐。