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

Question

我在用图表。js 2.9。4和ng2图表包装器的角度。我试图显示传入的实时数据，但在配置图表时遇到问题，因此刻度/轴不会超出图表中的数据。换句话说，我希望图表数据点填充图表网格的整个宽度。

StackBlitz显示了我的问题。

如果您在添加数据时一直查看图表，您会发现大多数时间刻度都会延伸到图表中的最后一点之外：

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

我尝试过使用刻度和刻度选项的各种参数（边界、分布、步长、源、autoSkip、AutoSkipAdding）进行实验，但没有结果。是否有任何配置参数组合来解决我的问题？




Answer 1

您可能希望在流媒体插件中添加延迟，配置将类似于：

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
          
        }
      },
      

我已经在你的代码上测试了这个，它似乎像预期的那样工作，你可能想根据需要调整一些参数。