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

互联网
晨曦是朝气蓬勃的美少女，在你耳畔浅吟低唱，她身上带有露珠草香的味道，会飘香你一整天的心情，祝你每一天都！你多学一样本事，就少说一句求人的话。
XML/HTML Code复制内容到剪贴板
  1. <html>
  2. <canvasid="a_canvas"width="1000"height="700"></canvas>
  3. <script>
  5. (function(){
  7. window.addEventListener("load",function(){
  9. vardata=[100,-1000,0,700];
  11. //获取上下文
  12. vara_canvas=document.getElementById('a_canvas');
  13. varcontext=a_canvas.getContext("2d");
  16. //绘制背景
  17. vargradient=context.createLinearGradient(0,0,0,300);
  20. //gradient.addColorStop(0,"#e0e0e0");
  21. //gradient.addColorStop(1,"#ffffff");
  24. context.fillStyle=gradient;
  26. context.fillRect(0,0,a_canvas.width,a_canvas.height);
  29. //描绘边框
  30. vargrid_cols=data.length+1;
  31. vargrid_rows=4;
  32. varcell_height=a_canvas.height/grid_rows;
  33. varcell_width=a_canvas.width/grid_cols;
  34. context.lineWidth=1;
  35. context.strokeStyle="#a0a0a0";
  37. //结束边框描绘
  38. context.beginPath();
  39. //准备画横线
  40. /*for(varcol=0;col<=grid_cols;col++){
  41. varx=col*cell_width;
  42. context.moveTo(x,0);
  43. context.lineTo(x,a_canvas.height);
  44. }
  45. //准备画竖线
  46. for(varrow=0;row<=grid_rows;row++){
  47. vary=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);
  55. //画竖线
  56. context.moveTo(0,0);
  57. context.lineTo(0,a_canvas.height);
  60. context.lineWidth=1;
  61. context.strokeStyle="#c0c0c0";
  62. context.stroke();
  64. varmax_v=0;
  66. for(vari=0;i<data.length;i++){
  67. vard=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. varpoints=[];
  77. for(vari=0;i<data.length;i++){
  78. varv=data[i];
  79. varpx=cell_width*　(i+1);
  80. varpy=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(vari=1;i<points.length;i++){
  87. context.lineTo(points[i].x,points[i].y);
  88. }
  91. context.lineWidth=2;
  92. context.strokeStyle="#8BA9FF";
  93. context.stroke();
  95. //绘制坐标图形
  96. for(variinpoints){
  97. varp=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(variinpoints)
  111. {varp=points[i];
  112. context.beginPath();
  113. context.fillStyle="black";
  114. context.fillText(data[i],p.x+1,p.y-15);
  116. }
  117. },false);
  118. })();
  121. </script>
  122. </html>

运行结果如下：

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

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