Html5 line chart and html5 line chart
Html5 line chart Detailed code
<Html> <canvas id = "a_canvas" width = "1000" height = "700"> </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 <data. length; I ++) {var d = 0; if (data [I] <0) {d = d-data [I];} else {d = data [I] ;}; if (d> max_v) {max_v = d };} max_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>
The running result is as follows:
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
