今天写动态canvas柱状图小结
Posted hduhdc
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了今天写动态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柱状图小结的主要内容，如果未能解决你的问题，请参考以下文章