使用chartjs，如何定义画布的相对宽度和高度？

ibps3vxo 于 2023-02-04 发布在 Chart.js

关注(0)|答案(1)|浏览(225)

使用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时，我会得到下面的图表

chart.js

来源：https://stackoverflow.com/questions/75307195/using-chartjs-how-to-define-relative-width-and-height-of-canvas

1条答案

按热度按时间

1wnzp6jl1#

看起来chart.js图用css中设置的大小填充某个区域的标准方法是执行以下操作：

将画布包含在不包含任何其他内容的div中
在div的样式中设置大小，而不是在画布中（这在代码中已经完成）
在您的情况下，至少有一个绝对单位的大小（不是两个都是%）

<div style="height:100vh; width:80vw">
      <canvas id="myChart"></canvas>
  </div>

另请参见文档中的此注解。

设置图表选项maintainAspectRatio: false和responsive: true-后者用于在调整窗口大小时重新绘制图表。

下面是一段代码片段，其中包括我编写的一个插件，可以显示画布、div和窗口的当前大小
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-02-04

我来回答

使用chartjs，如何定义画布的相对宽度和高度？

1条答案

相关问题

热门标签

最新问答