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

以下是一些示例代码：

        <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 3

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

然后根据需要设置背景颜色和边框以设置条形样式。您还可以使用图像（background-image css属性）来获得更好看的条形图。

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

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);

为民意调查结果创建彩色条

4 个答案: