<!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. Android系统移植(一)-让android系统在目标平台上运行起来

    编号),文件系统采用ubifs格式,控制台设备为ttyS1,波特率为115200 启动的第一个应用程序是/init (6)确保控制台的设置和硬件保持一致,如:硬件上串口用的是UART1,则内核启动参数 ...

  2. swift 动态获取label宽度或高度

    func getLabHeigh(labelStr:String,font:UIFont,width:CGFloat) -> CGFloat { let statusLabelText: NSS ...

  3. 自定义JSP中的Taglib标签之四自定义标签中的Function函数

    转自http://www.cnblogs.com/edwardlauxh/archive/2010/05/19/1918589.html 之前例子已经写好了,由于时间关系一直没有发布,这次带来的是关于 ...

  4. jvm工具

    jvm工具 知识,经验是基础,数据是依据,工具是运营知识处理数据的手段 数据:运行日志.异常堆栈.GC日志.线程快照.堆转存储快照 JPS:虚拟机进程状况工具 jvm process status t ...

  5. jquery ajax请求成功，数据返回成功，seccess不执行的问题

    1.状态码返回200--表明服务器正常响应了客户端的请求:       2.通过firebug和IE的httpWatcher可以看出服务器端返回了正常的数据,并且是符合业务逻辑的数据.         ...

  6. 【汇编语言】DEBUG的使用

    在masm for windows中,需要先生存exe文件,然后再点调试按钮. 常用的命令有: R命令:查看.改变CPU寄存器的内容:如果要修改某个寄存器的内容,可以在r的后面接上空格和寄存器名.如: ...

  7. 解决安装失败的 Internet Explorer 11

    注意:这篇文章是由无人工介入的微软自动的机器翻译软件翻译完成.微软很高兴能同时提供给您由人工翻译的和由机器翻译的文章, 以使您能使用您的语言访问所有的知识库文章.然而由机器翻译的文章并不总是完美的.它 ...

  8. 微信JSAPI支付 跟 所遇到的那些坑

    首先介绍一下我在调用微信支付接口使用的是 weixin.senparc SDK,非常方便好用开源的一个微信开发SDK. weixin.senparc SDK 官网:http://weixin.senp ...

  9. ADO.NET初学习

    ①System.Data  → DataTable,DataSet,DataRow,DataColumn,DataRelation,Constraint,DataColumnMapping,DataT ...

  10. [CSS] 子元素垂直居中的两种方式

    1. 多个子元素水平并排,IE10以下失效 display: flex; align-items: center; justify-content: center; 2.多个子元素竖直排列,这种方式会 ...