使用chart.js添加动态背景图

1.效果图：



2.HTML

<div class="background-image">
<canvas id="drawing">
</canvas>
</div>

2.Javascript
function drawBar(){
var drawing=document.getElementById("drawing");
var ctx=drawing.getContext("2d");
var data = {
labels: produceLabels(20),
datasets: [
{
label:"",
borderWidth: 1,
data:produceRandom(20),
}
]
};

var options={
scales:{
xAxes:[{
display:false
}],
yAxes:[{
display:false
}]
},
tooltips:{
enabled:false
},
legend:{
display:false
}
};
var parameters={
type:"bar",
data:data,
options:options
}

new Chart(ctx,parameters);
}

var num=0;
var max=1000;
function setBackground(){
num++;
drawBar()
if(num<max)
{
window.setTimeout(setBackground,3000);
}
}

setBackground();

//生成随机数
function produceRandom(len){
var random_array=[];
for(var i=0;i<len;++i)
{
random_array.push(Math.random()*100+1);
}

return random_array;
}

function produceLabels(len){
var label_array=[];
for(var i=0;i<len;++i)
{
label_array.push("");
}
return label_array;
}


是不是超级简单呢！哈哈