柱状图生成器

CSS 文件

 1 body {
 2     background-color: white;
 3     color: black;
 4     font-size: 12px;
 5 }
 6 
 7 form {
 8     float: left;
 9     width: 200px;
10 }
11 
12 .vert {
13     text-align: center;
14     vertical-align: bottom;
15 }
16 
17 .horiz {
18     padding: 5px;
19 }
20 
21 th.vert {
22     border-left: 1px black solid;
23     border-bottom: 1px black solid;
24     vertical-align: middle;
25     text-align: left;
26     font-size: 16px;
27 }
28 
29 th.horiz {
30     border-right: 1px black solid;
31     vertical-align: middle;
32     text-align: left;
33     font-size: 16px;
34 }
View Code

JS文件

 1 window.onload = initAll;
 2 
 3 function initAll() {
 4     var radioButtons = document.getElementsByTagName("input");
 5     
 6     for (var i=0; i<radioButtons.length; i++) {
 7         if (radioButtons[i].type == "radio") {
 8             radioButtons[i].onclick = chgChart;
 9         }
10     }
11     chgChart();
12 }
13 
14 function chgChart() {
15     var bChart = new Object();
16     bChart.name = "Browser usage by year";
17     bChart.years = new Array("1998","1999","2000","2001","2002","2003","2004","2005","2006","2007","2008");
18     bChart.fieldnames = new Array("Netscape","MSIE","Other");
19     bChart.field1 = new Array(38.9,31.9,21.2,12.4,6.6,5.1,3,1,6,11,14);
20     bChart.field2 = new Array(60.6,67.4,78.3,85.6,92.5,94.0,92,89,90,84,79);
21     bChart.field3 = new Array(0.5,0.5,0.5,2.1,0.9,1.0,4,9,3,5,5);
22     bChart.fields = new Array(bChart.field1,bChart.field2,bChart.field3);
23     
24     var jsChart = new Object();
25     jsChart.name = "JavaScript usage by year";
26     jsChart.years = new Array("1998","1999","2000","2001","2002","2003","2004","2005","2006","2007","2008");
27     jsChart.fieldnames = new Array("1.2 or later","1.0 - 1.1","No JavaScript");
28     jsChart.field1 = new Array(63.4,66.5,78.4,80.2,88.1,89.1,94,89,96,95,94);
29     jsChart.field2 = new Array(18.7,12.6,2.8,0.8,0.3,0.3,0,0,0,0,0);
30     jsChart.field3 = new Array(17.9,21.0,18.8,19.0,11.6,10.6,4,9,3,4,5);
31     jsChart.fields = new Array(jsChart.field1,jsChart.field2,jsChart.field3);
32     
33     var radioButtons = document.getElementsByTagName("input");
34     var currDirection = getButton("direction");
35     var imgSrc = "images/" + getButton("color");
36     
37     if (getButton("type")=="browser") {    
38         var thisChart = bChart;
39     }
40     else {
41         var thisChart = jsChart;
42     }
43     
44     var chartBody = "<h2>"+thisChart.name+"</h2><table>";
45     
46     for (var i=0; i<thisChart.years.length; i++) {
47         if (currDirection=="horizontal") {
48             chartBody += "<tr><th rowspan='4' class='horiz'>"+thisChart.years[i];
49             chartBody += "</th><td colspan='2'></td></tr>";
50             for (var j=0; j<thisChart.fieldnames.length; j++) {
51                 chartBody += "<tr><td class='horiz'>"+thisChart.fieldnames[j];
52                 chartBody += "</td><td><img src='"+imgSrc+"' height='15' width='";
53                 chartBody += thisChart.fields[j][i]*3 + "' alt='horiz bar' />";
54                 chartBody += "&nbsp;&nbsp;"+thisChart.fields[j][i]+"</td></tr>";
55             }
56         }
57         else {
58             chartBody += "<tr><th rowspan='2' class='vert'>"+thisChart.years[i]+"</th>";
59             for (var j=0; j<thisChart.fieldnames.length; j++) {
60                 chartBody += "<td class='vert'><img src='" + imgSrc;
61                 chartBody += "' alt='vert bar' hspace='10' width='15' height='";
62                 chartBody += thisChart.fields[j][i]*3 +"' /></td>";
63             }
64             chartBody += "</tr><tr>";
65             for (j=0; j<thisChart.fieldnames.length; j++) {
66                 chartBody += "<td class='vert'>" + thisChart.fields[j][i] + "<br />";
67                 chartBody += thisChart.fieldnames[j] + "<br /><br /></td>";
68             }
69             chartBody += "</tr>";
70         }
71     }
72 
73     chartBody += "</table>";
74     document.getElementById("chartArea").innerHTML = chartBody;
75 
76     function getButton(buttonSet) {
77         for (var i=0; i<radioButtons.length; i++) {
78             if (radioButtons[i].name == buttonSet && radioButtons[i].checked) {
79                 return radioButtons[i].value;
80             }
81         }
82         return -1;
83     }
84 }
View Code

HTML文件

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 2         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title>Bar Chart Display</title>
 6     <link type="text/css" rel="stylesheet" href="script06.css" />
 7     <script type="text/javascript" src="script06.js"></script>
 8 </head>
 9 <body>
10 <form action="#">
11     Choose a chart<br />
12     <input type="radio" name="type" value="browser" checked="checked" /> Browser Usage<br />
13     <input type="radio" name="type" value="platform" /> JavaScript Usage<br />
14     <p><br /></p>
15     Choose a color<br />
16     <input type="radio" name="color" value="lilRed.gif" checked="checked" />&nbsp;Red<br />
17     <input type="radio" name="color" value="lilGreen.gif" /> Green<br />
18     <input type="radio" name="color" value="lilBlue.gif" /> Blue<br />
19     <p><br /></p>
20     Choose a direction<br />
21     <input type="radio" name="direction" value="horizontal" checked="checked" /> Horizontal<br />
22     <input type="radio" name="direction" value="vertical" /> Vertical
23 </form>
24 <div id="chartArea">&nbsp;</div>
25 </body>
26 </html>
View Code

 

posted @ 2015-04-03 14:31  壬子木  阅读(738)  评论(0)    收藏  举报