当数据集变大时，保持图形中的Y轴刻度，并在X轴上滚动。宽高比问题

Question

我有一张x轴滚动的图表。（chartjs版本2.7.2）

https://jsfiddle.net/r70v96ta/2/

在代码末尾添加数据的地方，您可以选择要添加的记录数：

addData（5，图表测试）

如果我添加更多的记录，图形在Y轴上会变大。我希望数据在X轴上与滚动条一起变长，但保持相同的高度。我试着在画布被操纵的每一个地方硬编码高度，但是没有成功。我的理想是，一旦Y轴比例固定，就能够引入具有可变记录数的数据集，并将图形大小和比例保持在Y轴上，如果数据集更大，则使X轴滚动更大（意味着更长），反之亦然。

编辑：

我还试图为css类设置参数，以获得我所追求的Y轴纵横比约束。这似乎可以通过画布纵横比的相应排列来实现

如果in有任何不同，我的图被包装在一个带有这个css类的div元素中：

.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});

我达到了预期的效果。然而，我不明白为什么在小提琴的例子中图表高度会改变。




Answer 1

似乎为画布定义了初始宽度和高度，因此为其定义了宽高比（使用）

因此，更改

下面是完整正确的html，可以粘贴在小提琴中，以便在addData（500，chartTest）中添加大量数据之后 达到了理想的高度保持效果。

欢迎任何进一步的解释或我可能错过的要点。

<div class="chartWrapper">
  <div class="chartAreaWrapper">
  <div class="chartAreaWrapper2">
      <canvas id="chart-Test" height="300" width="0"></canvas>
  </div>
  </div>
  <canvas id="axis-Test" height="300" width="0"></canvas>
</div>

Answer 2

这个问题在这里已经得到了回答

如果禁用“选项”中的“保持纵横比”，则它将使用可用高度：

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