Example code for creating a line chart using html5 _ html5 tutorial skills-

The following is an example of using html5 to draw a line chart. I think it is quite good. I will share it with you now. I would also like to give you a reference. Let's take a look at it with xiaobian. Example code for creating a line chart using html5 _ html5 tutorial skills

1.     
      
       
   Canvas> script (function () {window. addEventListener ("load", function () {var data = [100,-700, 0,]; // 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); // depicts the border var grid_cols = data. length + 1; var grid_rows = 4; var cell_height = a_canvas.height/grid_rows; var cell_width = a_canvas.width/grid_cols; context. lineWidth = 1; context. strokeStyle = "# a0a0a0"; // end the border to depict context. beginPath (); // prepare to draw a horizontal line/* for (var col = 0; col <= grid_cols; col ++) {var x = col * cell_width; context. moveTo (x, 0); context. lineTo (x, a_canvas.height);} // prepare to draw a vertical line for (var row = 0; row <= grid_rows; row ++) {var y = row * cell_height; context. moveTo (0, y); context. lineTo (a_canvas.width, y);} * // cross-line context. moveTo (0, a_canvas.height/2); context. lineTo (a_canvas.width, a_canvas.height/2); // draw a vertical context. moveTo (0, 0); context. lineTo (0, a_canvas.height); context. lineWidth = 1; context. strokeStyle = "# c0c0c0"; context. stroke (); var max_v = 0; for (var I = 0; I
       
        
   Max_v) {max_v = d };} 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 = a_canvas.height/2-a_canvas.height * (v/max_v) /2; points. push ({"x": px, "y": py});} // draw the discounted context. beginPath (); context. moveTo (points [0]. x, points [0]. y); for (var I = 1; I <points. length; I ++) {context. lineTo (points [I]. x, points [I]. y);} context. lineWidth = 2; context. strokeStyle = "# 8BA9FF"; context. stroke (); // draw the Coordinate graph for (var I in points) {var p = points [I]; context. beginPath (); context. arc (p. x, p. y, 4, 0, 2 * Math. PI); // solid circle/* context. fillStyle = "#000"; * // hollow circle context. strokeStyle = "#000"; context. stroke (); context. fillStyle = "white"; 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) ;}}, false) ;}(); script> html>
       
      

The running result is as follows:

The above is the content of the example code _ html5 tutorial skill for drawing a line chart with html5. For more information, see PHP Chinese website (www.php1.cn )!