<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 900px;
height: 500px;
padding: 50px;
margin: 50px auto;
border: 1px solid #FF0000;
}
.box:hover{
color: #0000FF;
}
</style>
</head>
<body>
<div class="box">
<canvas id="canvas" width="900" height="500"></canvas>
</div>
<script>
var data={
width:900,
height:500,
maxValue:300,
month:["1月","2月","3月","4月","5月","6月"],
sales:[100,200,150,147,295,260],
rectColor:["#099b17","#d8957e","#878d42","#5d8ab0","#974d4d","#0c7d26"],
};
var salesHeight=0,
salesWidth=0;
var stepYarr=[],
stepXarr=[];
var stepWidth=900/10;
var sales=data.sales;
var month=data.month;
var strl="销售额";
//获取canvas信息
var canvas=document.querySelector('#canvas');
var cxt=canvas.getContext("2d");
cxt.translate(50,10)
//创建Y轴
drawYaxis();
function drawYaxis(){
cxt.beginPath();
cxt.moveTo(0,0);
cxt.lineTo(0,450);
cxt.stroke();
cxt.closePath();
//小箭头
cxt.save();
cxt.beginPath();
cxt.moveTo(-5,0);
cxt.lineTo(0,-10);
cxt.lineTo(5,0);
cxt.closePath();
cxt.stroke();
cxt.fill();
cxt.restore();
//顶部字体;
cxt.fillText(strl,-35,-15);
//数字
salesHeight=(550-3*(550/10))/sales.length;
for(var i=0;i<sales.length;i++){
cxt.font='normal normal bold 14px';
cxt.fillText(sales[i],-30,420-(420/10)-salesHeight*i+6);
stepYarr.push(500-(450/10)-salesHeight*i)
}
}
//创建X轴
drawXAxis();
function drawXAxis(){
cxt.beginPath();
cxt.moveTo(0,452);
cxt.lineTo(800,452);
cxt.stroke();
cxt.closePath();
//小箭头
cxt.save();
cxt.beginPath();
cxt.moveTo(800,442);
cxt.lineTo(820,450);
cxt.lineTo(800,460);
cxt.closePath();
cxt.stroke();
cxt.fill();
cxt.restore();
//月份
salesWidth=(900-2*(900/10))/month.length;
for(var i=0;i<month.length;i++){
cxt.font='normal bold 14px';
cxt.fillText(month[i],(450/10)+(i+0.5)*salesWidth-month[i].length*14/2,500-(500/10)+24);
stepXarr.push(900/10+(i+1)*salesWidth);
}
}
//创建柱子
drawArrow();
function drawArrow(){
var columnw=(900/8)/2;
var colh=(500-3*(500/10))/300;
for(var i=0;i<month.length;i++){
cxt.beginPath();
cxt.fillStyle=data.rectColor[i];
// cxt.fillRect(stepXarr[i]-stepw/2-columnw/2,500-(500/10)-sales[i]*colh,columnw,sales[i]*colh);
cxt.fillRect((300/10)+(i+0.5)*salesWidth-month[i].length*14/2,500-(500/10)-sales[i]*colh,columnw,sales[i]*colh);
cxt.fill();
cxt.closePath()
}
}
</script>
</body>
</html>