canvas绘制随机颜色的柱形图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            text-align: center;
        }
        canvas{
            background: #ddd;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="800" height="700"></canvas>
<script src="jquery-3.2.1.js"></script>
<script>
//获取画笔工具
//创建变量保存画布宽度高度边界距离
//绘制统计图的轮廓
//发送ajax请求数据
//返回数据，动态绘制图形

    var elem = document.getElementById("canvas");
    var canvas = elem.getContext("2d");
        var w= 800,//画布宽度
                h = 700,//画布高度
                pd = 50 ;//统计图的内容到画布边界的距离
        canvas.strokeRect(pd,pd,w-2*pd,h-2*pd);
         $.ajax({
                type:"GET",    
                url:"saledata.php",
                success:function(data){
                    console.log("成功接收数据");
                    console.log(data);
                    //数据个数
                    //每个柱子/间距宽度
                    var count = data.length;
                    var barWidth = (w-2*pd)/(2*count+1);
                    for(var i = 0;i<count;i++){
                        var d = data[i];//第i月份的数量
                        //柱子的宽度
                        var bw = barWidth;
                        //柱子的高度
                        var bh = d.value;
                        //柱子的x
                        var bx = pd +(2*i+1)*barWidth;
                        //柱子的y
                        var by = h-pd-bh;
                        //绘制矩形
                        //canvas.strokeRect(bx,by,bw,bh);
                        canvas.fillStyle = rColor();
                        canvas.fillRect(bx,by,bw,bh); 
                    }
                },
                error:function(){
                    alert("网络出现故障，请检查!");
                }
         });
         function rColor(){
            var r = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var b = Math.floor(Math.random()*256);
            return `rgb(${r},${g},${b})`;
         }
</script>
</body>
</html>

<?php
    header("Content-Type:application/json;charset=utf-8");
    $rows = [];
    /*
    $rows=[
            ["月份"=>"一月","value"=>280],
            ["月份"=>"二月","value"=>270],
            ["月份"=>"三月","value"=>380],
            ["月份"=>"四月","value"=>280],
            ["月份"=>"五月","value"=>280],
            ["月份"=>"六月","value"=>210],
            ["月份"=>"七月","value"=>180],
            ["月份"=>"八月","value"=>280],
            ["月份"=>"九月","value"=>200],
            ["月份"=>"十月","value"=>280],
            ["月份"=>"十一月","value"=>300],
            ["月份"=>"十二月","value"=>300]
    ];
    */
    $rows[]=["月份"=>"1月","value"=>160];
    $rows[]=["月份"=>"2月","value"=>290];
    $rows[]=["月份"=>"3月","value"=>220];
    $rows[]=["月份"=>"4月","value"=>100];
    $rows[]=["月份"=>"5月","value"=>190];
    $rows[]=["月份"=>"6月","value"=>170];
    $rows[]=["月份"=>"7月","value"=>270];
    $rows[]=["月份"=>"8月","value"=>120];
    $rows[]=["月份"=>"9月","value"=>250];
    $rows[]=["月份"=>"10月","value"=>240];
    $rows[]=["月份"=>"11月","value"=>230];
    $rows[]=["月份"=>"12月","value"=>210];

    echo json_encode($rows);
?>

***********记得添加jquery-3.2.1.js哦