»
Tiếng AnhTiếng PhápTiếng Việt

In - Biểu đồ ngẫu nhiên - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Đồ họa » Biểu đồ ngẫu nhiên
URL: https://www.javascriptbank.com/random-bar-chart.html

Biểu đồ ngẫu nhiên © JavaScriptBank.comHiệu ứng sẽ vẽ một biểu đồ cột với các số liệu ngẫu nghiên mỗi khi người dùng nhấn nút.

Phiên bản đầy đủ: jsB@nk » Đồ họa » Biểu đồ ngẫu nhiên
URL: https://www.javascriptbank.com/random-bar-chart.html



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


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


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