如何用画布画一个柱状图

来源：互联网发布：网络推广培训计划编辑：程序博客网时间：2024/05/16 11:40

如何用画布画一个柱状图

废话不多说，先看一下效果

结构部分

<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)            }        }

0 0