JS 柱形图

最新推荐文章于 2023-10-10 11:51:47 发布

iteye_17658

最新推荐文章于 2023-10-10 11:51:47 发布

阅读量217

点赞数

分类专栏：境-JS 文章标签：柱形图 JS 创建柱形图简单柱形图 ViewUI

境-JS 专栏收录该内容

197 篇文章 1 订阅

订阅专栏

<!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>

效果图：