开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > 数据库系统 > Oracle数据库 > 查看源码
showbigsvg.js
资源名称：2004111521192723763.rar　[点击查看]
上传用户：zhou95159
上传日期：2013-06-28
资源大小：11k
文件大小：14k
源码类别：

Oracle数据库

开发平台：

Visual C++

showbigsvg.js：源码内容
  1. var arrColors   = ['red','green','blue','yellow','navy','gold','dodgerblue','navajowhite','mediumpurple'];
  3. //数组排序函数,升序
  4. function s(a,b) {
  5.   return a - b;
  6. }
  7. //排序函数用法
  8. //array.sort(s);
  10. //删除数组中的一个元素，参数dx表示该元素的index
  11. Array.prototype.baoremove = function(dx)
  12. {
  13.   if(isNaN(dx)||dx>this.length){return false;}
  14.   this.splice(dx,1);
  15. }
  17. //重新排列数组，去掉为空的值或者非正常的值
  18. //参数是一个两维数组，第一维表示数值的数组，第二维表示年份的数组，
  19. //两个子数组在排序前后均须保持一一对应关系
  20. function resortArray() {
  21.   //var tmparr1 = tmparr[0];
  22.   //var tmparr2 = tmparr[1];
  23.   var len = arrUseValue.length;
  24.   var tmpi = 0;
  25.   for(var i=0; i<len; i++) {
  26.     if(isNaN(arrUseValue[tmpi])) {
  27.       arrUseValue.baoremove(tmpi);
  28.       arrUseYear.baoremove(tmpi);
  29.       tmpi = (i > 0) ? i : 0;
  30.       //tmparr1.baoremove(i);
  31.       //tmparr2.baoremove(i);
  32.     } else {
  33.       tmpi = i + 1;
  34.     }
  35.   }
  36.   //var retarr = new Array(tmparr1,tmparr2);
  37.   //return retarr;
  38. }
  40. function getMaxValue(tmparr) {
  41.   var maxValue = 0;
  42.   for (var i=0; i<tmparr.length; i++) {
  43.     var value = parseFloat(tmparr[i]);
  44.     if (value > maxValue) maxValue = value;
  45.   }
  46.   maxValue = Math.ceil(maxValue);
  47.   return maxValue;
  48. }
  51. function getMinValue(tmparr) {
  52.   var minValue = 1000000000000000;
  53.   for (var i=0; i<tmparr.length; i++) {
  54.     var value = parseFloat(tmparr[i]);
  55.     if (value < minValue) {
  56.       minValue = value;
  57.     }
  58.   }
  59.   minValue = Math.floor(minValue);
  60.   return minValue;
  61. }
  64. function getMaxPeriod(tmparr) {
  65.   var maxValue = 0;
  66.   for (var i=0; i<tmparr.length; i++) {
  67.     var value = tmparr[i][0];
  68.     if (value > maxValue) maxValue = value;
  69.   }
  70.   return maxValue;
  71. }
  74. function getMinPeriod(tmparr) {
  75.   var minPeriod = 3000;
  76.   for (var i=0; i<tmparr.length; i++) {
  77.     var value = tmparr[i][0];
  78.     if (value < minPeriod) minPeriod = value;
  79.   }
  80.   return minPeriod;
  81. }
  83. //显示提示窗口    
  84. function ShowTooltip(mousemove_event,txt)
  85. {
  86.   //obj=mousemove_event.target.parentNode;
  87.   //obj.style.setProperty("opacity","0.5");
  88.   
  89.   var ttrelem,tttelem,posx,posy,curtrans,ctx,cty;
  91.   ttrelem=svgDoc.getElementById("ttr");
  92.   tttelem=svgDoc.getElementById("ttt");
  94.   posx=mousemove_event.clientX;
  95.   posy=mousemove_event.clientY;
  96.   tttelem.childNodes.item(0).data=txt;
  98.   curtrans=svgDoc.documentElement.currentTranslate;
  99.   ctx=curtrans.x;
  100.   cty=curtrans.y;
  102.   ttrelem.setAttribute("x",posx-ctx);
  103.   ttrelem.setAttribute("y",posy-cty-20);
  104.   tttelem.setAttribute("x",posx-ctx+5);
  105.   tttelem.setAttribute("y",posy-cty-8);
  106.   ttrelem.setAttribute("width",tttelem.getComputedTextLength()+30);
  107.   tttelem.setAttribute("style","fill: #00C; font-size: 13px; visibility: visible");
  108.   ttrelem.setAttribute("style","fill: #FFC; stroke: #000; stroke-width: 0.5px;
  109.     visibility: visible");
  110. }
  111. //隐藏提示窗口
  112. function HideTooltip(mouseout_event)
  113. {
  114.   //obj=mouseout_event.target.parentNode;
  115.   //obj.style.setProperty("opacity","1.0");
  116.   
  117.   var ttrelem,tttelem;
  119.   ttrelem=svgDoc.getElementById("ttr");
  120.   tttelem=svgDoc.getElementById("ttt");
  121.   ttrelem.setAttribute("style","visibility: hidden");
  122.   tttelem.setAttribute("style","visibility: hidden");
  123. }
  124. //窗口缩放
  125. function ZoomControl()
  126. {
  127.   var curzoom;
  129.   curzoom=svgDoc.documentElement.currentScale;
  130.   svgDoc.getElementById("tooltip").setAttribute("transform","scale("+1/curzoom+")");
  131. }
  132.     
  133. //清除svg图像中的所有元素，便于重新画图
  134. function deleItem() {
  135.   //var gnode = svgDoc.getElementById("gc");
  136.   while (gnode.getChildNodes().getLength() > 0) {
  137.     gnode.removeChild(gnode.getFirstChild());
  138.   }
  139. }
  141. //画折线图，第一个参数是数值数组，
  142. //第二个参数是最小值，第三个参数是最大值
  143. function drawPolyline(tmparr,tmpminv,tmpmaxv) {
  144.   var vpoint = "";
  145.   var t = tmparr.length;
  146.   var addv = 320 / (t - 1);
  147.   var vx = 29;
  148.   var vy = 10;
  149.   tmpdiv = (tmpmaxv - tmpminv) / 10;
  150.   
  151.   tmpmaxv = Math.ceil(tmpmaxv + tmpdiv);
  152.   tmpminv = Math.floor(tmpminv - tmpdiv);
  153.   
  154.   for(var i=0;i<t;i++) {
  155.     var txtcirc = arrUseYear[i] + ", " + tmparr[i];
  156.     //确定x坐标
  157.     vx = 29 + i * addv;
  158.     vpoint += vx + ",";
  159.     //确定y坐标
  160.     //alert(tmparr[i]);
  161.     vy = 230 - (tmparr[i] - tmpminv) / (tmpmaxv - tmpminv) * 220;
  162.     vpoint += vy + ",";
  163.     //alert(vx);
  164.     //alert(vy);
  165.     //alert(vpoint);
  166.     //添加小圆点
  167.     var newcircle = svgDoc.createElement("circle");
  168.     newcircle.setAttribute("cx",vx);
  169.     newcircle.setAttribute("cy",vy);
  170.     newcircle.setAttribute("r",2);
  171.     newcircle.setAttribute("style","cursor:crosshair;fill:" + arrColors[i]);
  172.     newcircle.setAttribute("onmouseover","ShowTooltip(evt,'" + txtcirc + "')" );
  173.     newcircle.setAttribute("onmouseout","HideTooltip(evt)");
  174.     gnode.appendChild(newcircle);
  175.   }
  176.   vpoint  = vpoint.substring(0,(vpoint.length - 1));
  177.   //alert(vpoint);
  178.   var newpoly = svgDoc.createElement("polyline");
  179.   newpoly.setAttribute("points",vpoint);
  180.   newpoly.setAttribute("style","fill: none; stroke: #00C; stroke-width: 1.5px");
  181.   gnode.appendChild(newpoly);
  182. }
  184. //画柱状图，第一个参数是数值数组，
  185. //第二个参数是最小值，第三个参数是最大值
  186. function drawRectange(tmparr,tmpminv,tmpmaxv) {
  187.   var vpoint = "";
  188.   var t = tmparr.length;
  189.   //var addv = 32.5;
  190.   var addv = (349 - 29 - 15) / (t - 1);
  191.   var vx = 29;
  192.   var vy = 0;
  193.   tmpdiv = (tmpmaxv - tmpminv) / 10;
  194.   
  195.   tmpmaxv = Math.ceil(tmpmaxv + tmpdiv);
  196.   tmpminv = Math.floor(tmpminv - tmpdiv);
  198.   for(var i=0;i<t;i++) {
  199.     var txtrect = arrUseYear[i] + ", " + tmparr[i];
  200.     //确定x坐标
  201.     vx = 29 + i * addv;
  202.     //确定y坐标
  203.     vy = 230 - (tmparr[i] - tmpminv) / (tmpmaxv - tmpminv) * 220;
  204.     var newrect = svgDoc.createElement("rect");
  205.     newrect.setAttribute("x",vx);
  206.     newrect.setAttribute("y",vy);
  207.     newrect.setAttribute("width",15);
  208.     newrect.setAttribute("height",(230 - vy));
  209.     newrect.setAttribute("style","cursor:crosshair;fill:" + arrColors[i]);
  210.     newrect.setAttribute("onmouseover","ShowTooltip(evt,'" + txtrect + "')" );
  211.     newrect.setAttribute("onmouseout","HideTooltip(evt)");
  212.     gnode.appendChild(newrect);
  213.   }
  214. }
  216. //画饼图,第一个参数是数值数组，第二个参数是年份数组
  217. function drawPie(tmparr1,tmparr2) {
  218.     var basePointX     = 126.;
  219.     var basePointY     = 129.;
  220.     var currentX       = 0.0;
  221.     var currentY       = 0.0;
  222.     var offsetX1       = 0.0;
  223.     var offsetY1       = 0.0;
  224.     var offsetX2       = 0.0;
  225.     var offsetY2       = 0.0;
  226.     var radius         = 125.;
  227.     var angleSum1      = 0.;
  228.     var angleSum2      = 0.;
  229.     var vertexCount    = tmparr1.length;
  230.     var xPts           = Array(vertexCount);
  231.     var yPts           = Array(vertexCount);
  232.     var angles         = Array(vertexCount);
  233.     var pointPath      = "";
  234.     var colorCount     = arrColors.length;
  236.     var pieNode        = null;
  237.     var gcNode         = null;
  238.     
  239.     var dataSum = 0.;
  241.     for(var v=0; v<vertexCount; v++)
  242.     {
  243.        dataSum += Math.abs(parseFloat(tmparr1[v]));
  244.     }
  245.     //alert(dataSum);
  246.     for(var v=0; v<vertexCount; v++)
  247.     {
  248.        angles[v] = 360.*Math.abs(parseFloat(tmparr1[v]))/dataSum;
  249.     }
  250.     //alert(angles);
  251.     gcNode = svgDoc.getElementById("gc");
  252.     var txtstyle = "text-anchor:left;";
  253.     for(var v=0; v<vertexCount; v++)
  254.     {
  255.        angleSum2 = angleSum1 + angles[v];
  256.        var txtpv = parseInt(Math.abs(tmparr1[v])/dataSum *10000) / 100 + "%";
  257.        
  258.        offsetX1 = radius*Math.cos(angleSum1*Math.PI/180);
  259.        offsetY1 = radius*Math.sin(angleSum1*Math.PI/180);
  260.        offsetX2 = radius*Math.cos(angleSum2*Math.PI/180);
  261.        offsetY2 = radius*Math.sin(angleSum2*Math.PI/180);
  263.        currentX = basePointX+offsetX2;
  264.        currentY = basePointY-offsetY2;
  266.       // the vertical offset must be subtracted,
  267.       // so we need to "flip" the sign of offsetY1
  268.        offsetY1 *= -1;
  270.        pointPath = "M"+basePointX+","+basePointY;
  271.        pointPath += " l"+offsetX1+","+offsetY1;
  272.        if(angles[v] < 180 ) {
  273.          pointPath += " A"+radius+","+radius+" 0 0 0 ";
  274.        } else {
  275.          pointPath += " A"+radius+","+radius+" 0 1 0 ";
  276.        }
  277.        pointPath += currentX+","+currentY;
  278.        pointPath += " L"+basePointX+","+
  279.                         basePointY+"z";
  281.        fillColor  = "fill:" + arrColors[v%colorCount];
  283.        txtGnode = tmparr2[v] + "," + tmparr1[v] + "," + txtpv;
  284.        var newg = svgDoc.createElement("g");
  285.        newg.setAttribute("onmouseover","ShowTooltip(evt,'" + txtGnode + "')" );
  286.        newg.setAttribute("onmouseout","HideTooltip(evt)");
  287.        gcNode.appendChild(newg);
  289.        pieNode = svgDoc.createElement("path");
  290.        pieNode.setAttribute("d",    pointPath);
  291.        pieNode.setAttribute("style",fillColor);
  292.        newg.appendChild(pieNode);
  293.        
  294.        var recNode = svgDoc.createElement("rect");
  295.        recNode.setAttribute("x",253);
  296.        recNode.setAttribute("y",(10 + v*20));
  297.        recNode.setAttribute("width",8);
  298.        recNode.setAttribute("height",8);
  299.        recNode.setAttribute("style",fillColor);
  300.        newg.appendChild(recNode);
  301.        
  302.        var txtNode = svgDoc.createElement("text");
  303.        txtNode.setAttribute("x",264);
  304.        txtNode.setAttribute("y",(15 + v*20));
  305.        txtst = txtstyle + fillColor;
  306.        txtNode.setAttribute("style",txtst);
  307.        newg.appendChild(txtNode);
  308.        texte=svgDoc.createTextNode(tmparr2[v] + "[" + txtpv + "]");
  309.        txtNode.appendChild(texte);
  311.        angleSum1 += angles[v];
  312.     }
  313. }
  315. //设定x轴坐标,画线及添加标题,参数是年份数组
  316. function setXAxis(tmparr) {
  317.   //画x轴线
  318.   var newline = svgDoc.createElement("line");
  319.   newline.setAttribute("x1",29);
  320.   newline.setAttribute("y1",230);
  321.   newline.setAttribute("x2",349);
  322.   newline.setAttribute("y2",230);
  323.   newline.setAttribute("style","stroke-width:2;stroke:blue");
  324.   gnode.appendChild(newline);
  325.   
  326.   var t = tmparr.length - 1;
  327.   var addv = 320 / t;
  328.   var addt = 300 / t;
  329.   var sumlv = 29;
  330.   var sumtv = 20;
  331. //画x轴的文字
  332.   newtext = svgDoc.createElement("text");
  333.   newtext.setAttribute("x",sumtv);
  334.   newtext.setAttribute("y",249);
  335.   gnode.appendChild(newtext);
  336.   texte=svgDoc.createTextNode(tmparr[0]);
  337.   newtext.appendChild(texte);
  338.   for(var i=0;i<t;i++) {
  339.     //画x轴的小短线
  340.     sumlv = 29 + (i + 1) * addv;
  341.     newline = svgDoc.createElement("line");
  342.   newline.setAttribute("x1",sumlv);
  343.   newline.setAttribute("y1",0);
  344.   newline.setAttribute("x2",sumlv);
  345.   newline.setAttribute("y2",230);
  346.   newline.setAttribute("style","stroke-width:0.5;stroke:white");
  347.   gnode.appendChild(newline);
  348.   //画x轴的文字
  349.   sumtv = 17 + (i + 1) * addt;
  350.   newtext = svgDoc.createElement("text");
  351.   newtext.setAttribute("x",sumtv);
  352.   newtext.setAttribute("y",249);
  353.   gnode.appendChild(newtext);
  354.   texte=svgDoc.createTextNode(tmparr[i+1]);
  355.     newtext.appendChild(texte);
  356.   }
  357. }
  359. //设定y轴坐标,画线及添加标题,第一个参数是最小值，第二个参数是最大值
  360. function setYAxis(tmpminv,tmpmaxv) {
  361.   //画y轴线
  362.   var newline = svgDoc.createElement("line");
  363.   newline.setAttribute("x1",29);
  364.   newline.setAttribute("y1",10);
  365.   newline.setAttribute("x2",29);
  366.   newline.setAttribute("y2",230);
  367.   newline.setAttribute("style","stroke-width:2;stroke:blue");
  368.   gnode.appendChild(newline);
  369.   
  370.   var addv = 220 / 10;
  371.   var sumlv = 0;
  372.   var sumtv = 4;
  374.   tmpdiv = (tmpmaxv - tmpminv) / 10;
  375.   tmpmaxv = Math.ceil(tmpmaxv + tmpdiv);
  376.   tmpminv = Math.floor(tmpminv - tmpdiv);
  378.   var divtxt = (tmpmaxv - tmpminv) / 10;
  379.   for(var i=0;i<10;i++) {
  380.     //画y轴的小短线
  381.     sumlv = 10 + i * addv;
  382.     newline = svgDoc.createElement("line");
  383.   newline.setAttribute("x1",29);
  384.   newline.setAttribute("y1",sumlv);
  385.   newline.setAttribute("x2",349);
  386.   newline.setAttribute("y2",sumlv);
  387.   newline.setAttribute("style","stroke-width:0.5;stroke:white");
  388.   gnode.appendChild(newline);
  389. }
  390. for(var i=0;i<11;i++) {
  391.   //画y轴的文字
  392.   //if(i == 0) {
  393.     //sumtv = 10;
  394.   //} else {
  395.     sumtv = 10 + i * 22.5;
  396.   //}
  397.   txtdata = tmpmaxv - Math.round(divtxt * i);
  398.   newtext = svgDoc.createElement("text");
  399.   newtext.setAttribute("x",1);
  400.   newtext.setAttribute("y",sumtv);
  401.   gnode.appendChild(newtext);
  402.   texte=svgDoc.createTextNode(txtdata);
  403.     newtext.appendChild(texte);
  404.   }
  405. }
  407. //设定公司的名称
  408. function setCompanyName(companyname) {
  409.   parent.all['svgtitle'].innerHTML = companyname;
  410. }
  412. //设定图象的标题,涉及到下拉框和标题栏的同时变动
  413. function setGraphTitle(title) {
  414.   //
  415. }
  417. //点击动态改变图象的函数,第一个参数是数值数组，第二个参数是年份数组
  418. //function svgViewChange(tmparr1,tmparr2) {
  419. function svgViewChange(tmparr1,tmparr2,type) {
  420.   //数组清除
  421.   //var tarr = new Array(tmparr1,tmparr2);
  422.   //tarr = resortArray(tarr);
  423.   arrUseValue = tmparr1;
  424.   arrUseYear = tmparr2;
  425.   resortArray();
  426.   svgType = type;
  427.   //arrUseValue = null;
  428.   //arrUseYear = null;
  429.   //arrUseValue = tarr[0];
  430.   //arrUseYear = tarr[1];
  431.   if(svgType == 1) {
  432.     deleItem();
  433.     useMinValue = getMinValue(arrUseValue);
  434.     useMaxValue = getMaxValue(arrUseValue);
  435.     setXAxis(arrUseYear);
  436.     setYAxis(useMinValue,useMaxValue);
  437.     drawPolyline(arrUseValue,useMinValue,useMaxValue);
  438.   } else if(svgType == 2) {
  439.     deleItem();
  440.     useMinValue = getMinValue(arrUseValue);
  441.     useMaxValue = getMaxValue(arrUseValue);
  442.     setXAxis(arrUseYear);
  443.     setYAxis(useMinValue,useMaxValue);
  444.     drawRectange(arrUseValue,useMinValue,useMaxValue);
  445.   } else if(svgType == 3) {
  446.     deleItem();
  447.     useMinValue = getMinValue(arrUseValue);
  448.     useMaxValue = getMaxValue(arrUseValue);
  449.     drawPie(arrUseValue,arrUseYear);
  450.   }
  451. }
  453. function opennewwin() {
  454.   window.open ('bigimg.html', 'svgnewwindow', 'height=400, width=400, top=100, left=100, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, status=no');
  455. }