欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用chart.js添加動態(tài)背景圖

 更新時(shí)間：2022年06月30日 17:09:53   作者：前端小白的江湖路  
這篇文章主要為大家詳細(xì)介紹了用chart.js添加動態(tài)背景圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了用chart.js添加動態(tài)背景圖的具體代碼，供大家參考，具體內(nèi)容如下

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();
?
//生成隨機(jī)數(shù)
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;
}

是不是超級簡單呢！

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論