我已经问过一个非常相似的问题,但那是使用 javascript/php - 我没有太多运气找到理想的解决方案,所以想尝试只使用类似于下面的 CSS 来模拟图表
如您所见,图表行有一个次要元素,该元素以不同的颜色覆盖并带有黑色边框。这是我想要实现的风格 - 任何人都可以建议如何最好地做到这一点?
任何人都可以通过创建另一个图表覆盖在另一个图表上来建议解决此问题的最佳方法吗?
我已经问过一个非常相似的问题,但那是使用 javascript/php - 我没有太多运气找到理想的解决方案,所以想尝试只使用类似于下面的 CSS 来模拟图表
如您所见,图表行有一个次要元素,该元素以不同的颜色覆盖并带有黑色边框。这是我想要实现的风格 - 任何人都可以建议如何最好地做到这一点?
任何人都可以通过创建另一个图表覆盖在另一个图表上来建议解决此问题的最佳方法吗?
我尝试用纯 CSS 制作图表http://dabblet.com/gist/3142994
...第二个版本的 HTML 更少,CSS 更简洁:http: //dabblet.com/gist/3143479
在这种情况下,我建议使用现有的可视化 API,而不是重新发明轮子。谷歌提供了一个相当广泛的:
https://developers.google.com/chart/interactive/docs/gallery
如果您喜欢冒险并且这不是您所追求的,请使用float: right;
将左栏对齐到右侧。