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

Question

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

StackBlitz显示我的问题。

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

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

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

标签： javascriptchart.jsng2-chartschart.js2

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

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