如何使用chart.js为图表添加动态背景图片？

本文共计310个文字，预计阅读时间需要2分钟。

原文：本文字例为大家分享了使用chart.js添加动态背景图的完整代码，供大家参考。具体内容如下：+ 1. 效果图：+ 2. HTML代码： + div class=background-image + canvas id=drawing + /canvas + /div

简化版：本文展示了如何用chart.js添加动态背景图。内容包含：+ 效果图展示+ HTML代码示例： + + + + +

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

是不是超级简单呢！

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