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 版
Mar 24 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
js初始化验证实例详解
Nov 26 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
layui清除radio的选中状态实例
Nov 14 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
解决ant Design中Select设置initialValue时的大坑
Oct 29 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
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
jQuery 处理表单元素的代码
2010/02/15 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
python pygame模块编写飞机大战
2018/11/20 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
python实现银行管理系统
2019/10/25 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
法学研究生自我鉴定范文
2013/12/04 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
工作作风承诺书
2014/08/30 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js