什么是民意调查结果酒吧的好方法？ [英] What is a good technique for poll result bars?

问题描述

我创造了一些投票站的软件和我目前正在研究这样做民意调查结果图形栏技术。没有什么复杂的，只是一些简单的结果吧。

I am creating some polling software and am currently researching techniques for doing poll result graph bars. Nothing complicated, just some simple results bars.

如果有这方面的任何尝试和真正的最好的方法，我想知道。这使我想到的最好的是有每个栏等于选择一个div容器，然后图像或其他元素，用户设定的尺寸（宽）导致百分比（联CSS）。

I was wondering if there are any tried and true best methods for this. The best that comes to my mind is having a div container for each bar, and then an image or some other element where you set the size (width) equal to the options result percentage (inline css).

这个例子

强文

// Option 1 Results
<div>
   <span style="background-color: #ff0000; width: 33%"></span>
</div>

// Option 2 Results
<div>
   <span style="background-color: #ff0000; width: 16%"></span>
</div>

等等......

etc...

任何知道有什么更好的技术，或者这是pretty多怎么最办呢？

Any know of any better techniques, or is this pretty much how most do it?

推荐答案

是的，这就是做一个好办法。

Yes, that's a good way to do it.

下面是更细化了同样的想法：

Here's the same idea with more refinement:

现场演示的

HTML：

<div class="pollBars">
    <span class="t1" style="width: 10%">69</span>
    <span class="t1" style="width: 20%">100</span>
    <span class="t1" style="width: 70%">200</span>
    <span class="t2" style="width: 90%">666</span>
    <span class="t2" style="width: 120%">Over 9000!!</span>
</div>

CSS：

.pollBars {
    width: 300px;
    background: #ccc
}
.pollBars span {
    display: block;

    padding: 3px;
    margin: 7px 0;

    font: bold 14px/1 sans-serif;

    -moz-border-radius: 4px;
    border-radius: 4px;

    text-shadow: 1px 1px 1px #444;
}

.t1 {
    color: #fff;

    border: 1px solid red;

    background: #f85032; /* old browsers */
    background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); /* webkit */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); /* ie */
}

.t2 {
    color: #fff;

    border: 1px solid blue;

    background: #6db3f2; /* old browsers */
    background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); /* webkit */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* ie */
}

这篇关于什么是民意调查结果酒吧的好方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！