chart.js添加动态背景图
前端小白的江湖路 人气:01.效果图:
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; }
是不是超级简单呢!
加载全部内容