Example code for generating bar chart (Bar Chart) results using html5-

The following is an example of html5 bar chart generation (bar chart. I think it is quite good. Now I will share it with you and give you a reference. Let's take a look at it with xiaobian. Example code for generating bar chart (Bar Chart) results using html5

    
 Script (function () {window. addEventListener ("load", function () {var data = [,]; var xinforma = ['August 11', 'August 11 ', 'October ', 'july 11']; // obtain the context var a_canvas = document. getElementById ('A _ canvas '); var context = a_canvas.getContext ("2d"); // draw the background var gradient = context. createLinearGradient (0,300,); // gradient. addColorStop (0, "# e0e0e0"); // gradient. addColorStop (1, "# ffffff"); context. fillStyle = gradient; context. fillRect (0, 0, a_canvas.width, a_canvas.height); var realheight = a_canvas.height-15; var realwidth = a_canvas.width-40; // depicts the border var grid_cols = data. length + 1; var grid_rows = 4; var cell_height = realheight/grid_rows; var cell_width = realwidth/grid_cols; context. lineWidth = 1; context. strokeStyle = "# a0a0a0"; // end the border to depict context. beginPath (); // prepare to draw a horizontal line/* for (var row = 1; row <= grid_rows; row ++) {var y = row * cell_height; context. moveTo (0, y); context. lineTo (a_canvas.width, y);} * // cross-line context. moveTo (0, realheight); context. lineTo (realwidth, realheight); // draw a vertical context. moveTo (0, 20); context. lineTo (0, realheight); context. lineWidth = 1; context. strokeStyle = "black"; context. stroke (); var max_v = 0; for (var I = 0; I
 
  
Max_v) {max_v = data [I]};} max_vmax_v = max_v * 1.1; // convert the data to the coordinate var points = []; for (var I = 0; I <data. length; I ++) {var v = data [I]; var px = cell_width * (I + 1); var py = realheight-realheight * (v/max_v ); // alert (py); points. push ({"x": px, "y": py});} // draw a coordinate image for (var I in points) {var p = points [I]; context. beginPath (); context. fillStyle = "green"; context. fillRect (p. x, p. y, 15, realheight-p.y); context. fill ();} // Add text for (var I in points) {var p = points [I]; context. beginPath (); context. fillStyle = "black"; context. fillText (data [I], p. x + 1, p. y-15); context. fillText (xinforma [I], p. x + 1, realheight + 12); context. fillText ('month', realwidth, realheight + 12); context. fillText ('amount of funds ',) ;}, false) ;}) (); script
 

Code for generating a bar chart (Bar Chart) using html5

Running result:

The above is the example code for generating bar charts (bar charts) by html5 _ html5 tutorial skills. For more information, see PHP Chinese website (www.php1.cn )!

Related Articles:

Use HTML5 Canvas to draw a bar chart

Use html to implement simple bar charts