javascript - 当数据集变大时，保持图形中的 Y 轴比例，并在 X 轴上滚动。纵横比问题

Question

我有这个在 x 轴上滚动的图表。 (chartjs 版本 2.7.2)
https://jsfiddle.net/r70v96ta/2/
在代码的最后部分，即添加数据的位置，您可以选择要添加的记录数:addData(5, chartTest);如果我添加更多记录，图形在 Y 轴上会变大。我希望数据随着滚动在 X 轴上变长，但保持相同的高度。
每次操作 Canvas 时，我都尝试硬编码高度，但没有让它工作。
我的理想是一旦 Y 轴比例固定，就能够引入具有可变记录数的数据集并保持 Y 轴上的图形大小和比例，如果数据集更大，则使 X 轴滚动更大(意味着更长)反之亦然。
编辑:
我还尝试为 css 类设置参数，目的是获得我所追求的 Y 轴纵横比约束。似乎这可以通过 Canvas 的相应排列来实现 aspect-ratio
以防万一，我的图表包含在 div 中。具有此 css 类的元素:

.mainBlank
{
    background-color: white;
    width: 100%;
    min-height: 100vh;
    max-height: 100%;
}

编辑2:
使用这个 html:

        <div style="width: 100%; overflow-x: auto; overflow-y: hidden">
            <div id="canvasParent" style="width: 2000px; height: 300px">
                <canvas id="chart1" height="300" width="0"></canvas>
            </div>
        </div>

并在数据更改时在客户端设置宽度:

        const newWidth = (chart.data.datasets[0].data.length * 30).toString() + "px";
        $('#canvasParent').css({ width : newWidth});

我达到了预期的效果。但是我不明白为什么在 fiddle 的例子中图表高度会发生变化。

Answer 1

这个问题已经在这里回答>
https://stackoverflow.com/a/43658507
由 numediaweb
如果在 中禁用保持纵横比选项然后它使用可用高度:

var chart = new Chart('blabla', {
  type: 'bar',
  data: {},
  options: {
    maintainAspectRatio: false,
  }
});