使用chart.js插件与响应式问题

最新推荐文章于 2023-11-29 23:06:26 发布

xiaokehai

最新推荐文章于 2023-11-29 23:06:26 发布

阅读量3.1k

点赞数

本文链接：https://blog.csdn.net/xiaokehai/article/details/52712780

版权

本文主要介绍了作者在使用chart.js时遇到的响应式问题，详细描述了解决过程中遇到的难点，即chart.js内部代码导致的宽度固定问题。通过注释特定代码并为canvas设置width: 100%, height: 100%的样式，成功实现了响应式坐标轴曲线图。" 124140024,11271605,使用Leaflet实现自定义样式的聚合图,"['leaflet', '地图', '自定义样式', '聚合图', '地图工具']

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

直接切入主题：

这是一个困了我半天的chart.js的响应式问题，刚开始是插件找不对，制作响应式的坐标轴曲线图问题。

响应式后成功了的效果图：

步骤：一、下载chart.js插件：http://www.bootcss.com/p/chart.js/

二、使用html5<canvas>画布标签来实现曲线坐标

三、引入html文件中 <script src="js/Chart.js"></script>

根据文档-->还要额外添加js代码

代码如下：

var lineCharData={
	//x控制数据
	labels:["2","4","6","8","10","12","14","16","18","20","22","24"],
	datasets:[{
	//额欧诺个级表的背景衍射
	 fillColor:"rgba(255,255,255,0)",
	 //统计表画笔颜色
	 strokeColor:"rgba(0,0,0,1)",
	 //点的颜色
	 pointColor:"rgba(155,39,39,1)",
	 //点边框的颜色
	 pointStrokeColor:"#fff",
	 //鼠标触发时点的颜色
	 pointHighlighFill:"#fff",
	 //鼠标触发时点边框的颜色
	 pointHighlightStroke:"rgba(220,220,220,1)",
	 //Y坐标数据
	 data:[1,2,3,4,5,6,7,8,9,9]
	 
	},
	{
		fillColor:"rgba(255,255,255,0)",
		strokeColor:"rgba(92,184,92,1)",
		pointColor:"rgba(23,126,23,1)",
		pointStrokeColor:"#fff",
		pointHighlighFill:"#fff",
		data:[2,2,1,4,2,4,5,7,8,8,4,3] 
		
	}
	]
	
};
window.οnlοad=function(){
	var ctx=document.getElementById("canvas").getContext("2d");
	window.myLine=new Chart(ctx).Line(lineCharData,{responsive:true})
};

将这代码放在另一个js文件中，然后引入html文件里

这个时候，响应式没有效果，然后它的宽高老是被定死了，但是自己又没有加入什么样式，于是。。。。。