为投票结果创建彩条

Question

在我的网络应用程序中，我希望用长度与投票百分比成比例的彩条显示投票结果。我怎样才能实现这个与HTML/CSS？

Answer 1

本网站包含了一些很好的例子：

http://apples-to-oranges.com/blog/post/css-for-bar-graphs/?id=55

这里是16种不同类型的条形图的集合：

http://speckyboy.com/2009/02/04/16-usable-css-graph-and-bar-chart-tutorials-and-techniques/

Answer 2

这实际上是非常简单的拉断。你希望每个酒吧由一个单一的代表。将div设置为所需的宽度（与结果成比例）。例如，如果你希望200px是投票的“100％”，那么如果一个选项有23％的投票你想.23 * 200是div的像素宽度。

然后根据需要设置背景颜色和边框以设置栏的样式。你也可以看中和使用图像（背景图像CSS属性），以获得更好看的酒吧。

我希望你指出正确的方向。

Answer 3

下面是一些示例代码：

 <style> 
     .GraphWrapper { 
      width:300px; 
      border:1px solid #DDDDDD; 
     } 

     .BlueBar { 
      height:30px; 
      margin:10px 0px 10px 0px; 
      background-color:#FFCCCC; 
     } 

     .RedBar { 
      height:30px; 
      margin:10px 0px 10px 0px; 
      background-color:#CCCCFF; 
     } 
    </style> 

    <div class='GraphWrapper'> 
     <div class='BlueBar' style='width:50%;'></div> 
     <div class='RedBar' style='width:75%;'></div> 
    </div> 

然后，您可以编辑您的图形栏的宽度风格实现图形的百分比。

Answer 4

我知道这是一个老问题，但新技术提供了一个新的解决方案。此外，没有任何答案被接受...

在HTML5中，您可以使用canvas element实际绘制图形。使用canvas元素可能非常复杂，所以在这里我不会详细讨论如何在特定场景中使用它。

但是，这里有一个简单的例子（从diveintohtml5.info复制）：

HTML

<canvas id="graph" width="300" height="225"></canvas> 

的JavaScript

var canvas = document.getElementById("graph"); 
var context = canvas.getContext("2d"); 
context.fillRect(50, 24, 150, 100);