<!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. Java学习day10-面向对象特征之一：封装和隐藏

    一.包package和引用import 1.关键字package package语句作为Java源文件的第一条语句,指明该文件中定义的类所在的包(若缺省该语句,则指定为无名包).包的存在是为了区别同名 ...

  2. hasattr() getattr() setattr() 函数使用详解？？

    hasattr(object, name)函数: 判断一个对象里面是否有name属性或者name方法,返回bool值,有name属性(方法)返回True,否则返回False. **注意:name要使用 ...

  3. 实现类似add(1)(2)(3)结果为6的效果

    前两天看到一个问题说怎样实现add方法实现add(1)(2)(3)结果为6,于是开始引发了我的思考. 1.想要实现add()()这样调用方式,add()方法的返回值务必是一个函数 function a ...

  4. C# DataTable 去重复数据方法

    //获取dt中Id,Value 2个字段不重复的数据 newDt = dt.DefaultView.ToTable(true, "Id","Value" );

  5. 原生JS代码实现随机产生一个16进制的颜色值

    封装一个函数 function getColor() { var str = "#"; //一个十六进制的值的数组 var arr = ["0", " ...

  6. SwiftUI 里的 swift 闭包总结

    创建 UI 时的闭包使用 在 SwiftUI 里闭包出现的频率特别高,这里我重新梳理了下闭包的定义. 关于闭包 闭包表达式语法的一般形式如下: {(parameters) -> return t ...

  7. 发布程序包到Nuget

    今天想着别人都把自己做的程序包发布到nuget上去开放给别人使用,那么我是否也能这么干呢,于是就研究了一番,发现还真可以,而且非常简单,接下来就介绍下发布自己的程序包到nuget上的方法. 一.创建公 ...

  8. Codeforces Round #425 (Div. 2) - A

    题目链接:http://codeforces.com/contest/832/problem/A 题意:有n个棍子,两个人轮流取这些棍子,每个人每次只能去恰好k个棍子(不足k个则不能取),问先手取的棍 ...

  9. 用python 写一个nagios插件 监控http内容(转载)

     nagios自带的http-check插件主要是检测地址url是否可以访问,在web+中间件的架构中容易出现url能访问,但是后台中间件拓机的情况,因为最近在自学python,所以写了个脚本检测ur ...

  10. 高精乘（fft板子

    哇..fft的原理真的是不太好懂,看了好久许多细节还是不太清楚,但感觉本质就是用了单位根的性质. https://www.luogu.org/problem/P1919 #include<cst ...