为什么我 Kendo 的 angular 图表会呈现模拟数据而不是真实数据？

Question

我正在尝试使用 Kendo 图表为 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建议的那样

To trigger the change detection, create a new array instance for the collection—for example, instead of the this.data.push({new item}) array, set a this.data = [...this.data, {new item}] one.

这基本上意味着您需要使用您从后端 return 的新数组重新分配 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
    });
  });

为什么我 Kendo 的 angular 图表会呈现模拟数据而不是真实数据？

Why will my Kendo chart for angular render mock data but not real data?

charts

kendo-ui

angular