Chart.js：不要将轴拉伸到图表之外

问题描述

我正在使用 chart.js 2.9.4 和 Angular 的 ng2-charts 包装器。我正在尝试显示传入的实时数据，但在配置图表时遇到问题，以便刻度/轴不会超出图表中的数据。换句话说，我希望图表数据点填满图表网格的整个宽度。

StackBlitz 显示了我的问题。

如果您在添加数据时继续查看图表，您会看到大多数情况下刻度会延伸到图表中的最后一个点之外：

我能想到的唯一解决方案是每次将新数据添加到图表时覆盖 x 轴上刻度的最大值：options.scales.xAxes[0].ticks.max = x;。取消注释 StackBlitz 中的第 68 行以应用它。这解决了我的问题，但引入了另一个问题。有时随着数据的添加，最后两个刻度重叠：

我尝试过使用各种比例和刻度选项参数（边界、分布、步长、源、自动跳过、自动跳过填充），但没有结果。是否有任何配置参数组合可以解决我的问题？

解决方法

您可能想在流媒体插件中添加延迟，配置将如下所示：

scales: {
      x: {
        type: 'realtime',// x axis will auto-scroll from right to left
        realtime: {         // per-axis options
          delay: 1000,// delay of 1000 ms,so upcoming values are known before plotting a line
          pause: false,// chart is not paused
          ttl: undefined,// data will be automatically deleted as it disappears off the chart
          
        }
      },

我已经在您的代码上对此进行了测试，它似乎按预期工作，您可能需要根据需要调整一些参数。