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

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

Oracle数据库

开发平台：

Visual C++

showsvg.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 = 152 / (t - 1);
  147.   var vx = 20;
  148.   var vy = 0;
  149.   tmpdiv = (tmpmaxv - tmpminv) / 5;
  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 = 20 + i * addv;
  158.     vpoint += vx + ",";
  159.     //确定y坐标
  160.     //alert(tmparr[i]);
  161.     vy = 120 - (tmparr[i] - tmpminv) / (tmpmaxv - tmpminv) * 120;
  162.     vpoint += vy + ",";
  163.     
  164.     //添加小圆点
  165.     var newcircle = svgDoc.createElement("circle");
  166.     newcircle.setAttribute("cx",vx);
  167.     newcircle.setAttribute("cy",vy);
  168.     newcircle.setAttribute("r",2);
  169.     newcircle.setAttribute("style","cursor:crosshair;fill:" + arrColors[i]);
  170.     newcircle.setAttribute("onmouseover","ShowTooltip(evt,'" + txtcirc + "')" );
  171.     newcircle.setAttribute("onmouseout","HideTooltip(evt)");
  172.     gnode.appendChild(newcircle);
  173.   }
  174.   vpoint  = vpoint.substring(0,(vpoint.length - 1));
  175.   //alert(vpoint);
  176.   var newpoly = svgDoc.createElement("polyline");
  177.   newpoly.setAttribute("points",vpoint);
  178.   newpoly.setAttribute("style","fill: none; stroke: #00C; stroke-width: 1.5px");
  179.   gnode.appendChild(newpoly);
  180. }
  182. //画柱状图，第一个参数是数值数组，
  183. //第二个参数是最小值，第三个参数是最大值
  184. function drawRectange(tmparr,tmpminv,tmpmaxv) {
  185.   var vpoint = "";
  186.   var t = tmparr.length;
  187.   //var addv = 32.5;
  188.   var addv = 130 / (t - 1);
  189.   var vx = 27;
  190.   var vy = 0;
  191.   tmpdiv = (tmpmaxv - tmpminv) / 5;
  192.   
  193.   tmpmaxv = Math.ceil(tmpmaxv + tmpdiv);
  194.   tmpminv = Math.floor(tmpminv - tmpdiv);
  196.   for(var i=0;i<t;i++) {
  197.     var txtrect = arrUseYear[i] + ", " + tmparr[i];
  198.     //确定x坐标
  199.     vx = 27 + i * addv;
  200.     //确定y坐标
  201.     vy = 120 - (tmparr[i] - tmpminv) / (tmpmaxv - tmpminv) * 120;
  202.     var newrect = svgDoc.createElement("rect");
  203.     newrect.setAttribute("x",vx);
  204.     newrect.setAttribute("y",vy);
  205.     newrect.setAttribute("width",15);
  206.     newrect.setAttribute("height",(120 - vy));
  207.     newrect.setAttribute("style","cursor:crosshair;fill:" + arrColors[i]);
  208.     newrect.setAttribute("onmouseover","ShowTooltip(evt,'" + txtrect + "')" );
  209.     newrect.setAttribute("onmouseout","HideTooltip(evt)");
  210.     gnode.appendChild(newrect);
  211.   }
  212. }
  214. //画饼图,第一个参数是数值数组，第二个参数是年份数组
  215. function drawPie(tmparr1,tmparr2) {
  216.     var basePointX     = 62.;
  217.     var basePointY     = 65.;
  218.     var currentX       = 0.0;
  219.     var currentY       = 0.0;
  220.     var offsetX1       = 0.0;
  221.     var offsetY1       = 0.0;
  222.     var offsetX2       = 0.0;
  223.     var offsetY2       = 0.0;
  224.     var radius         = 60.;
  225.     var angleSum1      = 0.;
  226.     var angleSum2      = 0.;
  227.     var vertexCount    = tmparr1.length;
  228.     var xPts           = Array(vertexCount);
  229.     var yPts           = Array(vertexCount);
  230.     var angles         = Array(vertexCount);
  231.     var pointPath      = "";
  232.     var colorCount     = arrColors.length;
  234.     var pieNode        = null;
  235.     var gcNode         = null;
  236.     
  237.     var dataSum = 0.;
  239.     for(var v=0; v<vertexCount; v++)
  240.     {
  241.        dataSum += Math.abs(parseFloat(tmparr1[v]));
  242.     }
  243.     //alert(dataSum);
  244.     for(var v=0; v<vertexCount; v++)
  245.     {
  246.        angles[v] = 360.*Math.abs(parseFloat(tmparr1[v]))/dataSum;
  247.     }
  248.     //alert(angles);
  249.     gcNode = svgDoc.getElementById("gc");
  250.     var txtstyle = "text-anchor:left;";
  251.     for(var v=0; v<vertexCount; v++)
  252.     {
  253.        angleSum2 = angleSum1 + angles[v];
  254.        var txtpv = parseInt(Math.abs(tmparr1[v])/dataSum *10000) / 100 + "%";
  255.        
  256.        offsetX1 = radius*Math.cos(angleSum1*Math.PI/180);
  257.        offsetY1 = radius*Math.sin(angleSum1*Math.PI/180);
  258.        offsetX2 = radius*Math.cos(angleSum2*Math.PI/180);
  259.        offsetY2 = radius*Math.sin(angleSum2*Math.PI/180);
  261.        currentX = basePointX+offsetX2;
  262.        currentY = basePointY-offsetY2;
  264.       // the vertical offset must be subtracted,
  265.       // so we need to "flip" the sign of offsetY1
  266.        offsetY1 *= -1;
  268.        pointPath = "M"+basePointX+","+basePointY;
  269.        pointPath += " l"+offsetX1+","+offsetY1;
  270.        if(angles[v] < 180 ) {
  271.          pointPath += " A"+radius+","+radius+" 0 0 0 ";
  272.        } else {
  273.          pointPath += " A"+radius+","+radius+" 0 1 0 ";
  274.        }
  275.        pointPath += currentX+","+currentY;
  276.        pointPath += " L"+basePointX+","+
  277.                         basePointY+"z";
  279.        fillColor  = "fill:" + arrColors[v%colorCount];
  281.        txtGnode = tmparr2[v] + "," + tmparr1[v] + "," + txtpv;
  282.        //alert(txtGnode);
  283.        var newg = svgDoc.createElement("g");
  284.        //newg.addEventListener("mouseover",OpacityDown,true);
  285.        //newg.addEventListener("mouseout",OpacityUp,true);
  286.        newg.setAttribute("onmouseover","ShowTooltip(evt,'" + txtGnode + "')" );
  287.        newg.setAttribute("onmouseout","HideTooltip(evt)");
  288.        gcNode.appendChild(newg);
  290.        pieNode = svgDoc.createElement("path");
  291.        pieNode.setAttribute("d",    pointPath);
  292.        pieNode.setAttribute("style",fillColor);
  293.        newg.appendChild(pieNode);
  294.        
  295.        var recNode = svgDoc.createElement("rect");
  296.        recNode.setAttribute("x",123);
  297.        recNode.setAttribute("y",(10 + v*10));
  298.        recNode.setAttribute("width",3);
  299.        recNode.setAttribute("height",3);
  300.        recNode.setAttribute("style",fillColor);
  301.        newg.appendChild(recNode);
  302.        
  303.        var txtNode = svgDoc.createElement("text");
  304.        txtNode.setAttribute("x",128);
  305.        txtNode.setAttribute("y",(15 + v*10));
  306.        txtst = txtstyle + fillColor;
  307.        txtNode.setAttribute("style",txtst);
  308.        newg.appendChild(txtNode);
  309.        texte=svgDoc.createTextNode(tmparr2[v] + "[" + txtpv + "]");
  310.        txtNode.appendChild(texte);
  312.        angleSum1 += angles[v];
  313.     }
  314. }
  316. //设定x轴坐标,画线及添加标题,参数是年份数组
  317. function setXAxis(tmparr) {
  318.   //画x轴线
  319.   var newline = svgDoc.createElement("line");
  320.   newline.setAttribute("x1",20);
  321.   newline.setAttribute("y1",120);
  322.   newline.setAttribute("x2",172);
  323.   newline.setAttribute("y2",120);
  324.   newline.setAttribute("style","stroke-width:2;stroke:blue");
  325.   gnode.appendChild(newline);
  326.   
  327.   var t = tmparr.length - 1;
  328.   var addv = 152 / t;
  329.   var addt = 144 / t;
  330.   var sumlv = 20;
  331.   var sumtv = 17;
  332. //画x轴的文字
  333.   newtext = svgDoc.createElement("text");
  334.   newtext.setAttribute("x",sumtv);
  335.   newtext.setAttribute("y",127);
  336.   gnode.appendChild(newtext);
  337.   texte=svgDoc.createTextNode(tmparr[0]);
  338.   newtext.appendChild(texte);
  339.   for(var i=0;i<t;i++) {
  340.     //画x轴的小短线
  341.     sumlv = 20 + (i + 1) * addv;
  342.     newline = svgDoc.createElement("line");
  343.   newline.setAttribute("x1",sumlv);
  344.   newline.setAttribute("y1",0);
  345.   newline.setAttribute("x2",sumlv);
  346.   newline.setAttribute("y2",120);
  347.   newline.setAttribute("style","stroke-width:0.5;stroke:white");
  348.   gnode.appendChild(newline);
  349.   //画x轴的文字
  350.   sumtv = 17 + (i + 1) * addt;
  351.   newtext = svgDoc.createElement("text");
  352.   newtext.setAttribute("x",sumtv);
  353.   newtext.setAttribute("y",127);
  354.   gnode.appendChild(newtext);
  355.   texte=svgDoc.createTextNode(tmparr[i+1]);
  356.     newtext.appendChild(texte);
  357.   }
  358. }
  360. //设定y轴坐标,画线及添加标题,第一个参数是最小值，第二个参数是最大值
  361. function setYAxis(tmpminv,tmpmaxv) {
  362.   //画y轴线
  363.   var newline = svgDoc.createElement("line");
  364.   newline.setAttribute("x1",20);
  365.   newline.setAttribute("y1",0);
  366.   newline.setAttribute("x2",20);
  367.   newline.setAttribute("y2",120);
  368.   newline.setAttribute("style","stroke-width:2;stroke:blue");
  369.   gnode.appendChild(newline);
  370.   
  371.   var addv = 24;
  372.   var sumlv = 0;
  373.   var sumtv = 4;
  375.   tmpdiv = (tmpmaxv - tmpminv) / 5;
  376.   tmpmaxv = Math.ceil(tmpmaxv + tmpdiv);
  377.   tmpminv = Math.floor(tmpminv - tmpdiv);
  379.   var divtxt = (tmpmaxv - tmpminv) / 5;
  380.   for(var i=0;i<5;i++) {
  381.     //画y轴的小短线
  382.     sumlv = 0 + i * addv;
  383.     newline = svgDoc.createElement("line");
  384.   newline.setAttribute("x1",20);
  385.   newline.setAttribute("y1",sumlv);
  386.   newline.setAttribute("x2",172);
  387.   newline.setAttribute("y2",sumlv);
  388.   newline.setAttribute("style","stroke-width:0.5;stroke:white");
  389.   gnode.appendChild(newline);
  390. }
  391. for(var i=0;i<6;i++) {
  392.   //画y轴的文字
  393.   if(i == 0) {
  394.     sumtv = 7;
  395.   } else {
  396.     sumtv = 4 + i * 24;
  397.   }
  398.   txtdata = tmpmaxv - Math.round(divtxt * i);
  399.   newtext = svgDoc.createElement("text");
  400.   newtext.setAttribute("x",1);
  401.   newtext.setAttribute("y",sumtv);
  402.   gnode.appendChild(newtext);
  403.   texte=svgDoc.createTextNode(txtdata);
  404.     newtext.appendChild(texte);
  405.   }
  406. }
  408. //设定公司的名称
  409. function setCompanyName(companyname) {
  410.   parent.all['svgtitle'].innerHTML = companyname;
  411. }
  413. //设定图象的标题,涉及到下拉框和标题栏的同时变动
  414. function setGraphTitle(title) {
  415.   //
  416. }
  418. //点击动态改变图象的函数,第一个参数是数值数组，第二个参数是年份数组
  419. //function svgViewChange(tmparr1,tmparr2) {
  420. function svgViewChange(tmparr1,tmparr2,type) {
  421.   arrUseValue = tmparr1;
  422.   arrUseYear = tmparr2;
  423.   //alert(arrUseValue);
  424.   //alert(arrUseYear);
  425.   resortArray();
  426.   svgType = type;
  427.   if(svgType == 1) {
  428.     deleItem();
  429.     useMinValue = getMinValue(arrUseValue);
  430.     useMaxValue = getMaxValue(arrUseValue);
  431.     setXAxis(arrUseYear);
  432.     setYAxis(useMinValue,useMaxValue);
  433.     drawPolyline(arrUseValue,useMinValue,useMaxValue);
  434.   } else if(svgType == 2) {
  435.     deleItem();
  436.     useMinValue = getMinValue(arrUseValue);
  437.     useMaxValue = getMaxValue(arrUseValue);
  438.     setXAxis(arrUseYear);
  439.     setYAxis(useMinValue,useMaxValue);
  440.     drawRectange(arrUseValue,useMinValue,useMaxValue);
  441.   } else if(svgType == 3) {
  442.     deleItem();
  443.     useMinValue = getMinValue(arrUseValue);
  444.     useMaxValue = getMaxValue(arrUseValue);
  445.     drawPie(arrUseValue,arrUseYear);
  446.   }
  447. }
  449. function opennewwin() {
  450.   mynewwin = window.open ('bigimg.html', 'svgnewwindow', 'height=320, width=370, top=100, left=100, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, status=no');
  451. }