<!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. Dockerfile与Docker构建流程解读

    摘要 本文主要讨论了对docker build的源码流程进行了梳理和解读,并分享了在制作Dockerfile过程中的一些实践经验,包括如何调试.优化和build中的一些要点.另外,还针对现有Docke ...

  2. Android 关于ListView中按钮监听的优化问题（方法二）

    关于ListView中按钮监听的优化问题(方法一)地址: http://www.cnblogs.com/steffen/p/3951901.html 之前的方法一,虽然能够解决position的传递, ...

  3. C#微信公众号开发--网页授权(oauth2.0)获取用户基本信息二

    前言 这一篇实现snsapi_userinfo,写这篇时其实我是有疑惑的,因为我并没有调试成功,但是我反复检查程序和思路是没有问题的,因为我使用的测试公众号,群里一个伙计说他之前调试时用的也是测试公众 ...

  4. Java 集合：HashSet 与 ArrayList

    Set 集合是无序不可以重复的的.List 集合是有序可以重复的. Java 集合:HashSet 与 hashCode.equals 博客里面已经说到这个问题,但是解释的还是不够清楚. 看一个小例子 ...

  5. Jquery中toggle的用法详情

    jquery ----toggle([speed],[easing],[fn]) 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的click事件 如果元素是可见的,切换为隐藏的:如果元素是隐藏 ...

  6. DoTween基本使用

    using UnityEngine; using System.Collections; using DG.Tweening; using UnityEngine.UI; public class D ...

  7. Time.timeScale、游戏暂停

    原文链接 项目里面一直在用Time.timeScale来做游戏的 1倍 2倍整体加速,今天我仔细看了一下Time.timeScale才发现之前我理解错了一些东西. Time.timeScale可以控制 ...

  8. CentOS 6.5 安装MySQL5.7 RPM

    一.新特性 MySQL 5.7可谓是一个令人激动的里程碑,在默认了InnoDB引擎的基础上,新增了ssl.json.虚拟列等新特性.相对于postgreSQL和MariaDB而言,MySQL5.7做了 ...

  9. javaee 规范技术

    J2EE的13种核心技术 一.JDBC(Java Database Connectivity) JDBC API为访问不同的数据库提供了一种统一的途径,象ODBC一样,JDBC对开发者屏蔽了一些细节问 ...

  10. SQL语句获取数据库中的表主键，自增列，所有列

    SQL语句获取数据库中的表主键,自增列,所有列   获取表主键 1:SELECT TABLE_NAME,COLUMN_NAME FROM INFORMATION_SCHEMA.KEY_COLUMN_U ...