HTML5 pie chart (Statistical Chart)

HTML5 provides a powerful drawing API that allows us to easily draw various images using JavaScript. This article describes how to use HTML5 to draw a pie chart (Statistical Chart. First look at the pie chart effect:

This chart is dynamically generated. It dynamically draws a pie chart based on the input ratio parameter (array. The size of the pie chart is dynamically adjusted based on the <canvas> height.

AllCodeAs follows:

<! Doctype HTML> 
This function can be used directly. If you want to make it more beautiful, you can add some extra beautiful painting.
 

 
The maximum flexibility of this Code is to separate the drawing parameters from the drawing code. The pie chart size is automatically adjusted according to the canvas container height. The parameter passing method is as follows:
 

 
VaR data_arr = [0.05, 0.25, 0.6, 0.1]; // proportional data var color_arr = ["#00ff21", "# ffaa00", "#00 AABB ", "# ff4400"]; // color var text_arr = ["first quarter", "second quarter", "third quarter", "fourth quarter"]; // text // draw the pie chart drawcircle ("canvas_circle", data_arr, color_arr, text_arr );
 
 
If any error occurs, please correct it!