<!doctype html>
<meta charset="utf-8"/>
<head>
<script type="text/javascript">
var dataSet = {
"第一月份":95,
"第二月份":20,
"第三月份":84,
"第四月份":77,
"第五月份":90,
"第六月份":100
}
var markPollarChart= function(parent,dataset){
var p = document.createElement("div"),
builder = [];
builder.push("<ul class='chart'>");
for(var i in dataset){
builder.push("<li><em>") ;
builder.push(i) ;
builder.push("</em><span style='background-position: center -") ;
builder.push(dataset[i]) ;
builder.push("px'></span><strong>") ;
builder.push(dataset[i]) ;
builder.push("%</strong></li>") ;
}
builder.push("</ul>");
p.innerHTML = builder.join('');
parent.insertBefore(p,null);
}
window.onload = function(){
markPollarChart(document.getElementsByTagName("body")[0],dataSet);
}
</script>
<style type="text/css">
.chart {
list-style: none;
font-family: '宋体';
font-size: 14px;
border: 1px solid #ccc;
margin: 0;
padding: 5px;
background: #F2F1D7;
float: left;
}
.chart li {
width: 75px;
height: 140px;
float: left;
background: #DDF3FF url(img/o_pillar.gif) center center repeat-y;
}
.chart li em, .chart li span, .chart li strong {
display: block;
height: 20px;
text-align: center;
}
.chart li em, .chart li strong {
background: #DDF3FF;
}
.chart li span {
height: 100px;
background: transparent url(img/o_mask.jpg) no-repeat;
}
</style>
<head>
<body>
</body>
效果图：