這是最基本的預覽，下面是幾種不同的應用代碼
一、基本的CSS圖表
CSS代碼
<style>???
??? .graph {????
??????? position: relative; /* IE is dumb */??
??????? width: 200px;????
??????? border: 1px solid #B1D632;????
??????? padding: 2px;????
??? }???
??? .graph .bar {????
??????? display: block;???
??????? position: relative;???
??????? background: #B1D632;????
??????? text-align: center;????
??????? color: #333;????
??????? height: 2em;????
??????? line-height: 2em;???????????????
??? }???
??? .graph .bar span { position: absolute; left: 1em; }???
</style>???
<div class=”graph”>???
??? <strong class=”bar” style=”width: 24%;”>24%</strong>???
</div>
二、復雜的CSS條形圖
CSS代碼
<style>???
??? dl {????
??????? margin: 0;????
??????? padding: 0;?????????
??? }???
??? dt {????
??????? position: relative; /* IE is dumb */??
??????? clear: both;???
??????? display: block;????
??????? float: left;????
??????? width: 104px;????
??????? height: 20px;????
??????? line-height: 20px;???
??????? margin-right: 17px;?????????????????
??????? font-size: .75em;????
??????? text-align: rightright;????
??? }???
??? dd {????
??????? position: relative; /* IE is dumb */??
??????? display: block;?????????
??????? float: left;????????
??????? width: 197px;????
??????? height: 20px;????
??????? margin: 0 0 15px;????
??????? background: url(“g_colorbar.jpg”);????
???? }???
???? * html dd { float: none; }????
??? /* IE is dumb; Quick IE hack, apply favorite filter methods for???
??? wider browser compatibility */??
??
???? dd div {????
??????? position: relative;????
??????? background: url(“g_colorbar2.jpg”);????
??????? height: 20px;????
??????? width: 75%;????
??????? text-align:rightright;????
???? }???
???? dd div strong {????
??????? position: absolute;????
??????? rightright: -5px;????
??????? top: -2px;????
??????? display: block;????
??????? background: url(“g_marker.gif”);????
??????? height: 24px;????
??????? width: 9px;????
??????? text-align: left;???
??????? text-indent: -9999px;????
??????? overflow: hidden;???
???? }???
</style>???
<dl>???
??? <dt>Love Life</dt>???
??? <dd>???
??????? <div style=”width:25%;”><strong>25%</strong></div>???
??? </dd>???
??? <dt>Education</dt>???
??? <dd>???
??????? <div style=”width:55%;”><strong>55%</strong></div>???
??? </dd>???
??? <dt>War Craft 3 Rank</dt>???
??? <dd>???
??????? <div style=”width:75%;”><strong>75%</strong></div>???
??? </dd>???
</dl>??
三、CSS豎條圖
CSS代碼
<style>???
??? #vertgraph {???
??????? width: 378px;????
??????? height: 207px;????
??????? position: relative;????
??????? background: url(“g_backbar.gif”) no-repeat;????
??? }???
??? #vertgraph ul {????
??????? width: 378px;????
??????? height: 207px;????
??????? margin: 0;????
??????? padding: 0;????
??? }???
??? #vertgraph ul li {?????
??????? position: absolute;????
??????? width: 28px;????
??????? height: 160px;????
??????? bottombottom: 34px;????
??????? padding: 0 !important;????
??????? margin: 0 !important;????
??????? background: url(“g_colorbar3.jpg”) no-repeat !important;???
??????? text-align: center;????
??????? font-weight: bold;????
??????? color: white;????
??????? line-height: 2.5em;???
??? }???
??
??? #vertgraph li.critical { left: 24px; background-position: 0px? !important; }???
??? #vertgraph li.high { left: 101px; background-position: -28px? !important; }???
??? #vertgraph li.medium { left: 176px; background-position: -56px? !important; }???
??? #vertgraph li.low { left: 251px; background-position: -84px? !important; }???
??? #vertgraph li.info { left: 327px; background-position: -112px? !important; }???
</style>???
<div id=”vertgraph”>???
??? <ul>???
??????? <li class=”critical” style=”height: 150px;”>22</li>???
??????? <li class=”high” style=”height: 80px;”>7</li>???
??????? <li class=”medium” style=”height: 50px;”>3</li>???
??????? <li class=”low” style=”height: 90px;”>8</li>???
??????? <li class=”info” style=”height: 40px;”>2</li>???
??? </ul>???
</div>
