2. Tech
  3. VML implementation pie chart (JavaScript package)

VML implementation pie chart (JavaScript package)

xiaoxiao2021-03-06  13

The code is as follows:

VML Implemented Pie Chart (JavaScript Class Package) </ Title></p> <p><meta name = "generator" content = "Microsoft Visual Studio .NET 7.1"></p> <p><meta name = "progid" Content = "Visualstudio.html"></p> <p><meta name = "Originator" Content = "Microsoft Visual Studio .NET 7.1"></p> <p><Style> v /: * {behavior: URL (# default # vml)}</p> <p>o /: * {behavior: URL (# default # vml)}</p> <p>.shape {behavior: URL (# Default # VML)}</p> <p></ Style></p> <p><script language = "javascript"></p> <p>Function add () {</p> <p>Var shape = document.createElement ("v: shape");</p> <p>Shape.Type = "# Tooltipshape";</p> <p>Shape.style.width = "150px";</p> <p>Shape.style.height = "150px";</p> <p>Shape.coordsize = "21600, 21600";</p> <p>Shape.FillColor = "infoBackground";</p> <p>Var textbox = document.createElement ("v: textbox");</p> <p>Textbox.style.Border = "1px solid red";</p> <p>TextBox.style.innerHTML = "Test";</p> <p>Shape.Appendchild (TextBox);</p> <p>Document.body.Appendchild (Shape);</p> <p>}</p> <p>Function VMLPIE (PContainer, PWIDTH, PHEIGHT, PCAPTION) {</p> <p>This.Container = PCONTAINER;</p> <p>THIS.WIDTH = PWIDTH || "400px";</p> <p>THISHEIGHT = PHEIGHT || "250px";</p> <p>THIS.CAPTION = PCAPTION || "VML Chart";</p> <p>THIS.BACKGROUNDCOLOR = ""</p> <p>THIS.SHADOW = FALSE;</p> <p>THIS.BORDERWIDTH = 0;</p> <p>THIS.BORDERCOLOR = NULL;</p> <p>THIS.ALL = New Array ();</p> <p>this.randcolor = function () {</p> <p>RETURN "RGB (" PARSEINT (Math.random () * 255) "," PARSEINT (Math.random () * 255) ") }</p> <p>THIS.VMLOBJECT = NULL;</p> <p>}</p> <p>Vmlpie.prototype.draw = function () {</p> <p>// Excellent box</p> <p>Var o = document.createElement ("v: group");</p> <p>O.Style.width = this.width;</p> <p>O.Style.height = this.Height;</p> <p>o.coordsize = "21600, 21600";</p> <p>// Add a background layer</p> <p>VAR vRect = Document.createElement ("v: Rect");</p> <p>VRect.Style.width = "21600px"</p> <p>VRect.Style.height = "21600px"</p> <p>O.Appendchild (VRECT);</p> <p>Var vcaption = document.createElement ("v: textbox");</p> <p>VcAption.Style.FontSize = "24px";</p> <p>vcAption.style.height = "24px"</p> <p>VcAption.style.fontweight = "bold";</p> <p>VcAption.innerhtml = this.caption;</p> <p>VcAption.style.textalign = "center";</p> <p>VRect.Appendchild (VcAption);</p> <p>/ / Set the border size</p> <p>IF (this.borderwidth) {</p> <p>VRECT.STROKEWEIGHT = this.borderwidth;</p> <p>}</p> <p>/ / Set border color</p> <p>IF (this.bordercolor) {</p> <p>VRECT.STROKECOLOR = this.bordercolor;</p> <p>}</p> <p>/ / Set background color</p> <p>IF (this.backgroundcolor) {</p> <p>VRECT.FILLCOLOR = this.BackgroundColor;</p> <p>}</p> <p>// Set whether or not the shadow appears</p> <p>IF (this.shadow) {</p> <p>Var vshadow = document.createElement ("v: shadow");</p> <p>vshadow.on = "t";</p> <p>vshadow.type = "single";</p> <p>vshadow.color = "graytext";</p> <p>vshadow.offset = "4px, 4px";</p> <p>VRect.Appendchild (vshadow);</p> <p>}</p> <p>THIS.VMLOBJECT = O;</p> <p>This.Container.Appendchild (O);</p> <p>// Start painting inner garden</p> <p>Var = Document.createElement ("v: oval");</p> <p>OOVAL.Style.Width = "15000px";</p> <p>OOVAL.Style.Height = "14000px";</p> <p>OOVAL.Style.top = "4000px";</p> <p>OOVAL.Style.Left = "1000px";</p> <p>OOVAL.FILLCOLOR = "# d5dbfb";</p> <p>// I originally planned to join the 3D effect, and later I feel that it is really bad, I am too lazy to do it // var o3d = Document.createElement ("o: extrusion");</p> <p>Var FormatStyle = '<v: Fill Rotate = "Angle =" - 135 "FOCUS =" 100% "type =" gradient "/>';</p> <p>// FormatStyle = '<o: EXTRUSION V: EXT = "View" color = "# 9cf" = "t" rotationangle = "- 15";</p> <p>// FormatStyle = 'ViewPoint = "0,34.72222mm" ViewPointorigin = "0, .5" SKEWANGLE = "105";</p> <p>// FormatStyle = 'LightPosition = "0,5000" LightPosition2 = "0, -50000" />';</p> <p>FormatStyle = '<o: EXTRUSION V: EXT = "View" BackDepth = "1in" on = "T" ViewPoint = "0,34.72222mm" ViewPointorigin = "0, .5" SKEWANGLE = "90" LightPosition = "- 50000 "lightposition2 =" 50000 "type =" personpect "/>";</p> <p>OOVAL.INNNERHTML = FormatStyle;</p> <p>O.AppendChild (OOVAL);</p> <p>this.createpie (o);</p> <p>}</p> <p>Vmlpie.prototype.createpie = function (vgroup) {</p> <p>Var mx = math.pow (2,16) * 360;</p> <p>// This parameter is the key to the graphics</p> <p>// ae x y width Height Startangle Endangle</p> <p>// x y represents a center position</p> <p>// Width Height shape size</p> <p>The calculation method of // startangle endangle is as follows</p> <p>// 2 ^ 16 * degrees</p> <p>Var vtotal = 0;</p> <p>Var Startangle = 0;</p> <p>Var endangle = 0;</p> <p>Var PIEANGLE = 0;</p> <p>Var predieangle = 0;</p> <p>Var objrow = NULL;</p> <p>Var objcell = null;</p> <p>For (i = 0; i <this.length; i ) {</p> <p>vtotal = this.all [i] .value;</p> <p>}</p> <p>VAR ObjleGendRect = Document.createElement ("v: Rect");</p> <p>Var objlegendtable = document.createElement ("Table");</p> <p>ObjlendTable.cellpadding = 0;</p> <p>Objlegendtable.cellspacing = 3;</p> <p>ObjlendTable.Width = "100%"; with (ObjlendRect) {</p> <p>Style.Left = "17000px";</p> <p>Style.top = "4000px";</p> <p>Style.Width = "4000px";</p> <p>Style.height = "12000px";</p> <p>FillColor = "# e6e6e6";</p> <p>strokeweight = "1px";</p> <p>}</p> <p>Objrow = objlegendtable.insertrow ();</p> <p>Objcell = Objrow.Insertcell ();</p> <p>Objcell.colspan = "2";</p> <p>//Objcell.style.Border="1px outset</p> <p>Objcell.Style.BackgroundColor = "Black";</p> <p>Objcell.style.padding = "5px";</p> <p>Objcell.style.color = "window";</p> <p>Objcell.Style.Font = "caption";</p> <p>Objcell.innertext = "Total:" Vtotal</p> <p>Var vTextBox = Document.createElement ("V: textbox");</p> <p>vTextBox.Appendchild (objlegendtable);</p> <p>ObjleGendRect.Appendchild (vTextBox);</p> <p>Var vshadow = document.createElement ("v: shadow");</p> <p>vshadow.on = "t";</p> <p>vshadow.type = "single";</p> <p>vshadow.color = "graytext";</p> <p>vshadow.offset = "2px, 2px";</p> <p>ObjlegendRect.AppendChild (vshadow);</p> <p>Vgroup.Appendchild (ObjleGendRect);</p> <p>Var Strangle = ""</p> <p>For (i = 0; i <this.all.length; i ) {// sequentially drawing each pie chart</p> <p>VAR VPIEEL = Document.createElement ("V: shape");</p> <p>VAR vpieid = document.uniqueid;</p> <p>vpieel.style.width = "15000px";</p> <p>vpieel.style.height = "14000px";</p> <p>vpieel.style.top = "4000px";</p> <p>vpieel.style.Left = "1000px";</p> <p>vpieel.coordsize = "1500, 1400";</p> <p>vpieel.strokecolor = "white";</p> <p>vpieel.id = vpieid;</p> <p>Pieangle = this.all [i] .value / vtotal;</p> <p>STARTANGLE = prepiengle;</p> <p>PREPIEANGLE = PIEANGLE;</p> <p>Endangle = PIEANGLE;</p> <p>//strangle =tis.all [αname ":" this.all [i] .value "Start:" Startangle "End:" endangle "/ n"; vpieel.path = "m 750 700 AE 750 700 750 700 " PARSEINT (MX * STARTANGLE) " PARSEINT (MX * Endangle) "XE";</p> <p>Vpieel.title = this.all [i] .name "proportion:" Endangle * 100 "% / N Detailed Description:" this.all [i] .tooltiptext;</p> <p>//vpieel.innerhtml='<v:fill rotate = "t" Angle = "- 135" FOCUS = "100%" type = "gradient" /> ';</p> <p>Var objfill = document.createElement ("v: fill");</p> <p>Objfill.Rotate = "T";</p> <p>Objfill.focus = "100%";</p> <p>Objfill.Type = "gradient";</p> <p>Objfill.angle = parseint (360 * (Startangle Endangle / 2);</p> <p>vpieel.appendchild (objfill);</p> <p>Var objTextBox = Document.createElement ("v: textbox");</p> <p>Objtextbox.border = "1px solid black";</p> <p>Objtextbox.innerhtml = this.all [i] .name ":" this.all [i] .value;</p> <p>//vpieel.appendchild (objtextbox);</p> <p>Var vcolor = this.randcolor ();</p> <p>vpieel.fillcolor = vcolor; // Set color</p> <p>// Start the legend</p> <p>Objrow = objlegendtable.insertrow ();</p> <p>Objrow.style.Height = "16px";</p> <p>Var objcolor = Objrow.Insertcell (); // color tag</p> <p>Objcolor.style.backgroundColor = Vcolor;</p> <p>Objcolor.Style.Width = "16px";</p> <p>Objcolor.pieElement = VPIEID;</p> <p>Objcolor.attachevent ("OnMouseover", LegendMouseOvereVent;</p> <p>Objcolor.attachevent ("OnMouseout", LegendMouseoutevent;</p> <p>//objcolor.οnmοuseοver= "LegendMouseOverevent ()";</p> <p>//objcolor.οnmοuseοut= "LegendMouseoutevent ()";</p> <p>Objcell = Objrow.Insertcell ();</p> <p>Objcell.style.font = "icon"; objcell.style.padding = "3px";</p> <p>Objcell.innertext = this.all [i] .name ":" this.all [i] .value;</p> <p>Vgroup.Appendchild (VPIEEL);</p> <p>}</p> <p>}</p> <p>Vmlpie.prototype.refresh = function () {</p> <p>}</p> <p>Vmlpie.prototype.zoom = function (ivalue) {</p> <p>VAR VX = 21600;</p> <p>VAR VY = 21600;</p> <p>THIS.VMLOBJECT.COORDSIZE = PARSEINT (VX / IVALUE) "," PARSEINT (VY / IVALUE);</p> <p>}</p> <p>Vmlpie.prototype.adddata = function (sname, svalue, stooltiptext) {</p> <p>VAR ODATA = New Object ();</p> <p>Odata.name = sname;</p> <p>Odata.value = svalue;</p> <p>Odata.tooltiptext = stooltiptext;</p> <p>Var iCount = this.all.length;</p> <p>THIS.ALL [ICOUNT] = ODATA;</p> <p>}</p> <p>Vmlpie.prototype.clear = function () {</p> <p>THIS.ALL.LENGTH = 0;</p> <p>}</p> <p>Function legendmouseoverevent () {</p> <p>Var Esrc = window.event.srcelement;</p> <p>ESRC.BORDER = "1PX solid black";</p> <p>}</p> <p>Function legendmouseoutevent () {</p> <p>Var Esrc = window.event.srcelement;</p> <p>Esrc.border = "";</p> <p>}</p> <p>Var objpie = null;</p> <p>/ / The following is a function call</p> <p>Function drawpie () {</p> <p>Objpie = New VMLPIE (Document.body, "600px", "450px", "demographic");</p> <p>//objpie.borderwidth=3;</p> <p>//objpie.bordercolor="blue ";</p> <p>//objpie.width="800px ";</p> <p>//Objpie.height="600px ";</p> <p>Objpie.backgroundcolor = "# fffff";</p> <p>Objpie.shadow = true;</p> <p>Objpie.Adddata ("Beijing", 10, "Beijing's population");</p> <p>Objpie.adddata ("Shanghai", 52, "Shanghai fixed population");</p> <p>Objpie.Adddata ("Tianjin", 30, "Tianjin's field population");</p> <p>Objpie.adddata ("Xi'an", 58, "Xi'an City Population");</p> <p>Objpie.adddata ("Wuhan", 30, "Wuhan's field population");</p> <p>Objpie.adddata ("Chongqing", 58, "Chongqing City Population");</p> <p>Objpie.draw ();</p> <p>//alert (Document.body.outerHTML);</p> <p>}</p> <p></ script></p> <p></ hEAD></p> <p><body οnlοad = "Drawpie ()> <v: shapetype id =" tooltips "coordsize =" 21600, 21600 "o: SPT =" 106 "path =" AR0, 7165, 4345, 13110, 1950, 7185, 1080, 12690 at475,11732,4835,17650,1080,12690,2910,17640 at2387,9757,10107,20300,2910,17640,8235,19545 at7660,12382,14412,21597,8235,19545,14280,18330 at12910,11080, 18695,18947,14280,18330,18690,15045 at14822,5862,21597,15082,18690,15045,20895,7665 at15772,2592,21105,9865,20895,7665,19140,2715 at14330,0,19187,6595,19140 , 2715, 14910, 1170 AT10992, 0, 15357, 5945, 14910, 1170, 11250, 1665 AT6692, 650, 1665, 7005, 2580 AT1912, 1972, 8665, 11162, 7005, 2580, 1950, 7185 XE AR0, 7165, 4345, 13110, 1080, 12690, 2340, 11080 NF E AR475, 11732, 4835, 11650, 11445 NF E AR7660, 12382, 14412, 21597, 7905, 18675, 8235, 19545 NF E AR7660, 12382, 14412, 21597, 11280, 18330, 11400, 11370 NF E AR12910, 11080, 111045, 11070, 11475 NF E AR15772, 2592, 21105, 9865, 20175, 9015, 9865, 20175, 9015, 20895 , 7665 NF E AR14330, 0, 19187, 6595, 19200, 3345, 19140, 2715 NF E AR14330, 0, 19187, 6595, 11910, 1170, 11550, 1980 N Fe AR10992, 0, 15357, 5945, 11250, 1665, 11040, 2340 NF E AR1912, 1972, 8665, 11162, 7650, 3270, 7005, 2580 NF E AR1912, 1972, 8665, 11162, 1950, 7185, 2070, 7890 NF em @ 23 @ 37 @ 35 @ 24 @ 23 @ 36 @ 34 @ 24 @ 23 @ 37 xem @ 16 @ 33 @ 31 @ 17 @ 16 @ 33 xem @ 38 @ 29 QX @ 27 @ 39 @ 38 @ 28 @ 26 @ 39 @ 38 @ 29 xe "</p> <p>Adj = "1350, 25920"></p> <p><v: Formulas></p> <p><v: f eqn = "SUM # 0 10800"> </ V: f></p> <p><v: f eqn = "SUM # 1 0 10800"> </ V: f></p> <p><v: f eqn = "Cosatan2 10800 @ 0 @ 1"> </ v: f></p> <p><v: f eqn = "sinatan2 10800 @ 0 @ 1"> </ v: f> <v: f EQn = "SUM @ 2 10800 0"> </ v: f></p> <p><v: f eqn = "SUM @ 3 10800 0"> </ V: f></p> <p><v: f eqn = "SUM @ 4 0 # 0"> </ V: f></p> <p><v: f eqn = "SUM @ 5 0 # 1"> </ v: f></p> <p><v: f eqn = "MOD @ 6 @ 7 0"> </ V: f></p> <p><v: f eqn = "Prod 600 11 1"> </ v: f></p> <p><v: f eqn = "SUM @ 8 0 @ 9"> </ v: f></p> <p><v: f eqn = "prod @ 10 1 3"> </ v: f></p> <p><v: f eqn = "prod 600 3 1"> </ v: f></p> <p><v: f eqn = "SUM @ 11 @ 12 0"> </ V: f></p> <p><v: f eqn = "prod @ 13 @ 6 @ 8"> </ v: f></p> <p><v: f eqn = "prod @ 13 @ 7 @ 8"> </ v: f></p> <p><v: f eqn = "SUM @ 14 # 0 0"> </ V: f></p> <p><v: f eqn = "SUM @ 15 # 1 0"> </ v: f></p> <p><v: f eqn = "prod 600 8 1"> </ v: f></p> <p><v: f eqn = "prod @ 11 2 1"> </ v: f></p> <p><v: f eqn = "SUM @ 18 @ 19 0"> </ v: f></p> <p><v: f eqn = "prod @ 20 @ 6 @ 8"> </ v: f></p> <p><v: f eqn = "prod @ 20 @ 7 @ 8"> </ v: f></p> <p><v: f eqn = "SUM @ 21 # 0 0"> </ v: f></p> <p><v: f eqn = "SUM @ 22 # 1 0"> </ v: f></p> <p><v: f eqn = "Prod 600 2 1"> </ v: f></p> <p><v: f eqn = "SUM # 0 600 0"> </ v: f></p> <p><v: f eqn = "SUM # 0 0 600"> </ V: f></p> <p><v: f eqn = "SUM # 1 600 0"> </ v: f></p> <p><v: f eqn = "SUM # 1 0 600"> </ V: f></p> <p><v: f eqn = "SUM @ 16 @ 25 0"> </ V: f></p> <p><v: f eqn = "SUM @ 16 0 @ 25"> </ v: f></p> <p><v: f eqn = "SUM @ 17 @ 25 0"> </ v: f></p> <p><v: f eqn = "SUM @ 17 0 @ 25"> </ v: f></p> <p><v: f eqn = "SUM @ 23 @ 12 0"> </ v: f></p> <p><v: f eqn = "SUM @ 23 0 @ 12"> </ v: f></p> <p><v: f eqn = "SUM @ 24 @ 12 0"> </ V: f></p> <p><v: f eqn = "SUM @ 24 0 @ 12"> </ v: f></p> <p><v: f eqn = "SUM # 0 0 0"> </ V: f></p> <p><v: f eqn = "SUM # 1 0 0"> </ V: f></p> <p></ v: formulas></p> <p><v: path o: connectionlocs = "67, 10800; 10800, 21577; 21582, 10800; 10800, 1235; @ 38, @ 39" o: EXTRusionok = "f"</p> <p>o: ConnectType = "Custom" TextBoxRect = "2977, 3262, 17087, 17337"> </ v: path></p> <p><v: handles></p> <p><v: h position = "# 0, # 1"> </ v: h></p> <p></ v: handles></p> <p><o: complex v: ext = "view"> </ o: Complex></p> <p></ v: shapetype></p> <p><select id = "zoom" οnchange = "οncie.zoom (this.value)"></p> <p><option value = "0.2" SELECTED = true> 20% </ option></p> <p><option value = "0.25> 25% </ option></p> <p><Option value = "0.4"> 40% </ option></p> <p><Option value = "0.5"> 50% </ option></p> <p><option value = "0.75"> 75% </ option></p> <p><Option value = "0.8"> 80% </ option></p> <p><Option value = "1"> Original size </ option></p> <p><Option value = "1.25"> 125% </ option></p> <p><Option value = "1.5"> 150% </ option></p> <p><Option value = "2"> 200% </ option></p> <p><Option value = "3"> 300% </ option> <option value = "4"> 400% </ option></p> <p></ select></p> <p></ body></p> <p></ html> [Ctrl A full selection prompt: You can modify some code first, then run the code again]</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-50040.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="50040" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.055</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 's_2Fzqo3tF8EDSZragLCbJxzZ22Gr3_2BtwIuHlRiG7QxCg8NiPWvy8gsrFbi_2FbaQm81nYwkBm1GWixFCDW_2Bm7jO2A_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>