用chart.js添加动态背景图

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

本文实例为大家分享了用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;
}

是不是超级简单呢！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉