使用Chart.js
版本4.2.0,我尝试在Windows 11上的最大化窗口中显示图表,其中图表的高度是屏幕高度的100%,图表的宽度是屏幕宽度的80%。
我尝试使用以下代码
<body>
<div height="100%" width="80%">
<canvas id="canvas">
但是这些简单的属性并不能完成这项工作。
最后,我找到了这个解决方案
<body>
<div>
<canvas id="canvas">
</canvas>
</div>
, options:
{ responsive: true
, maintainAspectRatio: true
, aspectRatio: 1.65
var ctx = document.getElementById("canvas").getContext("2d");
var myChart = new Chart(ctx, config);
myChart.canvas.parentNode.style.width = '80%';
这可以正常工作,但有点棘手,因为width
(不是height
)是在Javascript代码中动态设置的,而aspectRatio
必须在options
中手动修复。
是否有简单的解决方案可将宽度定义为屏幕的80%,将高度定义为屏幕的100%?
我目前的屏幕尺寸是1920x1080。
我得到的是
当我在选项中取消aspectRatio
时,我会得到下面的图表
1条答案
按热度按时间1wnzp6jl1#
看起来chart.js图用css中设置的大小填充某个区域的标准方法是执行以下操作:
%
)另请参见文档中的此注解。
maintainAspectRatio: false
和responsive: true
-后者用于在调整窗口大小时重新绘制图表。下面是一段代码片段,其中包括我编写的一个插件,可以显示画布、div和窗口的当前大小
x一个一个一个一个x一个一个二个x