Home > Developer > JavaScript
SVG Reference: https://www.w3.org/TR/SVG/
<body onload= ' Document.body.appendChild (Piechart ([12,23,34,45],640,400,200,200,150,["Red", "blue", "Yellow", " Green "],[", "South", "East", "West"],400,100); ><!--<object data= "./sample.svg" type= "Image/svg+xml" width= "300px" height= "300px"/>--><script Type= "Text/javascript" >/** * Creates a <svg> element and draws a pie chart * parameter: * Data: An array of number types used to draw, each of which represents a wedge in the pie chart * width,height : SVG graphics size in pixels * CX CY R: the Center and radius of the pie chart * colors: An array of HTML color information, each of which represents the color of each wedge in the pie chart * Labels: An array of labels that describes the meaning of each wedge in the pie chart * l X ly: Top left corner of pie chart * Returns: * A <svg> element that saves a pie chart * The caller must insert the returned element into the document */function Piechart (data, width,height,cx,cy,r,colors, labels,lx,ly) {//This is the XML namespace that represents the SVG element var svgns = "Http://www.w3.org/2000/svg";//Create a <svg> element while setting the pixel size and user coordinate Var Chart = Document.createelementns (svgns, "Svg:svg"), Chart.setattribute ("width", width), chart.setattribute ("height", height); Chart.setattribute ("ViewBox", "0 0" +width+ "" "+height);//Add the value of data in order to know the size of the pie graph var total = 0;for (var i = 0; i < data.length; i++) Total + = data[i];//Now calculates the size of each shard in the pie chart, where the angle is calculated in radians for var angles = [];for (var i = 0; i<data.length; i++) angles[i] = data[i]/ total*math.pi*2;//iterates through each shard of the pie chart startangle = 0; for (var i = 0; i < data.length; i++) {//here represents the end position of the wedge var Endagle = startangle+angles[i];//Calculates the two points of the wedge and the garden intersection//These formulas are all in the 12 o'clock direction 0 degrees//clockwise angle increment var x1 = cx+r*math.sin (startangle); var y1 = Cy-r*math.cos (startangle); var x2 = Cx+r*math.sin (endagle); var y2 = Cx-r*math.cos (Endagle);//This marker indicates that the angle is greater than half-circle//This marker requires var big = 0;if (Endagle-startangle > Math.PI) when drawing svg arc components. Big = 1;//Use <svg:path> elements to describe wedges//To be aware of, use Createelementns () to create the element var path = Document.createelementns (svgns, "path");// The following string contains the details of the path var d= "M" + cx + "," + cy +//starting from the center of the Circle "L" + x1 + "," + y1 +//Draw a line to (X1,y1) the line segment "a" + R + "," + R +//draw a radius of R Arc "0" + big + "1" +//arc details x2 + "," + y2 +//arc to (x2,y2) end "Z";//current path to (cx,cy) end//settings <svg:path> element Properties Path.setattribut E ("D", d);//set Path Path.setattribute ("Fill", colors[i]);//Set Wedge color Path.setattribute ("Stroke", "black");// The outer frame of the wedge is black path.setattrIbute ("Stroke-width", "2");//Two units wide chart.appendchild (path);//Wedge is added to the pie chart//The end of the current wedge is the beginning of the next wedge startangle = endagle;// Now draw some corresponding small squares to represent the legend var icon = document.createelementns (svgns, "rect"); Icon.setattribute ("x", lx);// Locate the small square icon.setattribute ("Y", Ly+30*i), Icon.setattribute ("width", 20);//Set the size of the small box Icon.setattribute ("height", 20); Icon.setattribute ("Fill", colors[i]);//Fill small squares with the same color as the corresponding wedge icon.setattribute ("stroke", "black");// The outer box color is also the same icon.setattribute ("Stroke-width", "2");//Two units wide chart.appendchild (icon);//Add to pie chart//Add label to the right of small squares var label = Document.createelementns (svgns, "text"); Label.setattribute ("X", lx+30);//Position label text Label.setattribute ("Y", ly+30*i+18 )///Text style properties can also be set by CSS ("Font-size", "Label.setattribute"), Label.setattribute ("font-family", "Sans-serif"); The <svg:text> element adds a DOM text node Label.appendchild (document.createTextNode (labels[i])); chart.appendchild (label); /Add text to a pie chart}return chart;} </script>
A pie chart drawn by Javascript+svg
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
