XML/HTML Code復(fù)制內(nèi)容到剪貼板

(function?(){

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

var?data?=?[1000,1300,2000,3000,2000,2000,1000,1500,2000,5000,1000,1000];

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

//?獲取上下文

var?a_canvas?=?document.getElementById(‘a(chǎn)_canvas’);

var?context?=?a_canvas.getContext("2d");

//?繪制背景

var?gradient?=?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);

var?realheight?=?a_canvas.height-15;

var?realwidth?=?a_canvas.width-40;

//?描繪邊框

var?grid_cols?=?data.length?+?1;

var?grid_rows?=?4;

總結(jié)

以上是生活随笔為你收集整理的如何在html中自动生成条形图,html5生成柱状图(条形图)效果的实例代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。