程序员经验分享-hwhale

js生成柱状图

2023-11-15
  1. <script language=javascript>
  2. function table1(total,table_x,table_y,thickness,table_width,all_width,all_height,table_type){
  3. //参数含义(传递的数组，横坐标，纵坐标，柱子的厚度，柱子的宽度，图表的宽度，图表的高度,图表的类型)
  4. //纯JAVASCRIPT代码生成图表函数1——柱状图
  5. //运行环境为IE 6.0
  7. //注意：倒立柱状图dataArray显示顺序错了
  8.   
  9. //***************************************************************************************
  10. var tmdColor1 = new Array();
  11. tmdColor1[0] = "#d1ffd1"; tmdColor1[1] = "#ffbbbb"; tmdColor1[2] = "#ffe3bb";
  12. tmdColor1[3] = "#cff4f3"; tmdColor1[4] = "#d9d9e5"; tmdColor1[5] = "#ffc7ab";
  13. tmdColor1[6] = "#ecffb7"; tmdColor1[7] = "green";
  14. var tmdColor2 = new Array();
  15. tmdColor2[0] = "#00ff00"; tmdColor2[1] = "#ff0000"; tmdColor2[2] = "#ff9900";
  16. tmdColor2[3] = "#33cccc"; tmdColor2[4] = "#666699"; tmdColor2[5] = "#993300";
  17. tmdColor2[6] = "#99cc00"; tmdColor2[7] = "yellow";
  18. var tb_color = new Array(tmdColor1,tmdColor2);
  19. var line_color = "#69f";
  20. var left_width = 70;
  21. var length = thickness/2;
  22. var total_no = total[0].length;
  23. var temp1 = 0;
  24. var temp2,temp4,temp4;
  25. for(var i = 0;i<total_no;i++) {
  26.  if(temp1<total[0][i]) {
  27.   temp1 = total[0][i];
  28.  }
  29. }
  30. temp1 = parseInt(temp1.toString());
  31. if(temp1>9){  
  32.  temp2 = temp1.toString().substr(1,1)
  33.  if(temp2>4) {
  34.   temp3 = (parseInt((temp1/(Math.pow(10,(temp1.toString().length-1)))).toString())+1)*Math.pow(10,(temp1.toString().length-1));
  35.  }
  36.  else {
  37.   temp3 = (parseInt((temp1/(Math.pow(10,(temp1.toString().length-1)))).toString())+0.5)*Math.pow(10,(temp1.toString().length-1));
  38.  } 
  39. } 
  40. else{
  41.  if(temp1>4)
  42.   temp3 = 10; 
  43.  else 
  44.   temp3 = 5;
  45. }
  46. temp4=temp3
  47. document.write("<!--[if gte vml 1]><v:rect id='_x0000_s1027' alt='' style='position:absolute;left:" + (table_x+left_width) + "px;top:" + table_y + "px;width:" + all_width + "px;height:" + all_height + "px;z-index:-1' fillcolor='#9cf' stroked='f'><v:fill rotate='t' angle='-45' focus='100%' type='gradient'/></v:rect><![endif]-->");
  48. document.write("<!--[if gte vml 1]><v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x+left_width) + "px," + (table_y+all_height) + "px' to='" + (table_x+all_width+left_width) + "px," + (table_y+all_height) + "px'/><![endif]-->");
  49. document.write("<!--[if gte vml 1]><v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x+left_width) + "px," + table_y + "px' to='" + (table_x+left_width) + "px," + (table_y+all_height) + "px'/><![endif]-->");
  51. switch (table_type){
  52.  case "A":  
  53.  var table_space = (all_width-table_width*total_no)/total_no;
  54.  document.write("<!--[if gte vml 1]><v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x+left_width+length) + "px,"+ table_y + "px' to='" + (table_x+left_width+length) + "px," + (table_y+all_height-length) + "px' strokecolor='" + line_color + "'/><![endif]-->");
  56.  for(var i=0;i<=all_height-1;i+= all_height/5) {
  57.   document.write("<!--[if gte vml 1]><v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x+left_width)+ "px," + (table_y+all_height-length-i) + "px' to='" + (table_x+left_width+length) + "px," + (table_y+all_height-i) +"px' strokecolor='" + line_color + "'/><![endif]-->");
  58.   document.write("<!--[if gte vml 1]><v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x+left_width+length) + "px," + (table_y+all_height-length-i) + "px' to='" + (table_x+all_width+left_width) + "px," + (table_y+all_height-length-i) + "px' strokecolor='" + line_color + "'/><![endif]-->");
  59.   document.write("<!--[if gte vml 1]><v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x+(left_width-15)) + "px," + (table_y+i) + "px' to='" + (table_x+left_width) + "px," + (table_y+i) + "px'/><![endif]-->");
  60.   document.write("<!--[if gte vml 1]>");
  61.   document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + table_x + "px;top:" + (table_y+i) + "px;width:" + left_width + "px;height:18px;z-index:1'>");
  62.   document.write("<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='right'>" + temp4 + "</td></tr></table></v:textbox></v:shape><![endif]-->");
  63.   temp4 = temp4-temp3/5;
  64.  }
  65.  for(var i=0;i<total_no;i++) {
  66.   
  67.   var temp_space = table_x + left_width + table_space / 2 + table_space * i + table_width * i;  
  68.   document.write("<v:rect id='_x0000_s1025' alt='' style='position:absolute;left:");
  69.   document.write(temp_space);
  70.   document.write("px;top:");
  71.   document.write(table_y + all_height * (1 - (total[0][i] / temp3)));
  72.   document.write("px;width:" + table_width + "px;height:" + all_height * (total[0][i] / temp3) + "px;z-index:1' fillcolor='" + tb_color[1][i] + "'>");
  73.   document.write("<v:fill color2='" + tb_color[0][i] + "' rotate='t' type='gradient'/>")
  74.   document.write("<o:extrusion v:ext='view' backdepth='" + thickness + "pt' color='" + tb_color[1][i] + "' on='t'/>");
  75.   document.write("</v:rect>");
  76.   document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + temp_space + "px;top:" + (table_y+all_height*(1-(total[0][i]/temp3))-table_width) + "px;width:" + (table_space+15) + "px;height:18px;z-index:1'>");
  77.   document.write("<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='center'>" + total[0][i] + "</td></tr></table></v:textbox></v:shape>");
  78.   document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + (temp_space-table_space/2) + "px;top:" + (table_y+all_height+1) + "px;width:" + (table_space+table_width) + "px;height:18px;z-index:1'>");
  79.   document.write("<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='center'>" + total[1][i] + "</td></tr></table></v:textbox></v:shape>");
  80.  }
  82.  break;
  83. case "B":
  84.  var table_space = (all_height - table_width * total_no) / total_no;
  85.  document.write("<!--[if gte vml 1]><v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x+left_width+length) + "px," + (table_y+all_height-length) + "px' to='" + (table_x+left_width+all_width) + "px," + (table_y+all_height-length) + "px' strokecolor='" + line_color + "'/><![endif]-->");
  86.  for(var i=0;i<=all_width-1;i +=all_width/5) {
  87.   document.write("<!--[if gte vml 1]><v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x+left_width+i) + "px," + (table_y+all_height-length) + "px' to='" + (table_x+left_width+length+i) + "px," + (table_y+all_height) + "px' strokecolor='" + line_color + "'/><![endif]-->");
  88.   document.write("<!--[if gte vml 1]><v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x+left_width+length+i) + "px," + (table_y+all_height-length) + "px' to='" + (table_x+left_width+length+i) + "px," + table_y + "px' strokecolor='" + line_color + "'/><![endif]-->");
  89.   document.write("<!--[if gte vml 1]><v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x+left_width+i+all_width/5) + "px," + (table_y+all_height) + "px' to='" + (table_x+left_width+i+all_width/5) + "px," + (table_y+all_height+15) + "px'/><![endif]-->");
  90.   document.write("<!--[if gte vml 1]>");
  91.   document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + (table_x+left_width+i+all_width/5-left_width) + "px;top:" + (table_y+all_height) + "px;width:" + left_width + "px;height:18px;z-index:1'>");
  92.   document.write("<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='right'>" + temp4 + "</td></tr></table></v:textbox></v:shape><![endif]-->");
  93.   temp4 = temp4 - temp3 / 5;
  94.  }
  96.  for(var i=0;i<total_no;i++) {
  97.   var temp_space = table_space/2 + table_space * i + table_width * i;
  98.   document.write("<v:rect id='_x0000_s1025' alt='' style='position:absolute;left:");
  99.   document.write(table_x + left_width);
  100.   document.write("px;top:");
  101.   document.write(table_y + temp_space);
  102.   document.write("px;width:" + all_width * (total[0][i] / temp3) + "px;height:" + table_width + "px;z-index:1' fillcolor='" + tb_color[1][i] + "'>");
  103.   document.write("<v:fill color2='" + tb_color[0][i] + "' rotate='t' angle='-90' focus='100%' type='gradient'/>");
  104.   document.write("<o:extrusion v:ext='view' backdepth='" + thickness + "pt' color='" + tb_color[1][i] + "' on='t'/>");
  105.   document.write("</v:rect>");
  106.   document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + (table_x + left_width + all_width * (total[0][i] / temp3) + thickness / 2) + "px;top:" + (table_y + temp_space) + "px;width:" + (table_space + 15) + "px;height:18px;z-index:1'>");
  107.   document.write("<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='center'>" + total[0][i] + "</td></tr></table></v:textbox></v:shape>");
  109.   document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + table_x + "px;top:" + (table_y + temp_space) + "px;width:" + left_width + "px;height:18px;z-index:1'>");
  110.   document.write("<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='right'>" + total[1][i] + "</td></tr></table></v:textbox></v:shape>");
  111.  }
  112.   
  113.  }
  114. }
  115. </script>
  116. <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  117. <!--[if !mso]>
  118. <style>
  119. v/:*         { behavior: url(#default#VML) }
  120. o/:*         { behavior: url(#default#VML) }
  121. .shape       { behavior: url(#default#VML) }
  122. </style>
  123. <![endif]-->
  124. <head>
  125. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  126. <title></title>
  127. <style>
  128. TD { FONT-SIZE: 9pt}
  129. </style></head>
  130. <body topmargin=5 leftmargin=0 scroll=AUTO>
  131. <script language=javascript>
  132. //=============调用方法=====================
  133. /*
  134. 1、修改dataArray和nameArray对于数据
  135. 2、修改table1函数理的tmdColor2对于的颜色代码
  136. 3、"A"和"B"两种类别图
  137. */
  138. var dataArray = new Array()
  139. dataArray[0]=100.222
  140. dataArray[1]=2000
  141. dataArray[2]=3000
  142. dataArray[3]=4000
  143. dataArray[4]=5000
  144. dataArray[5]=6000
  145. dataArray[6]=7000
  146. dataArray[7]=8000
  148. var nameArray = new Array()
  149. nameArray[0]="经营报"
  150. nameArray[1]="招聘网"
  151. nameArray[2]="51Job"
  152. nameArray[3]="新民晚报"
  153. nameArray[4]="新闻晚报"
  154. nameArray[5]="南方周末"
  155. nameArray[6]="羊城晚报"
  156. nameArray[7]="晚报"
  158. var total= new Array(dataArray,nameArray)
  159. table1(total,200,50,20,35,500,200,"A");
  160. table1(total,200,320,20,20,400,250,"B")
  161. //倒立柱状图dataArray显示顺序错了
  162. //table1(total,table_x,table_y,thickness,table_width,all_width,all_height,table_type){
  163. //参数含义(传递的数组，横坐标，纵坐标，柱子的厚度，柱子的宽度，图表的宽度，图表的高度,图表的类型)
  164. </script>
  165. </body>
  166. </html>

http://www.cnblogs.com/zhongcj/archive/2008/03/07/1094632.html

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

table

Behavior

Office

scroll

js生成柱状图 的相关文章

随机推荐

  • RabbitMQ 端口详解

    4369 epmd 25672 Erlang distribution Epmd 是 Erlang Port Mapper Daemon 的缩写 在 Erlang 集群中相当于 dns 的作用 绑定在4369端口上 5672 5671 AM

  • c++ 定时器_「STM32」定时器中断实验

    在上一篇文章中 STM32 定时器概述 中 定时器可以被人为分为4个大部分 时钟发生器 实际模块 输入捕获 输出比较 而定时器中断实验 我们更多的在操作时钟发射器这个模块 这个应用也是定时器最基本的应用了 时钟选择 内部时钟选择 时钟计算方

  • SpringBoot使用@JsonDeserialize和@JsonSerialize注解的功能简介说明

    转自 SpringBoot使用 JsonDeserialize和 JsonSerialize注解的功能简介说明 下文笔者讲述 JsonDeserialize和 JsonSerialize注解的功能简介说明 SpringMVC 在Spring

  • 【SQL基础】【关键字大写】条件查询：比较、不等于、IN、为空、BETWEEN

    概述 1 内容介绍 条件查询 比较 不等于 IN 为空 BETWEEN 2 建表语句 drop table if exists user profile CREATE TABLE user profile id int NOT NULL d

  • 使用 vite 代替 webpack 搭建 react 前端开发环境

    说明 在大型前端项目中 我们一般会使用 webpack Rollup 等工具进行模块整合 但是庞大的代码量会使得我们在开发阶段花费更多的时间在 代码改动 gt 页面渲染 这个阶段 即使使用 HMR 这个问题也没有完全的解决 项目代码量达到一

  • plsql链接服务器无响应,sqlplus 连接数据库无响应

    一批三台安装服务器 先后出现了sqlplus 连接数据库无响应问题 1 因为几乎同一时间出现问题 起初怀疑是网络组对网络有整体调整 后经过确认网络组有调整 但不影响我们的服务器 2 telnet server 1521端口正常响应 3 从终

  • 深度解析，抖音对口型唱歌类短视频内容制作流程，步骤技巧分享

    就像之前分享的信息差案例一样 任何时候都有信息差 但是还有一种叫认知差 就是认知高的人赚认知低的人的钱 不是有句话很火吗 你永远也赚不到认知以外的钱 更多精彩干货请关注共众号 萤火宠 你的认知很高 可以高客单价赚高认知人群的钱 但是也有些人

  • 图形学-改进的Bresenham算法

    图形学 改进的Bresenham算法 原理 代码 原理 虽然中点Bresenham算法是一种效率很高的算法 但也还有改进的余地 当然 其基本原理仍是每次在最大位移方向上走一步 而另一个方向上走还是不走取决于误差项的判断 根据中点Bresen

  • JSP和JavaBean

    8 JSP 8 1 什么是JSP Java Servlet Pages java服务器端页面 也和Servlet一样 用于实现动态Web技术 最大特点 写JSP就像是写HTML 区别 HTML只给用户提供静态的数据 JSP页面中可以嵌入Ja

  • 智慧政务行业发展报告

    转自微信公众号 智慧城市圈子邱文斌 一 智慧政务行业发展状况 从上个世纪90年代开始 政府信息化的建设就开始围绕 通 进行 而现今正逐渐过渡到 云 的建设 从网络的连通 数据的整合 到云的出现与整合 政府信息化的建设是一个漫长而又快速发展的

  • element-ui 实现多日期选择

    一 前端代码

  • Spring 多线程异步上传图片、处理水印、缩略图

    使用环境 SpringBoot FastDfs thumbnailator fdfs环境自己搞吧 thumbnailator maven依赖

  • C++中引用的用法以及将引用作为函数的形参

    在C 中引用就相当于是给变量起了一个别名 有点类似于指针 但是与指针又不同 引用的初始化 int i i 10 变量i的引用 引用必须在创建的时候就要初始化 而指针可以在任意的时候初始化 引用就相当于是给变量起了一个别名 int i r i

  • HTML基本结构

    HTML一般是在vscod中进行书写 后缀为html 其完整的基本结构如下 h1 一级标题 h1 每一个尖括号 lt gt 代表着标签或者说是元素 不同的标签代表有着不同的作用 标签一般成对出现后一个标签为前一个标签加一个 例如 但也有单个

  • 基于巴法云的esp8266实现温湿度、LED、sg90舵机和HC-RS04实现的小程序远程控制

    基于巴法云的esp8266实现温湿度 LED sg90舵机和HC RS04实现的小程序远程控制 具体代码 本项目想法已经在我脑海想了很久了 都没有时间去实现它 这次刚刚考完试就用了两天把它做了出来 希望对大家有帮助 有什么需要的可以在下面留

  • upload-labs：pass-10

    is upload false msg null if isset POST submit if file exists UPLOAD PATH deny ext array php php5 php4 php3 php2 html htm

  • 工厂三兄弟之工厂方法模式（四）

    5 重载的工厂方法 Sunny公司开发人员通过进一步分析 发现可以通过多种方式来初始化日志记录器 例如可以为各种日志记录器提供默认实现 还可以为数据库日志记录器提供数据库连接字符串 为文件日志记录器提供文件路径 也可以将参数封装在一个Obj

  • Puppeteer 安装与注意事项 《一》

    Puppeteer 安装与注意事项 1 安装node js 在使用puppeteer的时候 它一些低版本的node是不支持的 作者推荐使用8以上的版本 否则node在后面使用puppeteer的时候会 抛出 SyntaxError Unex

  • 从外部验证安全密码存储

    许多网站 包括 Adobe Yahoo LinkedIn Gawker等大型网站 不安全地存储用户密码 可以是纯文本格式的 也可以是加密的 可逆的 格式 或者是使用残破或蛮力的哈希函数 许多网站的密码存储机制仍然很差 所以呢 好吧 如果数据

  • js生成柱状图

热门标签