首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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 相关文章推荐
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
js验证是否为数字的总结
Apr 14 Javascript
一个JS的日期格式化算法示例
Jul 31 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
js实现加载更多功能实例
Oct 27 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
Vue3 响应式侦听与计算的实现
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
NASA(1) 毅力号(1) 美国航天局(1) 酶(1) 数据(1) 塑料(1) 富碳陨石(1) 嘧啶碱基(2) 大脑(1) 火星(2)
You might like
怎么在Windows系统中搭建php环境
2013/08/31 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
vue-cli3.0 环境变量与模式配置方法
2018/11/08 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
使用Python的OpenCV模块识别滑动验证码的缺口（推荐）
2019/05/10 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
Pytorch之Variable的用法
2019/12/31 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
学生打架检讨书大全
2014/01/23 职场文书
红旗方阵解说词
2014/02/12 职场文书
大学四年个人自我小结
2014/03/05 职场文书
食品安全宣传标语
2014/06/07 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
艺术节开幕词
2015/01/28 职场文书
2015教师年度考核评语
2015/03/25 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android