今天写动态canvas柱状图小结
<!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柱状图小结的更多相关文章
- 如何用asp.net MVC框架、highChart库从sql server数据库获取数据动态生成柱状图
如何用asp.net MVC框架.highChart库从sql server数据库获取数据动态生成柱状图?效果大概是这样的,如图: 请问大侠这个这么实现呢?
- <数据结构系列1>封装自己的数组——手写动态泛型数组(简化版ArrayList)
哈哈,距离上一次写博客已经快过去半个月了,这这这,好像有点慢啊,话不多说,开始我们的手写动态泛型数组 首先是我们自己写一个自己的动态数组类,代码如下所示: public class Array< ...
- echarts系列之动态修改柱状图颜色
echarts根据某一变量动态修改柱状图颜色 1.option中参数配置项series { "name":"Android", "type" ...
- echart.gl.js实现动态3D柱状图
echart.gl.js实现动态3D柱状图 一.总结 一句话总结:演示页面的源代码里面一定有所需的所有的js. 二.[js实践篇]——echart.gl.js实现动态3D柱状图 前言 本公司的项目需求 ...
- 基于iCamera测试mt9m034 1280X960 高动态相机模块小结
基于iCamera测试mt9m034 高动态相机模块小结 首先看看此模块的特性 mt9m034 高动态 CMOS模块 1280*960像素 5.48 V/lux-sec >115db 摄像头模块 ...
- 5Spring动态代理开发小结
5Spring动态代理开发小结 1.为什么要有动态代理? 好处 1.利于程序维护 2.利于原始类功能的增强 3.得益于JDK或者CGlib等动态代理技术使得程序扩展性很强 为什么说使得程序扩展性很强? ...
- canvas制作柱形图/折线图/饼状图,Konva写动态饼状图
制作饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- Android 热补丁动态修复框架小结
一.概述 最新github上开源了很多热补丁动态修复框架,大致有: https://github.com/dodola/HotFix https://github.com/jasonross/Nuwa ...
- d3.js多个x轴y轴canvas柱状图
最终效果图镇楼: 本文通过三个步骤来介绍d3.js. 1.简单的柱状图: 2.多个x轴的柱状图: 3.多个x轴.y轴的柱状图: 学习心得: d3.js入门相对比较困难,一旦掌握了核心思想,不断熟悉AP ...
随机推荐
- Android开发(21)--有关Spinner控件的使用说明
下拉列表 Spinner,Spinner是一个每次只能选择所有项的一个项的控件.它的项来自于与之相关联的适配器中. Spinner的使用,可以极大提高用户的体验性.当需要用户选择的时候,可以提供一个下 ...
- X86 IO端口和MMIO
X86 IO端口和MMIO I/O作为CPU和外设交流的一个渠道,主要分为两种,一种是Port I/O,一种是MMIO(Memory mapping I/O).前者就是我们常说的I/O端口,它实际上的 ...
- jdk各版本新特性
只收纳常用的新特性 jdk1.4 1.引入断言 jdk5 1.引入泛型 2.引入枚举Enum 3.可以自动拆装箱 4.引入注解Annotation 5.引入新的迭代方式foreach 6.引入静态导入 ...
- git shell 常用命令
git branch 查看本地所有分支 git status 查看当前状态 git commit 提交 git branch -a 查看所有的分支 git branch -r 查看远程所有分支 git ...
- 利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖
摇一摇JS脚本逻辑:接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下: if (win ...
- 无线网卡连接internet,有线网卡向另一台电脑分享网络(笔记本当有线路由器)
有一台笔记本和一台台式机,都放在卧室内 笔记本能用无线网卡连接到客厅的路由器,台式机没有配备无线网卡,不能上网 要从客厅的路由器那边拉一条网线到卧室内连接台式机显然很蠢,在卧室内购置一台中继路由器也不 ...
- iOS 加载Image的两种方式
Apple官方文档对于加载image提供了两个方法 + (nullable UIImage *)imageNamed:(NSString *)name; + (nullable UIImage *)i ...
- 某种数列问题 (一场欢乐赛的T2)
个人觉得挺难的一道DP题 不会 没有思路 于是去找的正解 于是.. #include <iostream> #include <cstring> #define Max 100 ...
- java学习笔记:反射
1.什么是反射? Reflection(反射)是被视为动态语言的关键,反射机制允许程序做执行期间借助于ReflectionAPI取得任何类的内部信息,并能直接操作任意对象内部属性及方法 2.反射相关的 ...
- 转载:jsp九大内置对象和四大作用域
摘要: JSP的九大内置对象: page,application,session,request,response,out,exception,config,pageContext. JSP的四个作用 ...