用chart.js添加动态背景图

Petunia ·

更新时间:2024-11-14

· 1032 次阅读

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

是不是超级简单呢！

背景图动态 js chart

1024 个赞