为什么我的剑道图表会渲染模拟数据而不是真实数据？

Question

我正在尝试使用 Kendo Charts for Angular 渲染图表，但它不起作用。

首先，我用模拟数据进行了尝试，它成功了：

这是我的代码：

<kendo-chart>
    <kendo-chart-series>
      <kendo-chart-title text="Large Data"></kendo-chart-title>
      <kendo-chart-series-item
        type="scatterLine"
        [style]="'smooth'"
        [data]="largeData"
        yField="value"
        xField="date"
      >
      </kendo-chart-series-item>
    </kendo-chart-series>
    <kendo-chart-x-axis>
        <kendo-chart-x-axis-item [labels]="{ format: 'MMM d, yy - hh:mm:ss a', rotation: 'auto' }">
        </kendo-chart-x-axis-item>
    </kendo-chart-x-axis>
  </kendo-chart>

还有……

    const startDate = new Date('1/1/2019');
    for (let i = 0; i < 100; i++) {
      const date = new Date(JSON.parse(JSON.stringify(startDate)));
      date.setDate(startDate.getDate() + i);
      const value = Math.random() * 100;
      this.largeData.push({
        date,
        value
      });
    }

自从我开始工作后，我尝试了从后端获取实际数据的下一步，如下所示：

    this.readingClient
      .query(filter, orderBy, skip, top, select)
      .pipe(retry(1))
      .subscribe((response) => {
        response.data.forEach(d => {
          this.largeData.push({
            date: d.readingDate,
            value: d.readingValues?.aCMitigationAmps?.value
          });
        });
      });

...但它不渲染：

这是从后端返回的 largeData 中的数据示例：

我认为日期有问题。请注意，日期轴是 0, 0, 0, 1, 1, 1 ... 即使我告诉它将日期格式化为'MMM d, yy - hh:mm:ss a'。此外，如果我删除格式并添加 [baseUnit]="days" 我会得到 0、0.2、0.4、0.6 ... 一直到 1.2，这正是沿 y 轴的值（好像它使用相同的值两个轴）。

谁能看到我做错了什么。

Answer 1

正如Documentation 建议的那样

要触发更改检测，请为集合创建一个新数组实例——例如，设置 this.data = [...this.data 来代替 this.data.push({new item}) 数组, {new item}] 一个。

这基本上意味着您需要使用从后端返回的新数组重新分配您的 largeData。也许试试：

this.readingClient
  .query(filter, orderBy, skip, top, select)
  .pipe(retry(1))
  .subscribe((response) => {
    response.data.forEach(d => {
      const backendData = [];
      backendData.push({
        date: d.readingDate,
        value: d.readingValues?.aCMitigationAmps?.value
      });
      this.largeData = backendData
    });
  });