**H5 简单几步实现柱状图，饼状图**
<!doctype html><meta charset="Utf-8"><html><head><meta charset="UTF-8"><title>Pie chart</title></head><body><div Align="center"><canvas id="MyCanvas" width=" height" = "a"style="border:1px solide: #325CA5;" > </Canvas></div><script type="Text/javascript"> varcolor=[' #FFFF00 ',' Red ',' Blue ',' #FF7F00 ',' #FF4500 ',' #EE1289 ',' #D3D3D3 ',' #FF83FA ',' #ADFF2F ',' #8B2323 ',' #7FFF00 ',' #48D1CC ',' #00FFFF ',' #00EE00 ',' #000000 ',' #8B0A50 ',' #8B7500 ',' #A0522D '];varpercent=[ the, *, -];varCanvas=document.getelementbyid ("MyCanvas");varCtx=canvas.getcontext ("2d");varCenterX = canvas.width/2;varCenterY = canvas.height/2;varChartradius = canvas.height/2;varStartPoint =2*Math. pi*1.5; for(varI=0; i<percent.length;i++) {Ctx.beginpath (); Ctx.moveto (Centerx,centery); Ctx.fillstyle=color[i]; Ctx.arc (centerx,centery,chartradius,startpoint,startpoint-2*Math. pi* (percent[i]/ -),true); Ctx.closepath (); Ctx.fill (); startpoint-=2*Math. pi* (percent[i]/ -);}</script></body></html>If it is a fan-shaped picture so long do not loop on OK, the principle is to move to Ctx.moveto (Centerx,centery), draw an arc Ctx.arc (Centerx,centery,chartradius,startpoint, startpoint-2*math.pi* (percent[i]/100), true) five parameters are center, radius, start point, end point, clockwise
<! DOCTYPE html><html> <head><title>Chart Demo</title> <style> #chartContainer{ border:solid 1px #999; } </style> <script src="Http://cloud.github.com/downloads/scottkiss/H5Draw/H5Draw.js" ></script> <script src="Http://cloud.github.com/downloads/scottkiss/H5Draw/h5Charts.js" ></script> <script>Window.onload = function(){ varChart =NewH5charts.serialchart (); Chart.dataprovider = [{age:" ", Amount:Ten},{age:" the", Amount: -},{age:"8", Amount:6},{age:"very", Amount: -}]; Chart.categoryfield ="Age"; Chart.valuefield ="Amount"; Chart.type ="column"; Chart.columnwidth = -; Chart.colors = ["#f00","#0f0","#0ff","#00f"]; Chart.addto ("Chartcontainer"); };</script> </head> <body> <canvas id="Chartcontainer" width=" height" ="> "Browser doesn ' t support HTML5</Canvas> </body></html>The above program first introduced the need for JS files, respectively, H5draw.js and H5charts.js. The h5draw.js is a simple encapsulation of the canvas API, and in H5charts.js the drawing functions provided in h5draw.js are used, and h5charts.js is the internal implementation of drawing histograms. Here, we don't need to know how the internals are implemented, just instantiate a chart object of a histogram, then set the desired properties for the chart object, where the Dataprovider property is the user data that needs to be visualized. The type here is the column chart. Finally, the AddTo function of the chart object is called, and the object is added to the specified canvas element, which is completed.
Welcome to the Csdn-markdown Editor
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
