如何在html中自动生成条形图 html5生成柱状图(条形图)效果的实例代码

XML/HTML Code复制内容到剪贴板

(function(){

window.addEventListener("load",function(){

vardata=[1000,1300,2000,3000,2000,2000,1000,1500,2000,5000,1000,1000];

varxinforma=[‘1月’,’2月’,’3月’,’4月’,’5月’,’6月’,’7月’,’8月’,’9月’,’10月’,’11月’,’12月’];

//获取上下文

vara_canvas=document.getElementById(‘a_canvas’);

varcontext=a_canvas.getContext("2d");

//绘制背景

vargradient=context.createLinearGradient(0,0,0,300);

//gradient.addColorStop(0,"#e0e0e0");

//gradient.addColorStop(1,"#ffffff");

context.fillStyle=gradient;

context.fillRect(0,0,a_canvas.width,a_canvas.height);

varrealheight=a_canvas.height-15;

varrealwidth=a_canvas.width-40;

//描绘边框

vargrid_cols=data.length+1;

vargrid_rows=4;