Statistiken mit CSS

CSS Labor: Visualisierung von Statistiken mit CSS

Statistiken gehören eigentlich in eine Tabelle und wirken dann oft etwas trist oder trocken. In diesem Beispiel, welches sich mit Sicherheit auch für andere Situationen eignet, wird statt einer Tabellen eine Liste mit CSS genutzt. Dadurch ist es möglich eine simple Balkengrafik ohne Grafiken zu erstellen, die bedingt durch die Liste auch von Bildschirmlesegeräten richtig vorgelesen werden kann.

Darstellung von Werten mit CSS Balkengrafiken

  • Internet Explorer 52%
  • Firefox 21%
  • Google Chrome 14%
  • Safari 8%
  • Opera 2%
  • Andere 3%

Getestet habe ich das mit den Internet Explorer Versionen 5/6/7/8, Netscape 8.1, Safari 3.x, Firefox 1.0.8/3.0, Opera 8.54/9.51 und zwei PDA Browser (IE 4 auf WindowsCE und Blazer 4.5 auf PalmOS). Es wurde von allen Browsern richtig angezeigt.

CSS Part:


    .browserdetails {
      float: left;
      display: block;
      margin: 0 0 3em 0;
      padding: 0.2em;
      width: 96%;
    }

    .ulist {
      margin: 0;
      padding: 0.2em;
      height: auto;
      width: 99%;
      border: 2px dotted #eee;
    }

    .ulist li {
      height: 1.5em;
      width: 100%;
      margin: 0; 
      display: block; 
      background: #99ccff;
      border: 1px solid #fff;       
    }

    .ulist li span {
      float: right;
      display: block; 
      margin-left: auto; 
      background: #eee; 
      height: 1.5em; 
      line-height: 1.5em; 
      text-align: right; 
    }

    li.pie span {
      width: 48%;
    }

    li.pff span {
      width: 79%;
    }

    li.pgc span {
      width: 86%;
    }

    li.psf span {
      width: 92%;
    }

    li.pop span {
      width: 98%;
    }

    li.pan span {
      width: 97%;
    }

(X)HTML Part:


   <div class="browserdetails">
     <ul class="ulist">
       <li class="pie"><span>Internet Explorer 52%</span></li>
       <li class="pff"><span>Firefox 21%</span></li>
       <li class="pgc"><span>Google Chrome 14%</span></li>
       <li class="psf"><span>Safari 8%</span></li>
       <li class="pop"><span>Opera 2%</span></li>
       <li class="pan"><span>Andere 3%</span></li>
     </ul>
   </div>

Weiterführende Links zu dieser Thematik

Nach oben

Nach oben