如何调整 CHARTJS 散点图大小以匹配 PDF 大小？

Question

我正在努力解决 ChartJS 的大小调整问题，我现在已经尝试了很多选项......但都非常不成功。通过以下选项，我至少实现了图表所需的位置和大小。数据都是正确的，但它显示所有数据都被压扁了......。 （数据是通过我的后端的车把推送的......）。现在我想让我的数据“未被压缩”。我正在使用 puppeteer 库将此数据转换为 PDF，但是我不认为这是问题所在，因为我在某些设置中看到了所需的数据...。提前非常感谢！

<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .test { 
        width: 100%;
        max-width: 400;
        height: 225;
    }
</style>
<div class="container">
    <div class="test">
        <canvas id="myChart"></canvas>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    var envelope = {{{envelopeJSON}}};
    var utility = {{{utilityJSON}}};
    var mb = {{{mbJSON}}};
    new Chart("myChart", {
        type: "scatter",
        data: {
            datasets: [
                {
                    label: "{{airplanename}}",
                    pointRadius: 4,
                    pointBackgroundColor: "rgb(0, 0, 255)",
                    data: envelope,
                    showLine: true,
                    fill: true,
                    borderColor: "rgb(0, 150, 255)", 
                    backgroundColor: "rgba(0, 0, 255, 0.2)"
                },
                {
                    label: "Utility",
                    pointRadius: 4,
                    pointBackgroundColor: "rgb(255, 36, 0)",
                    data: utility,
                    showLine: true,
                    fill: true,
                    borderColor: "rgb(255, 36, 0, 0.5)", 
                    backgroundColor: "rgba(255, 36, 0, 0.2)" 
                },
                {
                    label: "Data",
                    pointRadius: 4,
                    pointBackgroundColor: "rgb(0, 0, 255)",
                    data: mb,
                    showLine: true,
                    borderColor: "rgb(0, 150, 255)", 
                }
            ]
        },
        options: {
            //responsive: false,
            //maintainAspectRatio: false,
            legend: { display: false },
            scales: {
                xAxes: [{ ticks: { min: 80, max: 90 } }],
                yAxes: [{ ticks: { min: 1000, max: 2500 } }],
            }
        }
    });
});
</script>

我尝试了很多配置，变量：响应式和维护方面我已作为评论发表，我不确定什么配置适合这个问题....

Answer 1

问题在于，chartJS 试图显示从底部到顶部开始的动态动画数据，但是在生成 PDF 时，它会在第一瞬间导致图表底部的数据集冻结...：在 ChartJS 中，您必须设置选项：动画：持续时间：0，如下所示：

options: {
        legend: { display: false },
        animation: {
        duration: 0 
    }