html5生成柱状图(条形图)效果的实例代码

网络
人生有起有落，有起有伏，无论你现在是在人生的顶峰，还是在人生的低谷，都是人生必经的一个过程。站在山峰的你，回头看看曾经在山谷的你，是多么的发奋图强，自强不息。所有的好事不是不来，而是在等红绿灯的路上。
XML/HTML Code复制内容到剪贴板
  1. <html>
  2. <canvasid="a_canvas"width="1000"height="700"></canvas>
  3. <script>
  4. (function(){
  6. window.addEventListener("load",function(){
  8. vardata=[1000,1300,2000,3000,2000,2000,1000,1500,2000,5000,1000,1000];
  9. varxinforma=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
  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);
  28. varrealheight=a_canvas.height-15;
  29. varrealwidth=a_canvas.width-40;
  30. //描绘边框
  31. vargrid_cols=data.length+1;
  32. vargrid_rows=4;
  33. varcell_height=realheight/grid_rows;
  34. varcell_width=realwidth/grid_cols;
  35. context.lineWidth=1;
  36. context.strokeStyle="#a0a0a0";
  38. //结束边框描绘
  39. context.beginPath();
  40. //准备画横线
  41. /*for(varrow=1;row<=grid_rows;row++){
  42. vary=row*cell_height;
  43. context.moveTo(0,y);
  44. context.lineTo(a_canvas.width,y);
  45. }*/
  47. //划横线
  48. context.moveTo(0,realheight);
  49. context.lineTo(realwidth,realheight);
  52. //画竖线
  53. context.moveTo(0,20);
  54. context.lineTo(0,realheight);
  55. context.lineWidth=1;
  56. context.strokeStyle="black";
  57. context.stroke();
  60. varmax_v=0;
  62. for(vari=0;i<data.length;i++){
  63. if(data[i]>max_v){max_v=data[i]};
  64. }
  65. max_vmax_v=max_v*1.1;
  66. //将数据换算为坐标
  67. varpoints=[];
  68. for(vari=0;i<data.length;i++){
  69. varv=data[i];
  70. varpx=cell_width*　(i+1);
  71. varpy=realheight-realheight*(v/max_v);
  72. //alert(py);
  73. points.push({"x":px,"y":py});
  74. }
  76. //绘制坐标图形
  77. for(variinpoints){
  78. varp=points[i];
  79. context.beginPath();
  80. context.fillStyle="green";
  81. context.fillRect(p.x,p.y,15,realheight-p.y);
  83. context.fill();
  84. }
  85. //添加文字
  86. for(variinpoints)
  87. {varp=points[i];
  88. context.beginPath();
  89. context.fillStyle="black";
  90. context.fillText(data[i],p.x+1,p.y-15);
  91. context.fillText(xinforma[i],p.x+1,realheight+12);
  92. context.fillText('月份',realwidth,realheight+12);
  93. context.fillText('资金量',0,10);
  94. }
  95. },false);
  96. })();
  98. </script>
  99. </html>

html5生成柱状图（条形图）详细代码

运行结果：

以上这篇html5生成柱状图(条形图)效果的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

原文地址：http://www.cnblogs.com/shuniuniu/p/5318666.html

您可能有感兴趣的文章
html5中canvas图表如何实现柱状图的示例