<!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. web打印小结

    项目中有个需求是将winform客户端的打印,移到网页上由客户自行打印,打印要求是根据一定的格式实现套打. 当时的解决方案是使用PDF打印: 1. 准备好套打格式的底图: 2.打开底图,将动态内容画到 ...

  2. HDU--1006

    题目介绍 Problem Description The three hands of the clock are rotating every second and meeting each oth ...

  3. JavaScript中SetInterval与setTimeout的用法详解

    setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeou ...

  4. 009-程序集路径Web窗体

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs& ...

  5. Mybatis第二天（其他）

    Mybatis第二天 框架课程 课程计划 动态sql If标签 Where标签 Sql片段 Foreach标签 关联查询 一对一关联 一对多关联 Mybatis整合spring 如何整合spring ...

  6. ubuntu 16.04安装mips交叉编译

    1. 在 /etc/apt/sources.list 文件末尾添加下面的更新源: deb http://ftp.de.debian.org/debian squeeze main deb http:/ ...

  7. Ubuntu 14.04—无法修正错误，因为您要求某些软件包保持现状，就是它们破坏了软件包间的依赖关系 解决办法

    在Ubuntu中使用sudo apt-get install安装是有时候会出现: 无法修正错误,因为您要求某些软件包保持现状,就是它们破坏了软件包间的依赖关系   解决办法 这样的错误,这是因为更新源 ...

  8. LED ：制作一个追逐序列（霹雳游侠）

    ; ,,}; ; void setup() { ; led<NbrLeds; led++){ pinMode(ledPins[led], OUTPUT); } } void loop() { ; ...

  9. 利用java实现抽奖转盘(着重安全控制)

    本文是针对jquery 实现抽奖转盘作者的一个补充(主要用java去实现转盘结果生成及存储,解决jquery 做法 非法用户采用模拟器实现改变转盘值的风险性),针对jQuery的具体实现,请看案例:h ...

  10. 编写CodeMirror Modes详解

    在写新的模式(mode)之前,还是先来概括一下CodeMirror的设计思路.CodeMirror分为三部分:核心,模式,扩展.核心库对外开放了很多接口,而这些接口就是实现新模式或者新扩展的基石. 在 ...