用chart.js添加动态背景图
更新时间:2022年06月30日 17:09:53 作者:前端小白的江湖路
这篇文章主要为大家详细介绍了用chart.js添加动态背景图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了用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; }
是不是超级简单呢!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
用RadioButten或CheckBox实现div的显示与隐藏
用RadioButten(或CheckBox)实现div的显示与隐藏,当选择“女”时,显示“美女、才女”;当选择“男”时隐藏,具体实现如下,感兴趣的朋友可以参考下2013-09-09javascript Array.sort() 跨浏览器下需要考虑的问题
最近组里项目需要一个简单的Table排序的功能,这个功能实现起来很简单,并且网上也有很多现成的代码,因此任务很快完成。2009-12-12Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
这篇文章主要给大家介绍了关于Bootstrap标签页(Tab)插件切换echarts不显示问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2018-07-07
最新评论