当数据集变大时，通过在 X 轴上滚动来保持图表中的 Y 轴比例。纵横比问题

Question

我有这张图表，它在 x 轴上有滚动条。（chartjs 版本 2.7.2）

代码末尾添加数据的地方，可以选择添加多少条记录：

addData(5, chartTest);

如果我添加更多记录，图表在 Y 轴上会变大。我希望数据随着滚动在 X 轴上变长，但保持相同的高度。我尝试在每个 canvas 被操纵的地方对高度进行硬编码，但没有让它工作。我的理想是一旦 Y 轴比例固定，就能够引入记录数量可变的数据集，并在 Y 轴上保持图形大小和比例，如果数据集更大，则使 X 轴滚动更大（意味着更长）并且反之亦然。

编辑：

我也尝试将参数设置为css classes，目的是获得我所追求的Y轴纵横比约束。似乎这可以通过 canvas aspect-ratio

的相应排列来实现

以防万一，我的图表包含在 div 元素中 css class:

.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

这里已经回答了这个问题 > 通过 numediaweb

如果您在选项中禁用保持纵横比，那么它会使用可用高度：

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

Answer 2

似乎为 canvas 定义初始宽度和高度，因此为其定义纵横比（使用 <canvas id="chart-Test" height="300" width="1200"></canvas>）涉及如果 parent 纵横比发生变化，则向下传播到 children。这意味着更改 chartAreaWrapper2 元素的宽度，更改会传播到 children 以保持该宽度更改的相应纵横比变化，因此高度会随着宽度的增加而增加。将初始宽度设置为 0 可以解决问题。我猜想由于没有为 canvas 定义纵横比，因此当宽度变化从 parent.

向下传播时，宽度变化不涉及纵横比维护

因此将 <canvas id="chart-Test" height="300" width="1200"></canvas> 更改为 <canvas id="chart-Test" height="300" width="0"></canvas> 修复并解释了问题。

下面全部正确html，可以粘贴到fiddle中，这样在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>

当数据集变大时，通过在 X 轴上滚动来保持图表中的 Y 轴比例。纵横比问题

Maintain Y axis scale in graph with scroll in the X axis when the dataset grows bigger. Aspect-ratio problem

javascript

css

canvas

chart.js