DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> html5生成柱狀圖(條形圖)效果的實例代碼
html5生成柱狀圖(條形圖)效果的實例代碼
編輯：HTML5教程     
XML/HTML Code復制內容到剪貼板
  1. <html>    
  2. <canvas id="a_canvas" width="1000" height="700"></canvas>    
  3. <script>    
  4.     (function (){    
  5.      
  6.         window.addEventListener("load", function(){    
  7.      
  8.           var data = [1000,1300,2000,3000,2000,2000,1000,1500,2000,5000,1000,1000];    
  9.           var xinforma = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];    
  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.           var realheight = a_canvas.height-15;    
  29.           var realwidth = a_canvas.width-40;    
  30.           // 描繪邊框    
  31.           var grid_cols = data.length + 1;    
  32.           var grid_rows = 4;    
  33.           var cell_height = realheight / grid_rows;    
  34.           var cell_width = realwidth / grid_cols;    
  35.           context.lineWidth = 1;    
  36.           context.strokeStyle = "#a0a0a0";    
  37.      
  38.           // 結束邊框描繪    
  39.           context.beginPath();    
  40.           // 准備畫橫線    
  41.           /*for(var row = 1; row <= grid_rows; row++){    
  42.             var y = row * cell_height;    
  43.             context.moveTo(0,y);    
  44.             context.lineTo(a_canvas.width, y);    
  45.           }*/    
  46.               
  47.             //劃橫線    
  48.             context.moveTo(0,realheight);    
  49.             context.lineTo(realwidth,realheight);    
  50.                     
  51.                  
  52.             //畫豎線    
  53.           context.moveTo(0,20);    
  54.            context.lineTo(0,realheight);    
  55.           context.lineWidth = 1;    
  56.           context.strokeStyle = "black";    
  57.           context.stroke();    
  58.                   
  59.      
  60.           var max_v =0;    
  61.               
  62.           for(var i = 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.           var points = [];    
  68.           for( var i=0; i < data.length; i++){    
  69.             var v= data[i];    
  70.             var px = cell_width *　(i +1);    
  71.             var py = realheight - realheight*(v / max_v);    
  72.             //alert(py);    
  73.             points.push({"x":px,"y":py});    
  74.           }    
  75.      
  76.           //繪制坐標圖形    
  77.           for(var i in points){    
  78.             var p = points[i];    
  79.             context.beginPath();    
  80.             context.fillStyle="green";    
  81.             context.fillRect(p.x,p.y,15,realheight-p.y);    
  82.                  
  83.             context.fill();    
  84.           }    
  85.           //添加文字    
  86.           for(var i in points)    
  87.           {  var p = 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.       })();    
  97.            
  98. </script>    
  99. </html>  

html5生成柱狀圖（條形圖）詳細代碼

運行結果：

以上這篇html5生成柱狀圖(條形圖)效果的實例代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。

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

HTML5教程
那些過目不忘的H5頁面
 　　從引爆朋友圈的H5小游戲《圍住神經貓》，到顛覆傳統廣告的大眾點評H5專題頁《我們之間
HTML5移動應用開發第3章：移動Web離線應用
先決條件在本文中，您將使用最新 Web 技術開發 Web 應用程序。這裡的大多數代碼只是 HTML、
HTML5 audio標簽使用js進行播放控制實例
HTML5 audio標簽使用js進行播放控制實例 <audio>標簽可以在H

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
HTML5制作表格樣式 基於html5繪制圓形多角圖案 使用HTML5裡的classList操作CSS類 HTML5學習總結 html5新增的標簽和使用的方法 後HTML5時代項目該如何玩出新意？ HTML 5可以做五件事情 超出你的想象 HTML5移動端開發中的Viewport標簽及相關CSS用法解析 使用分層畫布來優化HTML5渲染的教程 html5使用canvas畫空心圓與實心圓
熱門推薦
HTML5微信播放全屏問題的解決方法 HTML5 對各個標簽的定義與規定：section html5使用canvas繪制一張圖片 小游戲之見縫插針HTML5版 H5案例:品牌們的秘密花園，你去過嗎？ 實例講解使用SVG制作loading加載動畫的方法 使用phonegap獲取設備的一些信息方法 2015年高大上雙屏互動，你都玩過了嗎？ 用canvas畫簡單的“我的世界”人物頭像
大家都在看
基於jquery的復制網頁內容到WORD的實現代碼 關於js遍歷表格的實例 原生Aajax 和jQuery Ajax 寫法個人總結 JQuery的ajax獲取數據後的處理總結(html,xml,json) DOM節點深度克隆函數cloneNode()用法實例 網頁設計中網頁顏色與網頁文字的搭配 Ajax加載外部頁面彈出層效果實現方法 jquery 2009新浪網易的評論塊制作
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved