<!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. npm模块管理器

    npm模块管理器 地址: http://javascript.ruanyifeng.com/nodejs/npm.html#

  2. 【洛谷p1158】导弹拦截

    这道题是个有想法的枚举qwq 导弹拦截[题目链接] 注意:此导弹拦截非彼导弹拦截p1020 导弹拦截 一道题是1999年的,然后我们现在要写的是经过11年韬光养晦之后的导弹拦截 SOLUTION: 要 ...

  3. [Codeforces 1191D] Tokitsukaze, CSL and Stone Game(博弈论)

    [Codeforces 1191D] Tokitsukaze, CSL and Stone Game(博弈论) 题面 有n堆石子,两个人轮流取石子,一次只能从某堆里取一颗.如果某个人取的时候已经没有石 ...

  4. HDU 5094 题解（状压BFS）

    题面: Maze 题目中文大意: 这个故事发生在“星际迷航”的背景下. “星际争霸”的副队长史波克落入克林贡的诡计中,被关押在他们的母亲星球Qo’noS上. 企业的上尉詹姆斯·T·柯克(James T ...

  5. linux机器间建立信任关系

    linux机器间建立信任关系 如何建立信任关系 在shell脚本中,需要使用scp命令将本地的文件复制到另一台机器中备份.但通常执行scp命令后都需要输入用户密码,这样在定时自动执行shell脚本中就 ...

  6. 基于双TMS320C6678+双XC6VSX315T的6U VPX高速数据处理平台

    基于双TMS320C6678+双XC6VSX315T的6U VPX高速数据处理平台   一.板卡概述 板卡由我公司自主研发,基于VPX架构,主体芯片为两片 TI DSP TMS320C6678,两片V ...

  7. 14DBCP连接池

    实际开发中“获得连接”或“释放资源”是非常消耗系统资源的两个过程,为了解决此类性能问题,通常情况我们采用连接池技术,来共享连接Connection.这样我们就不需要每次都创建连接.释放连接了,这些操作 ...

  8. 阿里云轻应用云服务器配置tomcat

    #etc/profile export CATALINA_HOME=/wocloud/tomcat_cluster/tomcat1/apache-tomcat-7.0.57 #查看防火墙状态 fire ...

  9. alert(1) to win 2

    function escape(s) { s = s.replace(/"/g, '\\"'); return '<script>console.log("' ...

  10. 【串线篇】spring boot自动配置精髓

    一.SpringBoot启动会加载大量的自动配置类即绿色部分 二.我们看我们需要的功能有没有SpringBoot默认写好的自动配置类: 比如HttpEncodingAutoConfiguration ...