Chart.js 如何让时间窗口外的数据参与 Y 轴自动缩放？

结论

可以给 Y 轴设置 suggestedMax，为自动计算的上限提供参考。示例中的第二个系列虽然在 X 轴显示的时间范围内没有数据点，但数据值达到 80。把 Y 轴的建议上限设为 80，可以避免自动缩放到 60 时裁掉这条曲线。suggestedMax 只是建议值，实际刻度仍会根据数据调整。需要固定上限时，使用 max。Chart.js 线性轴配置

配置方式

在原配置的 options.scales 中添加 Y 轴设置。下面使用 Chart.js v3+ 的对象式轴配置：

options: {
  scales: {
    x: {
      type: "time",
      min: "2021-11-07T00:00:00",
      max: "2021-11-08T00:00:00"
    },
    y: {
      type: "linear",
      suggestedMax: 80
    }
  }
}

也可以同时设置 suggestedMin，为下限提供建议值。suggestedMax 不会截断高于 80 的数据；如果数据上限更高，Y 轴仍会按数据范围扩展。Chart.js 文档将它定义为计算数据范围时使用的调整值。线性轴配置说明

数据范围会变化时

如果不同时间窗口中的数据上限不同，可以在更新图表时，根据需要纳入缩放的完整数据计算最大值，再赋给 y.suggestedMax。例如：

const maxY = Math.max(
  ...myChart.data.datasets.flatMap(dataset =>
    dataset.data.map(point => point.y)
  )
);

myChart.options.scales.y.suggestedMax = maxY;
myChart.update();

这段代码假定数据点采用 { x, y } 结构，且 y 都是有效数值。数据量较大时，可以在收到或更新数据时计算并缓存范围，避免每次刷新都遍历全部数据。

注意事项

min 和 max 控制 X 轴的显示范围，不会自动把视图外的数据点加入视图。suggestedMax 调整 Y 轴缩放，适合需要让纵向范围覆盖某个值的情况。若将 y.max 设为固定值，后续超过该值的数据可能会被裁切。

也可以手动添加边界点，让该数值影响缩放，但这会改变数据集本身，因此只适合确实代表业务数据的点。Chart.js 的时间轴配置支持设置时间范围，线性轴的 suggestedMax 则可作为自动计算范围时的建议上限。时间轴配置

备注：内容仅供参考。