Example code for generating bar chart (Bar Chart) effects using html5, html5 bar chart
Copy XML/HTML Code to clipboard
- <Html>
- <Canvas id = "a_canvas" width = "1000" height = "700"> </canvas>
- <Script>
- (Function (){
- Window. addEventListener ("load", function (){
- Var data = [,];
- Var xinforma = ['August 11', 'August 11', 'August 11', 'August 11', 'August 11', 'August 11', 'August 30', 'August 30 ', 'August 11', 'August 11', 'August 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;
- // Draw 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 Border description
- 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 );
- }*/
- // Draw a line
- Context. moveTo (0, realheight );
- Context. lineTo (realwidth, realheight );
- // Draw a vertical line
- 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 <data. length; I ++ ){
- If (data [I]> max_v) {max_v = data [I]};
- }
- Max_vmax_v = max_v * 1.1;
- // Convert the data into coordinates
- 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 the coordinate chart
- 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 ', 0, 10 );
- }
- }, False );
- })();
- </Script>
- </Html>
Code for generating a bar chart (Bar Chart) using html5
Running result:
The example code for generating bar chart (Bar Chart) Effects in html5 is all the content shared by Alibaba Cloud. I hope you can provide a reference and support for the customer's house.
Address: http://www.cnblogs.com/shuniuniu/p/5318666.html
