JS 柱形图

巴扎黑原创: 2016-11-25 14:24:201058浏览

<!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=&#39;chart&#39;>");
    for(var i in dataset){
        builder.push("<li><em>") ;
        builder.push(i) ;
        builder.push("</em><span style=&#39;background-position: center -") ;
        builder.push(dataset[i]) ;
        builder.push("px&#39;></span><strong>") ;
        builder.push(dataset[i]) ;
        builder.push("%</strong></li>") ;
    }
    builder.push("</ul>");
    p.innerHTML = builder.join(&#39;&#39;);
    parent.insertBefore(p,null);
}
window.onload = function(){
    markPollarChart(document.getElementsByTagName("body")[0],dataSet);
}
</script>
<style type="text/css">
.chart {
list-style: none;
font-family: &#39;宋体&#39;;
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>

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：路径描边设置样式下一篇：JavaScript 实现隐藏省略文字特效

查看更多

JS 柱形图

相关文章