用html5绘制折线图的实例代码

1. html>     
2. canvas id="a_canvas" width="1000" height="700"> /canvas>     
3. script>     
4.          
5.                (function (){     
6.      
7.         window.addEventListener("load", function(){     
8.      
9.           VAR data = [100,-1000,0,700];     
10.      
11.           // 获取上下文    
12.           var a_canvas = document.getElementById('a_canvas');     
13.           var context = a_canvas.getContext("2d");     
14.      
15.      
16.           // 绘制背景    
17.           var gradient = context.createLineargradient(0,0,0,300);     
18.      
19.      
20.          // gradient.addColorStop(0,"#e0e0e0");     
21.           //gradient.addColorStop(1,"#ffffff");     
22.      
23.      
24.           context.fillStyle = gradient;     
25.      
26.           context.fillRect(0,0,a_canvas.width,a_canvas.height);     
27.      
28.               
29.           // 描绘边框    
30.           var grid_cols = data.length + 1;     
31.           var grid_rows = 4;     
32.           var cell_height = a_canvas.height / grid_rows;     
33.           var cell_width = a_canvas.width / grid_cols;     
34.           context.lineWidth = 1;     
35.           context.strokeStyle = "#a0a0a0";     
36.      
37.           // 结束边框描绘    
38.           context.beginPath();     
39.           // 准备画横线    
40.          /*for (var col = 0;  col = grid_cols;  col++) {     
41.             var x = col * cell_width;     
42.             context.moveTo(x,0);     
43.             context.lineto(x,a_canvas.height);     
44.           }     
45.           // 准备画竖线    
46.           for(var row = 0;  row = grid_rows;  row++){     
47.             var y = row * cell_height;     
48.             context.moveTo(0,y);     
49.             context.lineTo(a_canvas.width, y);     
50.           } */    
51.             //划横线    
52.             context.moveTo(0,a_canvas.height/2);     
53.             context.lineTo(a_canvas.width,a_canvas.height/2);     
54.                  
55.             //画竖线    
56.           context.moveTo(0,0);     
57.             context.lineTo(0,a_canvas.height);     
58.              
59.              
60.           context.lineWidth = 1;     
61.           context.strokeStyle = "#c0c0c0";     
62.           context.stroke();     
63.      
64.           var max_v =0;     
65.               
66.           for(var i = 0;  idata.length;  i++){     
67.               var d=0;     
68.               if(data[i]0)    
69.               { dd=d-data[i];     
70.                   }     
71.                   else{ d=data[i]; } ;     
72.             if (d >  max_v) {  max_v =d} ;     
73.           }     
74.           max_vmax_v = max_v * 1.1;     
75.           // 将数据换算为坐标    
76.           var points = [];     
77.           for( var i=0;  i  data.length;  i++){     
78.             var v= data[i];     
79.             var px = cell_width *　(i +1);     
80.             var py = a_canvas.height/2 - a_canvas.height*(v / max_v)/2;     
81.             points.push({ "x":px,"y":py} );     
82.           }     
83.           // 绘制折现    
84.           context.beginPath();     
85.           context.moveTo(points[0].x, points[0].y);     
86.           for(var i= 1;  i points.length;  i++){     
87.             context.lineTo(points[i].x,points[i].y);     
88.           }     
89.      
90.      
91.           context.lineWidth = 2;     
92.           context.strokeStyle = "#8BA9FF";     
93.           context.stroke();     
94.      
95.           //绘制坐标图形    
96.           for(var i in points){     
97.             var p = points[i];     
98.             context.beginPath();     
99.             context.arc(p.x,p.y,4,0,2*Math.PI);     
100.             //实心圆    
101.            /*    
102.             context.fillStyle = "#000"; */    
103.             //空心圆    
104.             context.strokeStyle = "#000";     
105.             context.stroke();     
106.             context.fillStyle="whITe";     
107.             context.fill();     
108.           }     
109.           //添加文字    
110.           for(var i in points)    
111.           {   var p = points[i];     
112.             context.beginPath();     
113.             context.fillStyle="black";     
114.             context.fillText(data[i], p.x + 1, p.y - 15);     
115.                    
116.               }     
117.         } ,false);     
118.       } )();     
119.      
120.            
121. /script>     
122. /html>   
     

运行结果如下：

以上这篇用html5绘制折线图的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

原文地址：http://www.cnblogs.com/shuniuniu/archive/2016/03/25/5318717.html

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！