XML/HTML Code復制內容到剪貼板

(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_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;

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。