canvas绘制随机颜色的柱形图

时间：2020-11-26 06:50:43
<!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哦

相关文章