<!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. java ArrayList的序列化分析

    一.绪论 所谓的JAVA序列化与反序列化,序列化就是将JAVA 对象以一种的形式保持,比如存放到硬盘,或是用于传输.反序列化是序列化的一个逆过程. JAVA规定被序列化的对象必须实现java.io.S ...

  2. 维吉尼亚密码java代码实现根据密钥长度计算IC值过程

    package cn.longxuzi; import java.util.Scanner; import org.junit.Test; public class ICUtils { /** * @ ...

  3. 【终极】Dynamic Web Module 3.0 requires Java 1.6 or newer

    今天在用maven+ssm做项目的时候,右键项目properities设置project facet,勾选dynamic WEB module时一直勾不上,网上找了很多教程都不行, 有说在pom.xm ...

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

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

  5. Tomcat启动极慢问题

    启动后,catalina.out日志中会有如下打印: INFO: Creation of SecureRandom instance ,] milliseconds 具体原因,有兴趣的可以自己百度一下 ...

  6. kmp//呵呵！看毛片算法

    以前刚学的时候迷迷糊糊的,一看就懵圈,前几天捡起来的时候 发现还不会 于是研究了两天,自尊心严重受挫,今天的时候  突然一道灵光迸发,居然 感觉好像懂了,于是又琢磨起来  终于  我懂了  呵呵!   ...

  7. jQ内容的强大，后面继续跟进...

    <script type="text/javascript" src="jQ/jquery.js"></script> <scri ...

  8. 动作Action

    /** * DelayTime延迟 * @param d Duration 延迟时间 */ auto delayTime = DelayTime::create(); sprite->runAc ...

  9. size_t

    size_t在C语言中就有了.它是一种"整型"类型,里面保存的是一个整数,就像int, long那样.这种整数用来记录一个大小(size).size_t的全称应该是size typ ...

  10. NGINX----源码阅读----（option配置脚本）

    /auto/options options文件主要负责nginx启动前配置脚本对环境变量初始化. 1.默认为环境变量赋值 help=no NGX_PREFIX= NGX_SBIN_PATH= NGX_ ...