JavaScript根据数据生成百分比图和柱状图的实例代码


Posted in Javascript onJuly 14, 2013
<HTML> 
<head> 
<title>JS百分比图和柱状图</title>   
<xml:namespace prefix="v"/>   
<style>   
 v\:* {behavior=url(#default#VML)}   
</style>   
<style>   
a:hover {color:maroon}   
h2 {color:#006600;   
       margin-top: 0pt;   
       margin-bottom: 0pt}   
h3 {color:#006600;   
       margin-top: 6pt;   
       margin-bottom: 3pt}   
h4 {color:#006600;   
       font-family: Arial;   
       font-size: 10pt;   
       margin-top: 3pt;   
       margin-bottom: 0pt}   
h5 {color:#006600;   
       margin-top: 0pt;   
       margin-bottom: 0pt}   
p  {margin-top: 0pt;   
       margin-bottom: 12pt}   
</style>   
</head>   
<BODY text="#000000" bgcolor="#FFFFFF" link="#006600" vlink="#006600" leftmargin=6 topmargin=6>   
<style> p.Chart {font-size:8pt; font-family:"Times"; color:black; text-align:right; } </style>   
<div style='margin-top:12pt; position:relative; '>   
<v:group style='height:324pt;width:432pt' coordsize="4320,3240">   
 <!-- Paper is white with a simple drop-shadow -->   
 <v:rect style='width:4320;height:3240' fillcolor="white">   
  <v:shadow on="true" offset="4pt,3pt" color="silver" />   
 </v:rect>   
 <v:rect style='position:absolute;left:40;top:40;width:4240;height:3160;' fillcolor="#FFFFFF" strokeweight=1.5pt /> 
 <p class=Chart style='position:absolute;left:123.1pt;top:17.8pt;width:189.8pt;height:12.6pt;color:"#000080";font-style:italic;font-size:18pt;text-align:center;'>Sample Piechart</p>   
 <p class=Chart style='position:absolute;left:225.5pt;top:310.4pt;width:198.5pt;height:5.6pt;color:"#008000";font-family:"Arial";'>Random numbers drawn as a simple pie</p>   
 <v:shape style='position:absolute; width:4320; height:3240' strokeweight=0.5pt fillcolor="#DBDBED" path="M 2250 1590 AE 2250 1590 791 791 -3538944 9437184 X E" />   
 <v:shape style='position:absolute;width:4320;height:3240' strokecolor="#000000" strokeweight=0.7pt >   
  <v:stroke joinstyle=round endcap=round />   
  <v:fill on="false" />   
  <v:path v=" M 3115 1309 L 2927 1370 E "/>   
 </v:shape>   
 <p class=Chart style='position:absolute;left:315.9pt;top:127.3pt;width:39.3pt;height:5.6pt; text-align=left; '>One: 30</p>   
 <v:shape style='position:absolute; width:4320; height:3240' strokeweight=0.5pt fillcolor="#AA5555" path="M 2245 1629 AE 2245 1629 791 791 -9201254 5662310 X E" />   
 <v:shape style='position:absolute;width:4320;height:3240' strokecolor="#000000" strokeweight=0.7pt >   
  <v:stroke joinstyle=round endcap=round />   
  <v:fill on="false" />   
  <v:path v=" M 3139 1329 M 2131 2532 L 2156 2336 E "/>   
 </v:shape>   
 <p class=Chart style='position:absolute;left:171.9pt;top:249.6pt;width:39.6pt;height:5.6pt;'>Two: 18</p>   
 <v:shape style='position:absolute; width:4320; height:3240' strokeweight=0.5pt fillcolor="#F2F8F8" path="M 2250 1590 AE 2250 1590 791 791 -13290701 4089446 X E" />   
 <v:shape style='position:absolute;width:4320;height:3240' strokecolor="#000000" strokeweight=0.7pt >   
  <v:stroke joinstyle=round endcap=round />   
  <v:fill on="false" />   
  <v:path v=" M 2115 2552 M 1350 1723 L 1546 1694 E "/>   
 </v:shape>   
 <p class=Chart style='position:absolute;left:83.5pt;top:168.7pt;width:49.9pt;height:5.6pt;'>Three: 13</p>   
 <v:shape style='position:absolute; width:4320; height:3240' strokeweight=0.5pt fillcolor="#8BC58B" path="M 2193 1535 AE 2193 1535 791 791 -16121856 2831155 X E" />   
 <v:shape style='position:absolute;width:4320;height:3240' strokecolor="#000000" strokeweight=0.7pt >   
  <v:stroke joinstyle=round endcap=round />   
  <v:fill on="false" />   
  <v:path v=" M 1334 1743 M 1544 898 L 1685 1037 E "/>   
 </v:shape>   
 <p class=Chart style='position:absolute;left:116.3pt;top:86.2pt;width:36.5pt;height:5.6pt;'>Four: 9</p>   
 <v:shape style='position:absolute; width:4320; height:3240' strokeweight=0.5pt fillcolor="#C080C0" path="M 2250 1590 AE 2250 1590 791 791 -17694720 1572864 X E" />   
 <v:shape style='position:absolute;width:4320;height:3240' strokecolor="#000000" strokeweight=0.7pt >   
  <v:stroke joinstyle=round endcap=round />   
  <v:fill on="false" />   
  <v:path v=" M 1528 918 M 2061 700 L 2102 894 E "/>   
 </v:shape>   
 <p class=Chart style='position:absolute;left:174.1pt;top:66.4pt;width:30.4pt;height:5.6pt;'>Five: 5</p>   
</v:group></div>    
<html>   
<head>   
</head>   
<script language=JavaScript>   
function displayTitle( title )   
{   
   document.write("<center><i>" + title + "</i></center><br>");   
}   
function generateRandomNumber(num) {   
  return Math.round( Math.random() * (num - 1) ) + 1;   
}   
function plottablehead(  val )   
{   
   document.writeln("<table border = 0 bgcolor = black width = 10 height = 10 cellpadding = 0 cellspacing = 0>");   
   document.write("<tr> <i>" + val + "</i>");   
}   
function plottabletail()   
{   
  document.write("</tr></table><br>");   
}   
function plotcolor(d, clr)   
{   
    for(i=1;i<=d;i++){   
  document.write("<td bgcolor = " + clr + ">   </td>");   
 }   
}   
function setColor(foreground,background)   
{   
  document.fgColor=foreground;   
  document.bgColor=background;   
}   
setColor("orange","black");   
a=generateRandomNumber(50);   
plottablehead( a );   
plotcolor(a, "red");   
plottabletail();   
a=generateRandomNumber(50);   
plottablehead( a );   
plotcolor(a, "blue");   
plottabletail();   
a=generateRandomNumber(50);   
plottablehead( a );   
plotcolor(a, "green");   
plottabletail();   
a=generateRandomNumber(50);   
plottablehead( a );   
plotcolor(a, "yellow");   
plottabletail();   
a=generateRandomNumber(50);   
plottablehead( a );   
plotcolor(a, "gray");   
plottabletail();   
a=generateRandomNumber(50);   
plottablehead( a );   
plotcolor(a, "midnightblue");   
plottabletail();   
//-->   
</script>   
</head>   
</body>   
</html>  
Javascript 相关文章推荐
js 替换
Feb 19 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
实现一个简单得数据响应系统
Nov 11 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 #Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 #Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 #Javascript
js confirm()方法的使用方法实例
Jul 13 #Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 #Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 #Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 #Javascript
You might like
层叠菜单的动态生成
2006/10/09 PHP
PHP5 面向对象程序设计
2008/02/13 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
详解Bootstrap插件
2016/04/25 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
python如何更新包
2020/06/11 Python
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
美国电视购物HSN官网:HSN
2016/09/07 全球购物
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
启动一个线程是用run()还是start()
2016/12/25 面试题
学校安全生产承诺书
2014/05/23 职场文书
欢迎领导检查标语
2014/06/27 职场文书
2014年群众路线党员自我评议
2014/09/24 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
驻村工作简报
2015/07/20 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技