使用chart.js添加动态背景图

最新推荐文章于 2024-12-15 15:40:47 发布

前端小白的江湖路

最新推荐文章于 2024-12-15 15:40:47 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Canvas和webGL 文章标签： chart.js javascript 动态背景

本文链接：https://blog.youkuaiyun.com/qq_21058391/article/details/52471633

Canvas和webGL 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript动态生成柱状图的方法。通过不断更新数据并重新绘制图表来实现动态效果，同时提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

是不是超级简单呢！哈哈