Version complète: jsB@nk » Graphic » Random Bar Chart
URL: https://www.javascriptbank.com/random-bar-chart.html
Cliquez sur la Redessine bouton et les barres dans le graphique sont redessinées de façon aléatoire. Le total est calculé sur le dessus. J'ai utilisé les styles en relation avec une JavaScript fonction qui définit la hauteur de la cellule unique rouge tables à un montant aléatoire n'importe où entre 1 pixel et 300 pixels. Utiliser JavaScript dynamiquement générer un graphique à barres
Version complète: jsB@nk » Graphic » Random Bar Chart
URL: https://www.javascriptbank.com/random-bar-chart.html
<STYLE type=text/css>TD.blank {WIDTH: 66px; HEIGHT: 30px}TD.set {WIDTH: 108px; HEIGHT: 30px}TD.total {WIDTH: 108px; HEIGHT: 30px}TD.numbers {VERTICAL-ALIGN: bottom; WIDTH: 72px; HEIGHT: 50px; TEXT-ALIGN: right}TD.values {VERTICAL-ALIGN: bottom; WIDTH: 90px; HEIGHT: 297px; TEXT-ALIGN: center}TD.bars {WIDTH: 72px; HEIGHT: 30px; BACKGROUND-COLOR: #ffffff}TD.days {FONT-SIZE: 16px; VERTICAL-ALIGN: bottom; WIDTH: 90px; FONT-FAMILY: "arial"; HEIGHT: 24px; TEXT-ALIGN: center}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=javascript type=text/javascript><!--var ids = new Array("b1","b2","b3","b4","b5","b6","b7");function graphIt() { var t = 0; for( i=0; i<ids.length; i++ ) { num = Math.floor(Math.random() * 300);document.getElementById(ids[i]).style.backgroundColor="#ff0040"; document.getElementById(ids[i]).style.height=num; t+=num; } document.getElementById("total").innerHTML = t;} --></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><TABLE cellSpacing=0 cellPadding=3 border=0> <TBODY> <TR> <TD class=blank></TD> <TD class=set><INPUT style="BACKGROUND-COLOR: #c0c0c0" onclick=graphIt() type=button value=ReDraw td <> <TD class=total id=sum><B>Total: <SPAN id=total></SPAN></B></TD></TR></TBODY></TABLE><TABLE cellSpacing=0 cellPadding=0 border=0><!-- main table --> <TBODY> <TR> <TD><!-- beginning of left side --> <TABLE cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR> <TD class=numbers>250 _</TD></TR> <TR> <TD class=numbers>200 _</TD></TR> <TR> <TD class=numbers>150 _</TD></TR> <TR> <TD class=numbers>100 _</TD></TR> <TR> <TD class=numbers>50 _</TD></TR> <TR> <TD class=numbers>0 _</TD></TR></TBODY></TABLE></TD><!-- end of left side --> <TD vAlign=top><!-- beginning of right side, the chart --> <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 cellPadding=0 border=1> <TBODY> <TR> <TD> <SCRIPT language=javascript type=text/javascript><!--var txt = "";txt += "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\r <tr>";for( i = 1; i <= 7; i++ ) { txt += " <td class=\"values\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td id=\"b" + i + "\" class=\"bars\"><\/td><\/tr><\/table><\/td>";} txt += " <\/tr>\r <\/table>";document.write(txt);--></SCRIPT> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><TABLE cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR> <TD width=72></TD> <TD class=days>Sunday</TD> <TD class=days>Monday</TD> <TD class=days>Tuesday</TD> <TD class=days>Wednesday</TD> <TD class=days>Thursday</TD> <TD class=days>Friday</TD> <TD class=days>Saturday</TD></TR></TBODY></TABLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->