Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Compatible with beautiful bar charts of various browsers</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css">Body {padding: 0; margin: 40px; font-size: 9pt; font-family: Helvetica, Geneva, sans-serif;} h3 {font-weight: normal; display: block; width: 600px; text-align: center;}/* ul */ul # q-graph {border: 2px solid # 0063be; background: # ffc url (yun_qi_img/1.png) repeat-x scroll 0 0! Important; background: # ffc repeat-x scroll 0 0; height: 300px! Important; height: 304px; width: 600px; position: relative; list-style: none; margin: 1.1em 1em 3.5em; padding: 0 ;}# q-graph li {position: absolute; text-align: center; bottom: 0; padding: 0 margin: 0;}/* ul li */li. qtr {width: 150px; height: 300px; border-right: 1px dotted #41a3e2; z-index: 2;} li # q1 {left: 0 ;} li # q2 {left: 150px;} li # q3 {left: 300px;} li # q4 {left: Pixel px; border-right: none ;} /* ul li ul */# q-graph ul {list-style: none;}/* ul li */li. bar {width: 34px; color: # fff;} li. north {left: 36px; background: # ddd url ('yun _ qi_img/2.gif ') no-repeat 0 0;} li. south {left: 80px; background: # ddd url ('yun _ qi_img/2.gif ') no-repeat-34px 0 ;} /* ul li divs */li # ticks {left: 0; height: 300px; width: 100%; z-index: 1;} div. ticks {position: relative; height: 60px; border-top: 1px dotted #41a3e2;}/* only4 Firefx IE 7 + */div. ticks: first-child {border-top: none;} div. ticks p {position: absolute; left: 101%; top:-2px; color: # f00; font-weight: bold ;}</style></head><body><!--把下面代码加到<body>与</body>之间--><ul id="q-graph"> <li id="q1" class="qtr">Q1<ul> <li class="north bar">20</li> <li class="south bar">10</li> </ul> </li> <li id="q2" class="qtr">Q2<ul> <li class="north bar">30</li> <li class="south bar">11</li> </ul> </li> <li id="q3" class="qtr">Q3<ul> <li class="north bar">40</li> <li class="south bar">29</li> </ul> </li> <li id="q4" class="qtr">Q4<ul> <li class="north bar"></li> <li class="south bar">0</li> </ul> </li> <li id="ticks"> <div class="ticks"><p>50</p></div> <div class="ticks"><p>40</p></div> <div class="ticks"><p>30</p></div> <div class="ticks"><p>20</p></div> <div class="ticks"><p>10</p></div> </li></ul><script language="javascript">Function qt (tid, qid) {var Hs = document. getElementById (tid ). offsetHeight-5var oObj = document. getElementById (qid ). getElementsByTagName ("li"), k = oObj. length; for (var oi = 0; oi<k-1;oi++){ if(oObj[oi].id!=''){var obj=oObj[oi].getElementsByTagName("li"),j=obj.lengthfor (var i=0;i<j;i++){if (obj[i].innerHTML!="" && parseInt(obj[i].innerHTML)>= 0) {obj [I]. style. height = Hs * parseInt (obj [I]. innerHTML)/50 + oi + 1 + "px"} else {obj [I]. style. display = "none" }}}} onload = function () {qt ("ticks", "q-graph ")}</script></body></html>
Tip: you can modify some code before running
