📄 实例74.柱形图统计.html
字号:
<style>v\:*{behavior:url(#default#VML);position:absolute;}div,td {font-size:12px;}.gra2{BACKGROUND-color: #003399;font-size:1px;BORDER-bottom: #000000 1px solid;} </style><SCRIPT language="JavaScript"><!--var d=new Array(); // 统计数据数组var d_pv_max=0; // 最大数var d_pv_all=0; // 总数var title_all=""; // 统计图标题var title_pv=""; // 数据标题var b_w=0; // 柱状图柱宽var b_s_w=0; // 柱状图间隔function init_data(v) // 初始化数据{ d=new Array(); d_pv_max=0; d_pv_all=0; var di=v.split(";"); // 先通过;来分割 var di0,di1,di2; d[0]=di[0].split(","); // 通过,来分割 title_all=d[0][0]; // 此实例中显示成绩分析图(详细请看div中的data数据) title_pv=d[0][1]; // 此实例中显示总人数 b_w=Math.floor(d[0][2]); // 柱状图柱为20 b_s_w=Math.floor(d[0][3]); // 柱状图间隔为25 for(var i=1;i<di.length;i++) { d[i]=di[i].split(","); // 通过,来分割得出数据 di0=Math.floor(d[i][0]); // 得出分数段 di2=Math.floor(d[i][1]); // 成绩 d_pv_all+=di2; // 总成绩 d_pv_max=d_pv_all; }}function draw_bar(sa) // 画柱状图{ var sa_div=document.getElementsByName("sa")[sa]; var v=sa_div.data; // 获得data中的数据 init_data(v); var b_d1=""; var b_d2=""; var title=""; var b='<div align="center">'+title_all+' (柱状图)</div><table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td valign="top" rowspan="2"><p align="right" style="line-height: 12px; margin-right: 2">'; for(var i=1;i<d.length;i++) { title=''+title_pv+':'+d[i][1]+' '+Math.floor(d[i][1]/d_pv_all*1000)/10+'%'; b_d1+='<td align="center" valign="bottom" width="'+(b_w+b_s_w)+'" background="tu_back.gif" title="'+title+'"><div class="gra2" style="width:'+b_w+';height:'+d[i][1]/d_pv_max*100+'"></div></td>'; b_d2+='<td width='+(b_w+b_s_w)+' title="'+title+'" id="x_'+sa+'_'+i+'">'+d[i][0]+'</td>'; } var d_per=d_pv_max%4==0?d_pv_max/4:Math.floor(d_pv_max/4+1); // 计算出Y轴按照4段分割显示数据的值 for(var i=4;i>0;i--) b+=d_per*i+'<br><br>'; // 循环出Y轴的数据 b+='0</p></td>'; b+='<td width="10" valign="top"><img src="tu_back_left.gif" width="10"></td>'; b+=b_d1; b+='<td width="10" valign="top"><img src="tu_back_right.gif" width="10"></td></tr><tr height="20" align="center" style="letter-spacing:-2;font-family:Arial;font-size:12px"><td></td>'; b+=b_d2; b+='<td></td></tr></table><div align="center"><span class="gra2" style="height:10;width:'+b_w+';border:#000000 1px solid;"></span> '+title_pv+' '+d_pv_all+'</div>'; sa_div.innerHTML=b;}function draw_pic() // 画统计图{ var sa_obj=document.getElementsByName("sa"); // 获取统计图的数量 for(var i=0;i<sa_obj.length;i++) draw_bar(i); // 循环显示}//--></script><body onload="draw_pic();"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td> <table width="100%" border="0" align="center" cellpadding="1" cellspacing="1" style="border-collapse: collapse"> <tr align="center"> <td width="100%" class="back_font"> <div id="sa" data="成绩分析图,总人数,20,25;40分以下,4;40-59分,21;60-69分,54;70-79分,35;80-89分,15;90-99分,5;100分,1"></div> </td> </tr> </table> </td> </tr></table></body>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -