VML实例-统计图
VML統(tǒng)計(jì)圖
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Test VML Chart for Version 1.0.1 </TITLE> <STYLE>v\:* { BEHAVIOR: url(#default#VML) } </STYLE> <SCRIPT LANGUAGE="JavaScript" src="VMLGraph1_0_1.js"></SCRIPT> </HEAD><SCRIPT LANGUAGE="JavaScript"> //------------------------------------------------------------ // Copyright (c) 2003-2004 LeadinSoft. All rights reserved. // Version 1.0.1 // Ahthor dolphin //------------------------------------------------------------ var bstSingle = 0; //Chart邊框?yàn)閱尉€(xiàn) var bstDouble = 1; //Chart邊框?yàn)殡p線(xiàn) var fstSolid = 0; //Chart背景實(shí)心填充 var fstTexture = 1; //Chart背景材質(zhì)填充 var fstRegular = "regular" //字體：正常 var fstItalic = "italic"; //字體：斜體 var fstBold = "bold"; //字體：粗體 var atLeft = "left"; //Chart標(biāo)題左對(duì)齊 var atCenter = "center"; //Chart標(biāo)題居中 var atRight = "right"; //Chart標(biāo)題右對(duì)齊//定義 VML Chart 基類(lèi) function Graph(){this.Text = new Text();this.Border = new Border();this.Width = 500;this.Height = 300;this.Fill = new Fill();this.Legend = new Legend();this.SeriesCollection = [];this.Container = null;this.Shadow = false;this.VMLObject = null; };//獲取Graph類(lèi)的一個(gè)引用 var _p = Graph.prototype; //通過(guò)基類(lèi)初始化Chart _p.initialise = function(){if(this.Container == null) return;var o;//畫(huà)外框var group = document.createElement("v:group");group.style.width = this.Width+"pt";group.style.height = this.Height+"pt";group.coordsize = this.Width*10 +"," + this.Height*10;group.id = "group1";//添加一個(gè)背景層var vRect = document.createElement("v:rect");vRect.style.width = (this.Width*10-100) +"px";vRect.style.height = this.Height*10+ "px";vRect.coordsize = "21600,21600";group.appendChild(vRect);o = vRect;//設(shè)置邊框大小 vRect.strokeweight = this.Border.Width;//設(shè)置邊框顏色vRect.strokecolor = this.Border.Color;//設(shè)置背景if(this.Fill.Style == fstSolid){vRect.fillcolor = this.Fill.Color;}else{if(this.Fill.background != null)vRect.style.backgroundImage = this.Fill.background;elsevRect.fillcolor = this.Fill.Color;}//邊框是否為雙線(xiàn)if(this.Border.Style == bstDouble){var tmp = document.createElement("v:rect");tmp.style.width = (this.Width*10-300) +"px";tmp.style.height = (this.Height*10-200)+ "px";tmp.style.top = "100px";tmp.style.left = "100px";tmp.strokecolor = this.Border.Color;if(this.Fill.Style == fstSolid){tmp.fillcolor = this.Fill.Color;}else{if(this.Fill.background != null)tmp.style.backgroundImage = this.Fill.background;elsetmp.fillcolor = this.Fill.Color;}var filltmp = document.createElement("v:fill");filltmp.type = "Frame";tmp.appendChild(filltmp);group.appendChild(tmp);o = tmp;}//畫(huà)標(biāo)題var vCaption = document.createElement("v:textbox");vCaption.style.fontSize = this.Text.Font.Size +"px"; vCaption.style.color = this.Text.Font.Color;vCaption.style.height = this.Text.Height +"px";vCaption.style.fontWeight = this.Text.Font.Style;vCaption.innerHTML = this.Text.Text;vCaption.style.textAlign = this.Text.Alignment;o.appendChild(vCaption);//畫(huà)陰影if(this.Shadow){var vShadow = document.createElement("v:shadow");vShadow.on = "t";vShadow.type = "single";vShadow.color = "graytext";vShadow.offset = "4px,4px";vRect.appendChild(vShadow);}this.VMLObject = group;this.Container.appendChild(group); };//畫(huà)具體圖形 _p.draw = function(){alert("基類(lèi)不能夠?qū)嵗唧w數(shù)據(jù)"); };//增加序列 _p.addSeries = function(o){var iCount = this.SeriesCollection.length;if(o.Title == null)o.Title = "Series"+ iCount;this.SeriesCollection[iCount] = o; };//求數(shù)據(jù)對(duì)象的最大Value _p.maxs = function(){var max = 0;for(var i=0; i<this.SeriesCollection.length; i++){if(max<this.SeriesCollection[i].max()) max = this.SeriesCollection[i].max();}return max; }//重載Object的toString方法 _p.toString = function(){return "oGraph"; };//定義 VML Chart 邊框類(lèi) function Border(){this.Color = "Black";this.Style = bstSingle;this.Width = 1; };//定義 VML Chart 背景類(lèi) function Fill(){this.Color = "White";this.background = null;this.Style = fstSolid; };//定義 VML Chart 標(biāo)題類(lèi) function Text(){this.Alignment = atCenter;this.Height = 24;this.Font = new Font();this.Text = "VML Chart Version 1.0"; };//定義 VML Chart 字體類(lèi) function Font(){this.Color = "Black";this.Family = "Arial";this.Size = 12;this.Style = fstRegular; };//定義 VML Chart 圖例類(lèi) function Legend(){this.Font = new Font(); };//定義 VML Chart 序列類(lèi) function Series(){this.Color = Series.getColor();this.Title = null;this.all = []; }; //隨機(jī)獲取一種顏色 Series.getColor = function(){return "rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")"; }; var _p = Series.prototype; //增加具體數(shù)據(jù) _p.addData = function(sName,sValue,sHref,sTooltipText){var oData = new Object();oData.Name = sName;oData.Value = sValue;oData.Href = sHref;if(sTooltipText == null || sTooltipText == "undefined")oData.TooltipText="本項(xiàng)數(shù)值為："+ sValue;elseoData.TooltipText = sTooltipText;var iCount=this.all.length;this.all[iCount] = oData; };//求數(shù)據(jù)對(duì)象的最大Value _p.max = function(){var max = 0;for(var i=0; i<this.all.length; i++){if(this.all[i].Value > max) max = this.all[i].Value;}return max; }//重載Object的toString方法 _p.toString = function(){return "oSeries"; };//定義 VML Chart 時(shí)間序列類(lèi) function TimeSeries(){Series.call(this); }; var _p = TimeSeries.prototype = new Series; //增加具體數(shù)據(jù) _p.addData = function(sTime,sValue,sType,sHref,sTooltipText){var oData = new Object();var dt = new Date(eval(sTime*1000));if(sType == "Minute"){oData.Name = dt.getHours() +":"+ dt.getMinutes();}else if(sType == "Hour"){oData.Name = dt.getHours();}else if(sType == "Day"){oData.Name = eval(dt.getMonth()+1) +"月"+ dt.getDate() +"日";}else if(sType == "Month"){oData.Name = dt.getYear() +"年"+ eval(dt.getMonth()+1)+ "月";}else{oData.Name = dt.getYear() +"年"}oData.Value = sValue;oData.Href = sHref;oData.TooltipText = "本項(xiàng)數(shù)值為："+ sValue + ", 時(shí)間："+ dt.getYear() +"年"+ eval(dt.getMonth()+1)+ "月"+ dt.getDate() +"日 "+ dt.getHours() +":"+ dt.getMinutes() +":"+ dt.getSeconds();var iCount=this.all.length;this.all[iCount] = oData; };//重載Object的toString方法 _p.toString = function(){return "oTimeSeries"; };//定義 VML Chart 坐標(biāo)軸類(lèi) function Axis(){this.Color = "Black";this.Ln = 0;this.NumberFormat = 0;this.Prefix = null;this.suffix = null;this.Spacing= 30;this.Width = 0;this.showPoint = 12; };//VerticalChart類(lèi)，繼承Graph function VerticalChart(){Graph.call(this);this.Margin = new Array(300,100,300,200);this.AxisX = new Axis();this.AxisY = new Axis(); }; var _p = VerticalChart.prototype = new Graph; //畫(huà)坐標(biāo)系 _p.drawCoord = function(oContainer){this.AxisY.Ln = eval(this.Height*10 - this.Margin[3]) - this.Margin[1] - 400;var vLine = document.createElement("v:line");vLine.id = "idCoordY";vLine.from = this.Margin[0] +","+ this.Margin[1];vLine.to = this.Margin[0] +","+ eval(this.Height*10 - this.Margin[3]);vLine.style.zIndex = 8;vLine.style.position = "absolute";vLine.strokecolor = this.AxisY.Color;vLine.strokeweight = 1;var vStroke = document.createElement("v:stroke");vStroke.StartArrow = "classic";vLine.appendChild(vStroke);oContainer.appendChild(vLine);this.AxisX.Ln = eval(this.Width*10 - this.Margin[0]) - this.Margin[2] - 300;var vLine = document.createElement("v:line");vLine.id = "idCoordX";vLine.from = this.Margin[0] +","+ eval(this.Height*10 - this.Margin[3]);vLine.to = eval(this.Width*10 - this.Margin[2]) +","+ eval(this.Height*10 - this.Margin[3]);vLine.style.zIndex = 8;vLine.style.position = "absolute";vLine.strokecolor = this.AxisX.ColorvLine.strokeweight = 1;var vStroke = document.createElement("v:stroke");vStroke.EndArrow = "classic";vLine.appendChild(vStroke);oContainer.appendChild(vLine); };//畫(huà)X軸刻度 _p.drawLineX = function(oContainer){var totalPoint = this.SeriesCollection[0].all.length;var iCol = totalPoint + 1;var fColWidth = Math.floor(this.AxisX.Ln/iCol);this.AxisX.Width= fColWidth;var showPoint = this.AxisX.showPoint,Step = 1;if(totalPoint > showPoint) {if(totalPoint < showPoint*2)showPoint = Math.round(3*showPoint/5);Step = Math.round(totalPoint/showPoint);}else showPoint = totalPoint;this.AxisX.showPoint = showPoint;var newLine, newStroke, newShape, newText;var px,ln;var y = eval(this.Height*10 - this.Margin[3]);for(var i=1; i<=showPoint; i++){ln = i*Step;if(ln>totalPoint) break;newLine = document.createElement("v:line");px = this.Margin[0] + (i-1)*fColWidth * Step;newLine.from = px +","+ y;newLine.to = px +","+ eval(y + this.AxisX.Spacing);newLine.style.zIndex = 8;newLine.style.position = "absolute";newStroke = document.createElement("<v:stroke color='"+ this.AxisX.Color +"'>");newLine.appendChild(newStroke);oContainer.appendChild(newLine);newShape= document.createElement("<v:shape style='position:absolute;left:"+ eval(px-80) +";top:"+ eval(y+this.AxisX.Spacing) +";WIDTH:200px;HEIGHT:150px;z-index:8' coordsize='21600,21600' fillcolor='white'></v:shape>");newText = document.createElement("<v:textbox inset='0pt,0pt,0pt,0pt' style='font-size:12px;v-text-anchor:top-right-baseline;color:"+ this.AxisY.Color +"'></v:textbox>");newText.innerHTML = this.SeriesCollection[0].all[ln-1].Name;newShape.appendChild(newText);oContainer.appendChild(newShape);} };//畫(huà)Y軸刻度 _p.drawLineY = function(oContainer){var maxData = this.maxs();maxData += (4 - maxData % 4)var showPoint = this.AxisY.showPoint;var dcs = 1;for(var i=showPoint; i>0; i--){if(maxData % i == 0){dcs = i;this.AxisY.showPoint = i;break;}}var newLine, newStroke, newShape, newText;var py;var x = this.Margin[0];var fRowHeight = Math.floor(this.AxisY.Ln/dcs);this.AxisY.Width = maxData; //Y軸時(shí)存放最大值for(var i=0; i<=dcs; i++){py = eval(this.Height*10 - this.Margin[3]) - i*fRowHeight;if(i!=0){newLine = document.createElement("v:line");newLine.from = eval(x-this.AxisY.Spacing) +","+ py;newLine.to = x +","+ py;newLine.style.zIndex = 8;newLine.style.position = "absolute";newStroke = document.createElement("<v:stroke color='"+ this.AxisY.Color +"'>");newLine.appendChild(newStroke);oContainer.appendChild(newLine);}newShape= document.createElement("<v:shape style='position:absolute;left:"+ eval(x-200) +";top:"+ eval(py-50) +";WIDTH:200px;HEIGHT:150px;z-index:8' coordsize='21600,21600' fillcolor='white'></v:shape>");newText = document.createElement("<v:textbox inset='0pt,0pt,0pt,0pt' style='font-size:12px;v-text-anchor:top-right-baseline;color:"+ this.AxisY.Color +"'></v:textbox>");newText.innerHTML = i*(maxData/dcs);newShape.appendChild(newText);oContainer.appendChild(newShape); } };//畫(huà)圖例 _p.drawSmallSeries=function(oContainer){var arrSeries = this.SeriesCollection;for(var i=0; i<arrSeries.length; i++){var newRect = document.createElement("v:rect");newRect.style.left = eval(this.Width*10 - this.Margin[2]*2) - 200;newRect.style.top = this.Margin[1] + 200 + i*120;newRect.style.height = "100px";newRect.style.width = "100px";newRect.fillcolor = arrSeries[i].Color;newRect.strokeweight="1";newRect.strokecolor="white";newRect.style.zIndex = 10;oContainer.appendChild(newRect);var newShape= document.createElement("<v:shape style='position:absolute;left:"+ eval(this.Width*10 - this.Margin[2]*2 - 70) +";top:"+ eval(this.Margin[1] + 200 + i*120) +";WIDTH:600px;HEIGHT:100px;z-index:8' coordsize='21600,21600' fillcolor='white'></v:shape>");var newText = document.createElement("<v:textbox inset='0pt,0pt,0pt,0pt' style='font-size:"+this.Legend.Font.Size+"px;v-text-anchor:top-right-baseline;color:"+ this.Legend.Font.Color +";cursor:default' title='"+ arrSeries[i].Title +"'></v:textbox>");newText.innerHTML = " "+ arrSeries[i].Title;newShape.appendChild(newText);oContainer.appendChild(newShape);} }; //------------------------------------------------------------------------------ //豎向柱狀圖類(lèi)，繼承VerticalChart類(lèi) function VerticalBarChart(){VerticalChart.call(this); }; var _p = VerticalBarChart.prototype = new VerticalChart;//重花X軸刻度 _p.drawLineX = function(oContainer){var totalPoint = this.SeriesCollection[0].all.length;var iCol = totalPoint + 1;var fColWidth = Math.floor(this.AxisX.Ln/iCol);this.AxisX.Width= fColWidth;var showPoint = this.AxisX.showPoint,Step = 1;if(totalPoint > showPoint) {if(totalPoint < showPoint*2)showPoint = Math.round(3*showPoint/5);Step = Math.round(totalPoint/showPoint);}else showPoint = totalPoint;this.AxisX.showPoint = showPoint;var newLine, newStroke, newShape, newText;var px,ln;var y = eval(this.Height*10 - this.Margin[3]);for(var i=1; i<=showPoint; i++){ln = i*Step;if(ln>totalPoint) break;newLine = document.createElement("v:line");px = this.Margin[0] + i*fColWidth * Step;newLine.from = px +","+ y;newLine.to = px +","+ eval(y + this.AxisX.Spacing);newLine.style.zIndex = 8;newLine.style.position = "absolute";newStroke = document.createElement("<v:stroke color='"+ this.AxisY.Color +"'>");newLine.appendChild(newStroke);oContainer.appendChild(newLine);newShape= document.createElement("<v:shape style='position:absolute;left:"+ eval((px-fColWidth/2)-50) +";top:"+ eval(y+this.AxisX.Spacing) +";WIDTH:200px;HEIGHT:150px;z-index:8' coordsize='21600,21600' fillcolor='white'></v:shape>");newText = document.createElement("<v:textbox inset='0pt,0pt,0pt,0pt' style='font-size:12px;v-text-anchor:top-right-baseline;color:"+ this.AxisY.Color +"'></v:textbox>");newText.innerHTML = this.SeriesCollection[0].all[ln-1].Name;newShape.appendChild(newText);oContainer.appendChild(newShape);} };//畫(huà)VerticalBarChart _p.draw = function(){var oContainer = this.VMLObject;this.AxisY.showPoint = 10;this.drawCoord(oContainer);this.drawLineX(oContainer);this.drawLineY(oContainer);this.drawSmallSeries(oContainer);this.drawBar(oContainer); };//畫(huà)VerticalBarChart的具體數(shù)據(jù) _p.drawBar = function(oContainer){var arrSeries = this.SeriesCollection;var fColWidth,dcs;fColWidth = this.AxisX.Width;dcs = this.AxisY.Ln/this.AxisY.Width;var iValueLn, iSeriesLn;iSeriesLn = arrSeries.lengthvar barWidth = fColWidth/(iSeriesLn+1);var newShape = null;var l,t,barHeight;for(var i=0; i<iSeriesLn; i++){iValueLn = arrSeries[i].all.length;for(var k=0; k<iValueLn; k++){barHeight = dcs*eval(arrSeries[i].all[k].Value)l = eval(this.Margin[0]+ k*fColWidth + i*barWidth + barWidth/2);t = eval(this.Height*10 - this.Margin[3] - barHeight);newShape= document.createElement("<v:rect style='position:absolute;left:"+l+";top:"+t+";WIDTH:"+ barWidth + "px;HEIGHT:"+ barHeight +"px;z-index:9;border-width:0' fillcolor='" + arrSeries[i].Color + "' title = '"+ arrSeries[i].all[k].TooltipText +"'></v:rect>");//alert(this.AxisX.Width)oContainer.appendChild(newShape);}} }; //----------------------------------------------------------------------------- //------------------------------------------------------------------------------ //豎向線(xiàn)狀圖類(lèi)，繼承VerticalChart類(lèi) function VerticalLineChart(){VerticalChart.call(this);this.isDrawPoint = true; }; var _p = VerticalLineChart.prototype = new VerticalChart;//畫(huà)VerticalLineChart _p.draw = function(){if(this.Border.Style == 1){this.Margin = new Array(400,200,400,300);}var oContainer = this.VMLObject;this.AxisY.showPoint = 10;this.drawCoord(oContainer);this.drawLineX(oContainer);this.drawLineY(oContainer);this.drawSmallSeries(oContainer);this.drawLine(oContainer); };//畫(huà)VerticalLineChart的具體數(shù)據(jù) _p.drawLine = function(oContainer){var arrSeries = this.SeriesCollection;var fColWidth,dcs;fColWidth = this.AxisX.Width;dcs = this.AxisY.Ln/this.AxisY.Width;var iValueLn, iSeriesLn;iSeriesLn = arrSeries.lengthvar points = new Array(iSeriesLn);var l,t,barHeight;for(var i=0; i<iSeriesLn; i++){iValueLn = arrSeries[i].all.length;points[i] = new Array();for(var k=0; k<iValueLn; k++){barHeight = dcs*eval(arrSeries[i].all[k].Value)l = eval(this.Margin[0]+ k*fColWidth);t = eval(this.Height*10 - this.Margin[3] - barHeight);points[i][k] = l+","+t;}}//畫(huà)PolyLinefor(var i=0; i<points.length; i++){var newPolyLine = document.createElement("v:polyline");newPolyLine.filled = false;newPolyLine.style.zIndex = 8;newPolyLine.style.position = "absolute";newPolyLine.strokecolor = arrSeries[i].Color;newPolyLine.strokeweight = "1.5pt";for(var k=0; k<points[i].length; k++){if(k==0) newPolyLine.points = points[i][k];else newPolyLine.points += " "+ points[i][k];if(this.isDrawPoint){var newOval = document.createElement("v:oval");tmp = points[i][k].split(",");newOval.style.zIndex = 9;newOval.style.position = "absolute";newOval.style.left = tmp[0]-20;newOval.style.top = tmp[1]-20;newOval.style.width = 40;newOval.style.height = 40;newOval.strokecolor = arrSeries[i].Color;newOval.fillcolor = arrSeries[i].Color;newOval.title = arrSeries[i].all[k].TooltipText;oContainer.appendChild(newOval);}}oContainer.appendChild(newPolyLine);} }; //----------------------------------------------------------------------------- </SCRIPT><BODY> <div id=test1> <SCRIPT LANGUAGE="JavaScript"> <!-- var tmp = new Array();//柱狀圖 //var chart = new VerticalBarChart();//線(xiàn)圖 var chart = new VerticalLineChart();chart.Text.Font.Size = 24; chart.Text.Font.Style = fstBold; chart.Shadow = true; chart.Container = test1; chart.initialise();var s = new Series(); var label = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");for(var i=0;i<label.length;i++){v = Math.round(Math.random()*1000);tmp[tmp.length] = v;s.addData(label[i],v); } s.Title = "Series 1"; s.Color = "red"; chart.addSeries(s);s = new Series(); for(var i=0;i<label.length;i++){v = Math.round(Math.random()*1000);s.addData(label[i],v); } s.Title = "Series 2"; s.Color = "green"; chart.addSeries(s);chart.draw();//--> </SCRIPT> </div> </BODY> </HTML>這個(gè)是利用VML標(biāo)簽語(yǔ)言所制作的一個(gè)統(tǒng)計(jì)圖樣例,可能會(huì)有一些老系統(tǒng)用到.最后是隨機(jī)生成一些參數(shù)見(jiàn)<body>標(biāo)簽內(nèi)
總結(jié)
- 上一篇： 两个程序的爱情故事(刘欣)
- 下一篇： ubutnu18.04 华硕天选2060