canvas-矩形图表

canvas-矩形图表

<canvas id="c3" width="800" height="600"></canvas>
   <script>
      var c3=document.getElementById("c3");
      var ctx=c3.getContext("2d");
      var rows=[{name:"东口",val:2800},
                {name:"西口",val:2700},
                {name:"南口",val:3100},
                {name:"地铁口",val:3500}
              ];
              
      //1.创建循环遍历数组中每个元素
      for(var i=0;i<rows.length;i++){
        // 2.创建变量x,y w h
        // 3.并且分别计算
        var w=50;
        var h=rows[i].val/10;
        var x=i*100+50;
        var y=600-h;    
        // console.log(rows[i].val)
        // 3.1指定实心样式
        ctx.fillStyle=rc();
        // 3.2指定矩形透明度
        ctx.globalAlpha=0.6;

        function rc(){
          var r=Math.floor(Math.random()*255);
          var g=Math.floor(Math.random()*255);
          var b=Math.floor(Math.random()*255);
          ctx.fillStyle=`rgb(${r},${g},${b})`;
        } 
        // 4.创建实心对应矩形 
        ctx.fillRect(x,y,w,h);  
        // 5.绘制分公司名称
        // 6.设置文本颜色，黑色、
        ctx.fillStyle="#000";
        // 7.文本大小
        ctx.font="25px SimHei";
        // 8.分公司名称
        var n=rows[i].name;
        ctx.fillText(n,x,600-5);
        // 9，绘制销售额
        var v=rows[i].val;
        ctx.fillText(v,x,600-30-h);
      }
   </script>