Angular Anychart.js动态显示数据

我正在尝试使用anychart v8和Angular CLI v10.0.4从数据库中获取的数据绘制时间线图 我看到了这一点，这与我这里的问题非常相似。我按照步骤操作，但看不到数据。我得到了这个错误：错误：属性d：预期的数字，“M NaN 56.5 L NaN 5…”。 我试图对数据进行硬编码，但效果很好，所以我不知道出了什么问题

以下是我使用Sequelize获取数据的方法：

exports.getAllStoryArcs=（请求、恢复、下一步）=>{
芬德尔({
包括：[StoryArc.startChapter，StoryArc.endChapter]，
订单：['startChapter'，'number'，'ASC']]
})
.然后（（故事情节）=>{
res.status（200）.json（storyArcs）；
})
.catch（（错误）=>{
控制台日志（err）；
res.status（400）.json({
错误：错误
})
});
};

编辑：以下是使用Sequelize从MySQL DB获取的数据示例：

[
故事弧{
数据值：{
id:6，
名称：“引言”，
大纲：“大纲文本”，
delailedSummary：“详细摘要文本”，
创建日期：2020-08-22T16:41:21.000Z，
更新日期：2020-08-22T16:41:21.000Z，
开始阶段：1，
第八章，
第一章：{
id:1，
编号：1，
标题：“标题文本”，
大纲：“大纲文本”
},
(完){
id:8，
编号：8，
标题：“标题文本”，
简介：“简介文本”
}
}
}
]

下面是我的数据转换函数（data.service.ts）：

从'@angular/core'导入{Injectable}；
从“./story arc.service”导入{story arcservice}；
从“../models/story arc dto.model”导入{story arcdto}；
施工基准年：数量=2000；
施工开始月份：编号=0；
施工结束月份：编号=11；
施工开始日：编号=1；
施工结束日：编号=31；
@注射的({
providedIn:'根'
})
/**
*用于管理时间线图表数据的服务类。
*/
导出类数据服务{
//弧阵列
专用弧：数组；
//要在时间线图表中使用的映射弧
私有_arcsMap:Array=[]；
//要在图表中使用的集合
private\u arcset:anychart.data.Set；
构造函数（专用arcService:StoryArcService）{
这是setArcData（）；
}
私有setArcData（）{
//填充故事弧的数组
这是.arcService.getAllArcs（）.subscribe(
gottenArcs=>{
if（gottenArcs）{
这。_arcs=gottenacs；
//填写anychart数据集
此._弧.forEach（（弧）=>{
//映射圆弧数据集
这是.\u arcsMap.push({
名称：arc.name，
起始日期：UTC（基准年+弧.起始章.编号，起始月，起始日），
结束：日期.UTC（基准年+弧.endChapter.number，结束月，结束日），
startNb:arc.startChapter.number，
endNb:arc.endChapter.number
});
});
}
}
);
}
公共获取ArcMap（）：对象[]{
返回此。\u arcsMap；
}
}
您的数据内容不符合图表所需的数据格式。您可以对其进行预处理或应用指定的映射，以使图表正确解析数据。您可以在中找到所需的数据格式。描述如何将映射应用于时间线图表。
好的，因此我遵循@AnyChart Support关于获取数据时间的说明

我去掉了我的数据服务类，转换了timelines组件中的数据，并将async关键字添加到我的iniChart方法中，因此它可以工作

我真的不明白为什么XD

结果如下所示：

ngOnInit（）：void{
这个.initChart（）；
}
异步initChart（）{
让arcset=anychart.data.set（等待这个.setArcData（））；
this.globalTimeline=anychart.timeline（）；
此.globalTimeline.axis（）高度（20）；
这个.globalTimeline.axis（）.fill（“#7030A0”）；
这个.globalTimeline.axis（）.stroke（“#381850”）；
这个.globalTimeline.axis（）.ticks（）.stroke（“#AB74D5”）；
this.globalTimeline.axis（）.labels（）.fontFamily（“Ubuntu”）；
this.globalTimeline.axis（）.labels（）.fontWeight（“粗体”）；
this.globalTimeline.axis（）.labels（）.fontColor（“#E3D1F1”）；
this.globalTimeline.axis（）.labels（）格式（函数（）{
让realNumber=this.value；
如果（实数>=基准年）{
realNumber=this.value-基准年；
}
返回实数；
});
this.globalRange=this.globalTimeline.range（arcsSet）；
此参数为.globalRangeSettings（）；
这个.globalTimeline.container（“全球时间线”）；
this.globalTimeline.draw（）；
}
全局范围设置（）{
这个.全球范围.高度（30）；
此.globalRange.labels（）格式（“{%name}”）；
this.globalRange.labels（）.fontframy（“Ubuntu”）；
this.globalRange.tooltip（）.titleFormat（“{%name}”）；
这个.globalRange.tooltip（）.fontFamily（“Ubuntu”）；
此.globalRange.tooltip（）格式（函数（）{
返回'Début:Chapitre${this.getData（“startNb”）}
Fin:Chapitre${this.getData（“endNb”）}`；
})
这个.globalRange.color（“#8E44BD”）；
}
异步setArcData（）：承诺{
this.arcs=等待这个.arcService.getAllArcs（）.toPromise（）；
let结果：对象[]=[]；
this.arcs.forEach（arc=>{
结果：推({
名称：arc.name，
起始日期：UTC（基准年+弧.起始章.编号，起始月，起始日），
结束：日期.UTC（基准年+弧.endChapter.number，结束月，结束日），
startNb:arc.startChapter.number，
endNb:arc.endChapter.number
});
});
返回结果；
}
您得到的错误表明图表可以正确呈现应用的数据。这意味着数据无效或包含错误配置。你能提供
this.dataServ吗


import { Injectable } from '@angular/core';
import { StoryArcService } from './story-arc.service';
import { StoryArcDTO } from '../models/story-arc-dto.model';
const BASE_YEAR: number = 2000;
const START_MONTH: number = 0;
const END_MONTH: number = 11;
const START_DAY: number = 1;
const END_DAY: number = 31;

@Injectable({
  providedIn: 'root'
})
/**
* Service class to manage the timeline chart's data.
*/
export class DataService {
  
  // Array of arcs
  private _arcs: Array<StoryArcDTO>;
  // The arcs mapped to be use in the timeline chart
  private _arcsMap: Array<Object> = [];
  // The set to use in the chart
  private _arcsSet: anychart.data.Set;
  
  constructor(private arcService: StoryArcService) {
    this.setArcData();
  }
  
  private setArcData() {
    // Fill the array of story arcs
    this.arcService.getAllArcs().subscribe(
      gottenArcs => {
        if (gottenArcs) {
          this._arcs = gottenArcs;
          // Fill the anychart data set
          this._arcs.forEach((arc) => {
            // Map the arc data set
            this._arcsMap.push({
              name: arc.name,
              start: Date.UTC(BASE_YEAR + arc.startChapter.number, START_MONTH, START_DAY),
              end: Date.UTC(BASE_YEAR + arc.endChapter.number, END_MONTH, END_DAY),
              startNb: arc.startChapter.number,
              endNb: arc.endChapter.number
            });
          });
        }
      }
    );
  }
  
  public get arcsMap() : Object[] {
    return this._arcsMap;
  }
}