用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;
}

是不是超级简单呢!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

最新评论