<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #main{
            margin-top:100px;
            text-align: center;
        }
        #c1{
            background: pink;
        }
    </style>
</head>
<body>
<div id="main">
    <canvas ID="c1" width="600" height="600"></canvas>

</div>
<script src="jquery-1.11.3.js"></script>
<script>
var ctx=c1.getContext("2d");

var arr=[0,0,0,0,0,0];
    $.ajax(
            {
                type:'get',
                url:"1.php",
                success:function(result){
                    console.log(typeof  result);
                  result= JSON.parse(result);
                    console.log(result);
                    ctx.font="20px  SimHei";

                           var timer=setInterval( function(){
                               paint(result,0);
                               paint(result,1);
                               paint(result,2);
                               paint(result,3);
                               paint(result,4);
                               paint(result,5);

                           },41);

                },
                error:function(){
                    console.log("失败");
                }
            }
    );

function paint(result,i){

    var g=ctx.createLinearGradient(0,0,600,600);
    g.addColorStop(0,"#f00");
    g.addColorStop(0.5,"#ff0");
    g.addColorStop(1,"#83ED4D");
    ctx.fillStyle=g;
    arr[i]+=10;因为要在一个定时器同时画6个柱状图，每次定时器还要保存上一次的数据因此用一个数组来存放6各数据
    if(arr[i]>result[i].value)
    {
        arr[i]=result[i].value;
    }
    ctx.fillRect(60*(i+1),570-arr[i],20,arr[i]);

    ctx.fillStyle='#000';
    var xtext=60*(i+1)-ctx.measureText(result[i].label).width/2+8;
    ctx.fillText(result[i].label,xtext,590);
}
</script>
</body>
</html>

1.php


<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2016/12/10
 * Time: 9:22
 */
header("Content-Type:application/json");

$arr='[
   {"label": "部门1", "value":300},
   {"label": "部门2", "value":500},
   {"label": "部门3", "value":150},
   {"label": "部门4", "value":400},
   {"label": "部门5", "value":550},
   {"label": "部门6", "value":250}
]';
echo json_encode($arr);

今天写动态canvas柱状图小结的更多相关文章

  1. 如何用asp.net MVC框架、highChart库从sql server数据库获取数据动态生成柱状图

    如何用asp.net MVC框架.highChart库从sql server数据库获取数据动态生成柱状图?效果大概是这样的,如图: 请问大侠这个这么实现呢?

  2. <数据结构系列1>封装自己的数组——手写动态泛型数组(简化版ArrayList)

    哈哈,距离上一次写博客已经快过去半个月了,这这这,好像有点慢啊,话不多说,开始我们的手写动态泛型数组 首先是我们自己写一个自己的动态数组类,代码如下所示: public class Array< ...

  3. echarts系列之动态修改柱状图颜色

    echarts根据某一变量动态修改柱状图颜色 1.option中参数配置项series { "name":"Android", "type" ...

  4. echart.gl.js实现动态3D柱状图

    echart.gl.js实现动态3D柱状图 一.总结 一句话总结:演示页面的源代码里面一定有所需的所有的js. 二.[js实践篇]——echart.gl.js实现动态3D柱状图 前言 本公司的项目需求 ...

  5. 基于iCamera测试mt9m034 1280X960 高动态相机模块小结

    基于iCamera测试mt9m034 高动态相机模块小结 首先看看此模块的特性 mt9m034 高动态 CMOS模块 1280*960像素 5.48 V/lux-sec >115db 摄像头模块 ...

  6. 5Spring动态代理开发小结

    5Spring动态代理开发小结 1.为什么要有动态代理? 好处 1.利于程序维护 2.利于原始类功能的增强 3.得益于JDK或者CGlib等动态代理技术使得程序扩展性很强 为什么说使得程序扩展性很强? ...

  7. canvas制作柱形图/折线图/饼状图，Konva写动态饼状图

    制作饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. Android 热补丁动态修复框架小结

    一.概述 最新github上开源了很多热补丁动态修复框架,大致有: https://github.com/dodola/HotFix https://github.com/jasonross/Nuwa ...

  9. d3.js多个x轴y轴canvas柱状图

    最终效果图镇楼: 本文通过三个步骤来介绍d3.js. 1.简单的柱状图: 2.多个x轴的柱状图: 3.多个x轴.y轴的柱状图: 学习心得: d3.js入门相对比较困难,一旦掌握了核心思想,不断熟悉AP ...

随机推荐

  1. Jquery控制点击时一、二级菜单自由隐藏与出现

    一.基本HTML和CSS HTML中产生一.二级导航的代码: {loop $nav $key $value} <div class=”u_con”> <span class=” xg ...

  2. Ubuntu下JDK+Tomcat+MySql环境的搭建

    主机在阿里云上,所以网络的配置都省了,只剩下软件的安装和配置 1.安装mysql 1.1 apt-get install mysql-server-5.5 安装过程中,有两次提示输入 mysql 的  ...

  3. 模拟Vue之数据驱动4

    一.前言 在"模拟Vue之数据驱动3"中,我们实现了为每个对象扩展一个$set方法,用于新增属性使用,这样就可以监听新增的属性了. 当然,数组也是对象,也可以通过$set方法实现新 ...

  4. 结构-行为-样式-JqueryUI拖放使用实例（全）

    最近工作中有个需要是动态配置页面,想到之前公司有做过类似的,用的是JqueryUi,所以就看了下它的Api.下面就是我做的小Demo,想用的同学可以参考: Html: <div class=&q ...

  5. Node.js（初识）

    之前有了解过一点Node.js,只是一直停留在文字描述,没有真正使用过Node.js,如今因为工作的原因,开始真正接触到Node.js,也开始深入学习. Node.js具体是用来做什么的,我想一开始接 ...

  6. Jquery Form表单取值

    之前js取form表单的值都是一个一个的取,数量一多之后容易出错而且烦透了.感谢那些愿意分享的人. 页面定义form,并给form指定id值,里面的元素只要是需要键值对应的都赋予name属性,并且na ...

  7. CodeForces 747E Comments

    栈,模拟. 手动写一个栈模拟一下过程即可. #include<cstdio> #include<cstring> #include<string> #include ...

  8. USACO 4.1 Fence Loops（Floyd求最小环）

    Fence Loops The fences that surround Farmer Brown's collection of pastures have gotten out of contro ...

  9. UIView类绘图出现错误提示

    一:问题: Jan 16 15:49:53  CUBOT Band Ⅲ[2082] <Error>: CGContextSetLineWidth: invalid context 0x0. ...

  10. centos tomcat 安装

    安装说明 安装环境:CentOS-6.3 安装方式:源码安装  软件:apache-tomcat-7.0.29.tar.gz 下载地址:http://tomcat.apache.org/downloa ...