<!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搭建vue全过程

    如何在Window下安装node\cnpm,并安装vue.js,创建项目 参考链接:https://blog.csdn.net/Corey_mengxiaodong/article/details/8 ...

  2. [C] Re-execute itself from elf file.

    Re-execute itself from elf file. #define _GNU_SOURCE #include <sched.h> #include <stdio.h&g ...

  3. javascript中slice(),splice(),split(),substring(),substr()使用方法

    因为本人在使用这些方法时常有混淆,特总结如下: 1.slice(): Array和String对象都有 在Array中  slice(i,[j]) i为开始截取的索引值,负数代表从末尾算起的索引值,- ...

  4. 行人重识别(ReID) ——数据集描述 Market-1501

    数据集简介 Market-1501 数据集在清华大学校园中采集,夏天拍摄,在 2015 年构建并公开.它包括由6个摄像头(其中5个高清摄像头和1个低清摄像头)拍摄到的 1501 个行人.32668 个 ...

  5. 如何在SVN服务器上创建项目

    1,首先你的电脑上安装了SVN的服务器 VisualSVN-Server-3.7.1-x64.msi 2,打开SVN服务器后,可以看到分布的目录是 Repositories.Users.Groups. ...

  6. thread.join() 阻塞原理分析

    参考: https://blog.csdn.net/u010983881/article/details/80257703

  7. bzoj1875 [SDOI2009]HH去散步 矩阵快速幂

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=1875 题解 如果没有这个"不能立刻沿着刚刚走来的路走回",那么这个题就是一 ...

  8. git log的个性化设置

    --date=(relative|local|default|iso|rfc|short|raw) Only takes effect for dates shown in human-readabl ...

  9. pandas学习（一）

    pandas.DataFrame.sort_index 用法 sort_index(axis=0, level=None, ascending=True, inplace=False, kind='q ...

  10. CGfsb

    这里补充一下%n是代表向参数赋值打印的字符个数 例如printf("AAAA%n",&a); 代表的是向a写入4 printf("AAAA%1n", & ...