Erstellen von farbigen Balken für Umfrageergebnisse

Question

In meiner Webanwendung möchte ich Umfrageergebnisse mit farbigen Balken anzeigen, deren Länge proportional zum Prozentsatz der Stimmen ist. Wie kann ich dies mit HTML/CSS erreichen?

Answer 1

Diese Seite enthält einige schöne Beispiele:

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

Und hier ist eine Sammlung von 16 verschiedenen Arten von Balkendiagrammen:

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

Answer 2

Dies ist eigentlich ziemlich einfach weg zu ziehen . Sie möchten, dass jeder Balken durch einen einzigen dargestellt wird. Setzen Sie das div auf die gewünschte Breite (proportional zu den Ergebnissen). Wenn Sie beispielsweise 200px als "100%" der Abstimmung festlegen möchten, dann muss 23% der abgegebenen Stimmen eine .23 * 200 als Pixelbreite des div.

Legen Sie dann die Hintergrundfarbe und den Rahmen fest, um die Leiste nach Ihren Wünschen zu gestalten. Sie können auch Phantasie und verwenden Bilder (Hintergrundbild CSS-Eigenschaft), um schöner aussehende Balken zu bekommen.

Ich hoffe, dass Sie in die richtige Richtung weist. Hier

Answer 3

ist einige Beispiel-Code:

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

Sie können dann bearbeiten Sie die Breite Stil Ihrer Diagrammbalken die Grafik Prozentsatz zu erreichen.

Answer 4

Ich weiß, das ist eine alte Frage, aber neue Technologie hat eine neue Lösung zur Verfügung gestellt. Außerdem wird keine der Antworten akzeptiert ...

In HTML5 können Sie eine canvas element verwenden, um Ihr Diagramm tatsächlich zu zeichnen. Die Verwendung des canvas-Elements kann sehr komplex sein, daher werde ich hier nicht detailliert darauf eingehen, wie Sie dieses für Ihr spezifisches Szenario verwenden können.

aber hier ist ein einfaches Beispiel (kopiert von 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);