Heim >Web-Frontend >js-Tutorial >JS-Balkendiagramm
<!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>