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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
jquery遍历input取得input的name
Apr 27 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 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开发
2015/09/28 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
python cookielib 登录人人网的实现代码
2012/12/19 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
Python 学习教程之networkx
2019/04/15 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
django-filter和普通查询的例子
2019/08/12 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
Python 项目转化为so文件实例
2019/12/23 Python
Django 路由层URLconf的实现
2019/12/30 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
python opencv实现图像配准与比较
2021/02/09 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
九九重阳节标语
2014/10/07 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
python基础之类方法和静态方法
2021/10/24 Python
使用Python拟合函数曲线
2022/04/14 Python