如何用画布画一个柱状图
如何用画布画一个柱状图
结构部分
<body>
<canvas id="canvas" width="500" height="400" style="border: 1px solid #333;"></canvas>
<input type="number" id="a" min="0" max="340" value=0 step="5" />
<input type="number" id="b" min="0" max="340" value=0 step="5" />
<input type="number" id="c" min="0" max="340" value=0 step="5" />
<input type="number" id="d" min="0" max="340" value=0 step="5" />
<input type="number" id="e" min="0" max="340" value=0 step="5" />
<input type="number" id="f" min="0" max="340" value=0 step="5" />
<input type="number" id="g" min="0" max="340" value=0 step="5" />
</body>script部分
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');var a=document.getElementById("a");
var b=document.getElementById("b");
var c=document.getElementById("c");
var d=document.getElementById("d");
var e=document.getElementById("e");
var f=document.getElementById("f");
var g=document.getElementById("g");
var inputa=document.getElementsByTagName('input')
var canvas_h = 400;
var canvas_w = 500;
var col_w = 30;//柱状列的宽度
var space = 30;//柱状体之间的宽度
for(var j=0; j<inputa.length ; j++){
inputa[j].addEventListener('change',function(){
loada()
},false)
}
loada();
function loada(){
ctx.fillStyle = 'white';
ctx.fillRect(0,0,500,400);
ctx.beginPath();
//画水平横线
ctx.moveTo(20,canvas_h-30);
ctx.lineTo(20,20);
ctx.closePath();
ctx.lineTo(canvas_w-20,canvas_h-30);
ctx.stroke();
ctx.closePath();
//画水平的箭头
ctx.moveTo(canvas_w-30,canvas_h-25);
ctx.lineTo(canvas_w-20,canvas_h-30);
ctx.lineTo(canvas_w-30,canvas_h-35);
ctx.stroke();
//画竖直箭头
ctx.moveTo(20,20);
ctx.lineTo(25,30);
ctx.closePath();
ctx.lineTo(15,30);
ctx.stroke();
ctx.closePath();
var x1=a.value,x2=b.value,x3=c.value,x4=d.value,x5=e.value,x6=f.value,x7=g.value;
var color=["#0075AA","#E3017F","#014886","#E70012","#087D25","#F5DB0C","#30004A"];
var data_arr = [x1,x2,x3,x4,x5,x6,x7];
var ax = 400-30;
var ay = 20;
for(var i=0; i<data_arr.length; i++){
ctx.fillStyle = color[i];
ctx.fillRect(ay+i*(col_w+space)+30,ax-data_arr[i],col_w,data_arr[i]);
ctx.fillText(data_arr[i],ay+i*(col_w+space)+30,ax-data_arr[i]-10)
}
}