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 相关文章推荐
Javascript下的keyCode键码值表
Apr 10 Javascript
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 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之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
php下拉选项的批量操作的实现代码
2013/10/14 PHP
php异常处理使用示例
2014/02/25 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
短信提示使用 特效
2007/01/19 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
js表头排序实现方法
2015/01/16 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
JavaScript中的this妙用实例分析
2020/05/09 Javascript
javascript实现评分功能
2020/06/24 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
python中的列表推导浅析
2014/04/26 Python
python使用pil生成缩略图的方法
2015/03/26 Python
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
python配置文件写入过程详解
2019/10/19 Python
sklearn+python:线性回归案例
2020/02/24 Python
python中reload重载实例用法
2020/12/15 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
淘宝客服工作职责
2014/07/11 职场文书
商场消防安全责任书
2014/07/29 职场文书
付款委托书范本
2014/10/05 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
python和anaconda的区别
2022/05/06 Python
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python