İstatistik-Bar-Grafik örneği

[burajan]

Bu örnekle çeşitli istatistik bilgilerinizi bar-grafik ile gösterebilirsiniz.



Stil dosyanıza eklenecek kod:

Kod: [Seç]

.bargraph {
    font: 0.6em/2em Arial;
    color: #ddb;
    border-collapse: collapse;
    width: 476px;
}
.bargraph td {
    padding:0;
    margin:0;
    vertical-align:bottom;
    text-align:center;
    background: #2d271c url(gridline.gif) 15px bottom;
}
.bargraph th {
    background: #2d271c;
}
.bargraph img{
    display:block;
    border-right: 1px solid #000;
}
Göstereceğiniz yere eklenecek kod:

Kod: [Seç]

<table class="bargraph">
    <tr>
        <th>Visits 2005</th>
        <td>10000<img src="column.gif" width="36" height="10" alt="10000" /></td>
        <td>15000<img src="column.gif" width="36" height="30" alt="15000" /></td>
        <td>20000<img src="column.gif" width="36" height="40" alt="20000" /></td>
        <td>30000<img src="column.gif" width="36" height="60" alt="30000" /></td>
        <td>35000<img src="column.gif" width="36" height="70" alt="35000" /></td>
        <td>40000<img src="column.gif" width="36" height="80" alt="40000" /></td>
        <td>50000<img src="column.gif" width="36" height="100" alt="50000" /></td>
        <td>60000<img src="column.gif" width="36" height="120" alt="60000" /></td>
        <td>70000<img src="column.gif" width="36" height="140" alt="70000" /></td>
        <td>80000<img src="column.gif" width="36" height="160" alt="80000" /></td>
        <td>90000<img src="column.gif" width="36" height="180" alt="90000" /></td>
        <td>100000<img src="column.gif" width="36" height="200" alt="100000" /></td>
    </tr>
    <tr>
        <th></th>
        <th>Jan</th>
        <th>Feb</th>
        <th>Mar</th>
        <th>Apr</th>
        <th>May</th>
        <th>Jun</th>
        <th>Jul</th>
        <th>Aug</th>
        <th>Sep</th>
        <th>Oct</th>
        <th>Nov</th>
        <th>Dec</th>
    </tr>
</table>
İndirmeniz gereken iki adet resim dosyası:
http://www.khmerang.com/csslab/bargraphs/column.gif
http://www.khmerang.com/csslab/bargraphs/gridline.gif

Demo için tıklayın

Kaynak için tıklayın