<Html xmlns: v = "urn: schemas-microsoft-com: vml" xmlns: o = "urn: schemas-microsoft-com: office">
<Head>
<STYLE> v \: * {BEHAVIOR: url (# default # VML )}
O \: * {BEHAVIOR: url (# default # VML )}
. Shape {BEHAVIOR: url (# default # VML )}
</STYLE>
<Script language = "javascript">
Function Add (){
Var shape = document. createElement ("v: shape ");
Shape. type = "# tooltipshape ";
Shape. style. width = "150px ";
Shape. style. height = "150px ";
Shape. coordsize = "21600,21600 ";
Shape. fillcolor = "infobackground ";
Var textbox = document. createElement ("v: textbox ");
Textbox. style. border = "1px solid red ";
Textbox. style. innerHTML = "test ";
Shape. appendChild (textbox );
Document. body. appendChild (shape );
}
Function VMLPie (pContainer, pWidth, pHeight, pCaption ){
This. Container = pContainer;
This. Width = pWidth | "400px ";
This. Height = pHeight | "250px ";
This. Caption = pCaption | "VML Chart ";
This. backgroundColor = "";
This. Shadow = false;
This. BorderWidth = 0;
This. BorderColor = null;
This. all = new Array ();
This. RandColor = function (){
Return "rgb (" + parseInt (Math. random () * 255) + "," + parseInt (Math. random () * 255) + "," + parseInt (Math. random () * 255) + ")";
}
This. VMLObject = null;
}
VMLPie. prototype. Draw = function (){
// Draw an External Frame
Var o = document. createElement ("v: group ");
O. style. width = this. Width;
O. style. height = this. Height;
O. coordsize = "21600,21600 ";
// Add a background layer
Var vRect = document. createElement ("v: rect ");
VRect. style. width = "21600px"
VRect. style. height = "21600px"
O. appendChild (vRect );
Var vCaption = document. createElement ("v: textbox ");
VCaption. style. fontSize = "24px ";
VCaption. style. height = "24px"
VCaption. style. fontWeight = "bold ";
VCaption. innerHTML = this. Caption;
VCaption. style. textAlign = "center ";
VRect. appendChild (vCaption );
// Set the border size
If (this. BorderWidth ){
VRect. strokeweight = this. BorderWidth;
}
// Set the border color
If (this. BorderColor ){
VRect. strokecolor = this. BorderColor;
}
// Set the background color
If (this. backgroundColor ){
VRect. fillcolor = this. backgroundColor;
}
// Set whether a shadow is displayed.
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 = o;
This. Container. appendChild (o );
// Start painting the internal Garden
Var oOval = document. createElement ("v: oval ");
OOval. style. width = "15000px ";
OOval. style. height = "14000px ";
OOval. style. top = "4000px ";
OOval. style. left = "1000px ";
OOval. fillcolor = "# d5dbfb ";
// I planned to add the 3D effect. Later, I felt that it was really difficult to control the effect, so I was too lazy to do it.
// Var o3D = document. createElement ("o: extrusion ");
Var formatStyle = '<v: fill rotate = "t" angle = "-135" focus = "100%" type = "gradient"/> ';
// FormatStyle + = '<o: extrusion v: ext = "view" color = "# 9cf" on = "t" rotationangle = "-15 "';
// FormatStyle + = 'viewpoint = "0, 34.72222" viewpointorigin = "0,. 5" skewangle = "105 "';
// FormatStyle + = 'lightposition = "50000" lightposition2 = "0,-"/> ';
FormatStyle + = '<o: extrusion v: ext = "view" backdepth = "1in" on = "t" viewpoint = "0, 34.72222mm" viewpointorigin = "0 ,. 5 "skewangle =" 90 "lightposition ="-50000 "lightposition2 =" 50000 "type =" perspective "/> ';
OOval. innerHTML = formatStyle;
O. appendChild (oOval );
This. CreatePie (o );
}
VMLPie. prototype. CreatePie = function (vGroup ){
Var mX = Math. pow (2, 16) * 360;
// This parameter is the key to drawing.
// AE x y width height startangle endangle
// X y indicates the center of the circle
// Width and height
// The startangle endangle calculation method is as follows:
// 2 ^ 16 * degree
Var vTotal = 0;
Var startAngle = 0;
Var endAngle = 0;
Var pieAngle = 0;
Var prePieAngle = 0;
Var objRow = null;
Var objCell = null;
For (I = 0; I <this. all. length; I ++ ){
VTotal + = this. all [I]. Value;
}
Var objLegendRect = document. createElement ("v: rect ");
Var objLegendTable = document. createElement ("table ");
ObjLegendTable. cellPadding = 0;
ObjLegendTable. cellSpacing = 3;
ObjLegendTable. width = "100% ";
With (objLegendRect ){
Style. left = "17000px ";
Style. top = "4000px ";
Style. width = "4000px ";
Style. height = "12000px ";
Fillcolor = "# e6e6e6 ";
Strokeweight = "1px ";
}
ObjRow = objLegendTable. insertRow ();
ObjCell = objRow. insertCell ();
ObjCell. colSpan = "2 ";
// ObjCell. style. border = "1px outset ";
ObjCell. style. backgroundColor = "black ";
ObjCell. style. padding = "5px ";
ObjCell. style. color = "window ";
ObjCell. style. font = "caption ";
ObjCell. innerText = "Total:" + vTotal;
Var vTextbox = document. createElement ("v: textbox ");
VTextbox. appendChild (objLegendTable );
ObjLegendRect. appendChild (vTextbox );
Var vShadow = document. createElement ("v: shadow ");
VShadow. on = "t ";
VShadow. type = "single ";
VShadow. color = "graytext ";
VShadow. offset = "2px, 2px ";
ObjLegendRect. appendChild (vShadow );
VGroup. appendChild (objLegendRect );
Var strAngle = "";
For (I = 0; I <this. all. length; I ++) {// specify the pie chart in sequence.
Var vPieEl = document. createElement ("v: shape ");
Var vPieId = document. uniqueID;
VPieEl. style. width = "15000px ";
VPieEl. style. height = "14000px ";
VPieEl. style. top = "4000px ";
VPieEl. style. left = "1000px ";
VPieEl. coordsize = "1500,1400 ";
VPieEl. strokecolor = "white ";
VPieEl. id = vPieId;
PieAngle = this. all [I]. Value/vTotal;
StartAngle + = prePieAngle;
PrePieAngle = pieAngle;
EndAngle = pieAngle;
// StrAngle + = this. all [I]. 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 ";
VPieEl. title = this. all [I]. name + "\ n proportion:" + endAngle * 100 + "% \ n detailed description:" + this. all [I]. tooltipText;
// VPieEl. innerHTML = '<v: fill rotate = "t" angle = "-135" focus = "100%" type = "gradient"/> ';
Var objFill = document. createElement ("v: fill ");
ObjFill. rotate = "t ";
ObjFill. Focuses = "100% ";
ObjFill. type = "gradient ";
ObjFill. angle = parseInt (360 * (startAngle + endAngle/2 ));
VPieEl. appendChild (objFill );
Var objTextbox = document. createElement ("v: textbox ");
ObjTextbox. border = "1px solid black ";
ObjTextbox. innerHTML = this. all [I]. Name + ":" + this. all [I]. Value;
// VPieEl. appendChild (objTextbox );
Var vColor = this. RandColor ();
VPieEl. fillcolor = vColor; // set the color.
// Start to draw a legend
ObjRow = objLegendTable. insertRow ();
ObjRow. style. height = "16px ";
Var objColor = objRow. insertCell (); // color tag
ObjColor. style. backgroundColor = vColor;
ObjColor. style. width = "16px ";
ObjColor. PieElement = vPieId;
ObjColor. attachEvent ("onmouseover", LegendMouseOverEvent );
ObjColor. attachEvent ("onmouseout", LegendMouseOutEvent );
// ObjColor. onmouseover = "LegendMouseOverEvent ()";
// ObjColor. onmouseout = "LegendMouseOutEvent ()";
ObjCell = objRow. insertCell ();
ObjCell. style. font = "icon ";
ObjCell. style. padding = "3px ";
ObjCell. innerText = this. all [I]. Name + ":" + this. all [I]. Value;
VGroup. appendChild (vPieEl );
}
}
VMLPie. prototype. Refresh = function (){
}
VMLPie. prototype. Zoom = function (iValue ){
Var vX = 21600;
Var vY = 21600;
This. VMLObject. coordsize = parseInt (vX/iValue) + "," + parseInt (vY/iValue );
}
VMLPie. prototype. AddData = function (sName, sValue, sTooltipText ){
Var oData = new Object ();
OData. Name = sName;
OData. Value = sValue;
OData. TooltipText = sTooltipText;
Var iCount = this. all. length;
This. all [iCount] = oData;
}
VMLPie. prototype. Clear = function (){
This. all. length = 0;
}
Function LegendMouseOverEvent (){
Var eSrc = window. event. srcElement;
ESrc. border = "1px solid black ";
}
Function LegendMouseOutEvent (){
Var eSrc = window. event. srcElement;
ESrc. border = "";
}
Var objPie = null;
// The following is the function call
Function DrawPie (){
ObjPie = new VMLPie (document. body, "100px", "0000px ","~ _~ Statistical Chart "); // initialization width, height, title
ObjPie. BorderWidth = 0; // chart border
ObjPie. BorderColor = "white"; // chart border color
ObjPie. Width = "500px"; // defines the chart Width.
ObjPie. Height = "400px"; // defines the chart Height.
ObjPie. backgroundColor = "# ffffff"; // defines the background color.
ObjPie. Shadow = false; // whether Shadow is required. Set true to false to avoid Shadow.
// Add chart data
// The Order is name, value, and description.
ObjPie. AddData ("Beijing", 50, "Beijing population ");
ObjPie. AddData ("Shanghai", 52, "fixed population in Shanghai ");
ObjPie. AddData ("Tianjin", 30, "population outside Tianjin ");
ObjPie. AddData ("Xi'an", 58, "Xi'an Urban Population ");
ObjPie. AddData ("Wuhan", 30, "Wuhan's field population ");
ObjPie. AddData ("Chongqing", 58, "Chongqing urban population ");
// Document. getElementById ("result"). innerHTML = "abc"; // objPie. Draw (); // generate VML data
ObjPie. Draw ();
// Alert (document. body. outerHTML );
}
</Script>
</Head>
<Body onLoad = "DrawPie ()">
<Select id = "zoom" onChange = "objPie. Zoom (this. value)">
<Option value = "0.2" selected = true> 20% </option>
<Option value = "0.25"> 25% </option>
<Option value = "0.4"> 40% </option>
<Option value = "0.5"> 50% </option>
<Option value = "0.75"> 75% </option>
<Option value = "0.8"> 80% </option>
<Option value = "1"> original size </option>
<Option value = "1.25"> 125% </option>
<Option value = "1.5"> 150% </option>
<Option value = "2"> 200% </option>
<Option value = "3"> 300% </option>
<Option value = "4"> 400% </option>
</Select>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
