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

2020-04-21 07:55:12易采站长站整理

XML/HTML Code复制内容到剪贴板

<html>    
<canvas id="a_canvas" width="1000" height="700"></canvas>    
<script>    
    (function (){    
     
        window.addEventListener("load", function(){    
     
          var data = [1000,1300,2000,3000,2000,2000,1000,1500,2000,5000,1000,1000];    
          var xinforma = [‘1月’,’2月’,’3月’,’4月’,’5月’,’6月’,’7月’,’8月’,’9月’,’10月’,’11月’,’12月’];    
     
          // 获取上下文    
          var a_canvas = document.getElementById(‘a_canvas’);    
          var context = a_canvas.getContext("2d");    
     
     
          // 绘制背景    
          var gradient = context.createLinearGradient(0,0,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;    
          // 描绘边框    
          var grid_cols = data.length + 1;    
          var grid_rows = 4;