堆积的水平图表

时间:2012-06-14 14:42:45

标签: css html

我希望有一个类似这样的图表:

http://jcharts.sourceforge.net/samples/stackedBar.html#Horizontal+Stacked+Bar+Chart

我在如何在表格中使用div或者使用div等方面遇到了挑战。做一个没有多个部分的简单图表似乎更容易。我不确定从哪里开始,采取什么方法,或在网上看哪里。我想保持简单。

似乎我找到了一些插件等等,但我想尽可能自己编写html / css。我也使用Ruby,一些插件是错误的语言..

2 个答案:

答案 0 :(得分:1)

这些图表是图像。用纯HTML / CSS重现它们将是一个挑战,可能不值得。

如果您找到适合您的插件(可能是JavaScript),请使用它。

答案 1 :(得分:0)

水平图表非常简单。您可以在div中始终使用div来表示堆叠的条形图,因此第一个div的背景颜色为蓝色,在该div中您将具有黄色的背景颜色。

三维图表可以为每个条形图提供背景图像,不同的内部div具有不同的背景图像颜色,为您提供堆叠的颜色变体图表

这种布局应该全部用DIVS和绝对定位

完成