<!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哦

canvas绘制随机颜色的柱形图的更多相关文章

  1. canvas绘制随机验证码

    效果图: 思路: 1, 绘制canvas画布,进行基础设置 2.绘制一个矩形 3.设置验证码的随机数 4.设置验证码随机数的随机颜色 5.绘制随机干扰线 6,绘制随机干扰点 经过以上六个步骤,验证码的 ...

  2. canvas绘制圆心扇形可组成颜色随机的七色小花

    啊~现在应该还是春天吧.心情一如既往的烦闷呐.最近做了一个canvas的扇形绘制的东西.把它整理出来变成一个适合春天的花朵绘制~沉闷的工作环境已经让我这种有趣的人也变成了无聊鬼怪呢.下次一定想找一个年 ...

  3. 【重点突破】——Canvas技术绘制随机改变的验证码

    一.引言 本文主要是我在学习Canvas技术绘图时的一个小练习,绘制随机改变的验证码图片,虽然真正的项目里不这么做,但这个练习是一个掌握Canvas技术很好的综合练习.(真正的项目中验证码图片使用服务 ...

  4. SVG绘制随机的柱形图+php

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. canvas绘制一定数目的圆(均分)

    绘制多圆 2016年5月24日12:12:26 绘制一定数目(num)颜色随机的小圆,围成一个大圆.根据num完全自动生成,且小圆自动均分大圆路径(num≥20). 效果: 前置技能:(1).Canv ...

  6. canvas绘制太阳系

    原文地址:http://jeffzhong.space/2017/10/26/solar/ 学习canvas有一段时间了,顺便写个小项目练手,该项目用到的知识点包括: ES6面向对象 基本的三角函数 ...

  7. java-js知识库之二——canvas绘制炫彩气泡

    现在使用canvas绘制气泡,虽说很多人都已经实现过了,可能方法都大同小异,但自己写和看别人写完全是两码事,自己会写的才是自己的,话不多说,直接上代码. 先来一张效果图: 现在上代码,代码有详细的注释 ...

  8. Kivy 中文教程 实例入门 简易画板 (Simple Paint App)：3. 随机颜色及清除按钮

    1. 随机颜色 通过前面的教程,咪博士已经带大家实现了画板的绘图功能.但是,现在画板只能画出黄色的图案,还十分单调,接下来咪博士就教大家,如何使用随机颜色,让画板变得五彩斑斓. 改进后的代码如下: f ...

  9. 用canvas绘制验证码

    在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破. 验证码一般用PHP和java等后端语言编写: 但是在前端,用canva或者SV ...

随机推荐

  1. 域名 端口 DNs 网络

    netstat -an   查看所有 所有监听端口的使用情况

  2. spring-data-redis的使用/redis缓存

    1.导入依赖 <properties> <junit.version>4.12</junit.version> <spring.version>4.2. ...

  3. PHP实现简单的万年历

    <?php /*********************** *** 功能:万年历 *** *** 时间:2015/05/23 *** ***********************/ //1. ...

  4. Asp.net中GridView使用详解(很全，很经典)

    http://blog.csdn.net/hello_world_wusu/article/details/4052844 Asp.net中GridView使用详解 效果图参考:http://hi.b ...

  5. CentOS7搭建Docker镜像实战

    开发十年,就只剩下这套架构体系了! >>>   一.搭建环境 使用的是VMWare 12虚拟机安装的CentOS7 安装成功后修改ip: 1. ip addr查看相关信息: 2. 修 ...

  6. linux查看 inotify 提供的工具

    [root@rsync-client-inotify ~]# ll /usr/local/bin/inotify* -rwxr-xr-x. 1 root root 38582 Jun 3 22:23 ...

  7. Rsync+inotify 数据同步应用指南

    Rsync+Inotify-tools (1):Inotify-tools 只能记录下被监听的目录发生了变化(包括增加.删除.修改),并没有 把具体是哪个文件或者哪个目录发生了变化记录下来: (2): ...

  8. NTP时间服务器构建

    搭建一个NTP服务器,为整个网络环境中的所有主机提供时间校准服务,具体如下: - 部署一台NTP时间服务器 - 设置时间服务器上层与0.centos.pool.ntp.org同步 - 设置本地服务器层 ...

  9. Ubuntu NFS搭建过程

    先简单介绍一下NFS服务器是什么? NFS server可以看作是一个FILE SERVER,它可以让你的PC通过网络将远端的NFS SERVER共享出来的档案MOUNT到自己的系统中,在CLIENT ...

  10. RMQ Message ACK

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11808680.html 消息持久化机制 消息丢失了,需要将队列持久化,即将autoDelete设置成f ...