Создание цветных полос для результатов опроса

Question

В моем веб-приложении я хотел бы отображать результаты опроса с помощью цветных полос, длина которых пропорциональна проценту голосов. Как я могу добиться этого с помощью HTML / CSS?

Answer 1

Вот пример кода:

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

Этот сайт содержит несколько хороших примеров:

http://apples -to-oranges.com / блог / запись / CSS-для-стержневых графов /? ID = 55

А вот коллекция из 16 различных типов гистограмм:

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

Answer 3

Я знаю, что это старый вопрос, но новая технология предоставила новое решение. Кроме того, ни один из ответов не принимается ...

В HTML5 вы можете использовать элемент canvas , чтобы фактически нарисовать ваш график. Использование элемента 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);

Answer 4

Это на самом деле довольно просто осуществить. Вы хотите, чтобы каждый бар был представлен одним. Установите div на ширину, которую вы хотите (пропорционально результатам). Например, если вы хотите, чтобы 200px было «100%» голосов, тогда, если опцион имеет 23% голосов, вы хотите .23 * 200 - ширина пикселя div.

Затем установите цвет фона и границы, чтобы стилизовать панель по своему желанию. Вы также можете получить модные изображения и использовать изображения (свойство background-image css), чтобы получить более привлекательные полосы.

Надеюсь, это указывает на правильное направление.