用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;
}是不是超级简单呢!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
这篇文章主要介绍了JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享,需要的朋友可以参考下2016-11-11
完美解决spring websocket自动断开连接再创建引发的问题
下面小编就为大家带来一篇完美解决spring websocket自动断开连接再创建引发的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-03-03
uniapp中使用 uni.navigateBack() 返回上级页面并传参的方法
最近遇到这样的需求在A页面中通过跳转到B页面,在B页面中处理的数据,需要跳转回A页面供其使用,本文给大家分享uniapp中使用 uni.navigateBack() 返回上级页面并传参的操作方法,感兴趣的朋友一起看看吧2023-10-10
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
看到这种百叶窗效果的动画,以为是用flash做的,下面通过本文给大家介绍基于JavaScript实现百叶窗动画效果,需要的朋友参考下吧2016-02-02


最新评论