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

一团网资讯

一团资讯 > html5 > html5生成柱状图(条形图)效果的实例代码

html5生成柱状图(条形图)效果的实例代码

2018-04-07 11:03:10     发布者：来源网络

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.fillRec