Anychart.js动态显示数据

问题描述

我正在尝试使用Anychart v8和Angular CLI v10.0.4从数据库获取的数据绘制时间线图表 我看到了这个topic，与我在这里遇到的问题非常相似。我遵循了步骤，但是看不到数据。而且我收到此错误：错误：属性d：预期数字“ M NaN 56.5 L NaN 5…”。 我尝试对数据进行硬编码，然后就可以正常工作，所以我不知道出了什么问题。

这是我通过Sequelize获取数据的方式：

exports.getAllStoryArcs = (req,res,next) => {
    StoryArc.findAll({
        include: [StoryArc.startChapter,StoryArc.endChapter],order: [['startChapter','number','ASC']]
    })
            .then((storyArcs) => {
                res.status(200).json(storyArcs);
            })
            .catch((err) => {
                console.log(err);
                res.status(400).json({
                    error: err
                })
            });
};

编辑：这是使用Sequelize从MysqL DB获取数据的示例：

[
  Story Arc {
    dataValues: {
      id: 6,name: "Introduction",synopsis: "synopsis text",delailedSummary: "detailedSummary text",createdAt: 2020-08-22T16:41:21.000Z,updatedAt: 2020-08-22T16:41:21.000Z,startChapterId: 1,endChapterId: 8,startChapter: {
        id: 1,number: 1,title: "title text",synopsis: "synopsis text"
      },endChapter: {
        id: 8,number: 8,synopsis: "synopsys text"
      }
    }
  }
]

这是我的数据转换功能（data.service.ts）：

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

编辑2：我确实完成了映射，但是它不起作用。映射后，它看起来像这样：

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,endNb: arc.endChapter.number
            });
          });
        }
      }
    );
  }
  
  public get arcsMap() : Object[] {
    return this._arcsMap;
  }
}

然后是我的组件（timelines.component.js）：

[
   {name: "Introduction",start: Date.UTC(2001,1),end: Date.UTC(2008,11,31),startNb: 1,endNb: 8},{name: "Révolution chez les princesses",start: Date.UTC(2009,end: Date.UTC(2014,startNb: 9,endNb: 14},{name: "La formule magique de l'ange",start: Date.UTC(2015,end: Date.UTC(2019,startNb: 15,endNb: 19}
]

我进行了验证，并在initChart函数中获取了想要的数据，但是draw函数似乎无法理解它们。

有人可以帮我吗？

解决方法

您的数据内容不符合图表所需的数据格式。您可以对其进行预处理或应用指定的映射，以使图表正确地解析您的数据。您可以在the article中找到所需的数据格式。 The sample介绍了如何将映射应用于时间线图表。

,

好的，所以我遵循@AnyChart支持所说的获取数据的时间。

我摆脱了数据服务类，在时间轴组件中转换了数据，并在iniChart方法中添加了async关键字，因此可以正常工作！

我不太了解为什么使用XD

结果如下：

ngOnInit(): void {
    this.initChart();
}
    
async initChart() {
    let arcsSet = anychart.data.set(await this.setArcData());
        
    this.globalTimeline = anychart.timeline();
    this.globalTimeline.axis().height(20);
    this.globalTimeline.axis().fill("#7030A0");
    this.globalTimeline.axis().stroke("#381850");
    this.globalTimeline.axis().ticks().stroke("#AB74D5");
    this.globalTimeline.axis().labels().fontFamily("Ubuntu");
    this.globalTimeline.axis().labels().fontWeight("bold");
    this.globalTimeline.axis().labels().fontColor("#E3D1F1");
    this.globalTimeline.axis().labels().format(function() {
        let realNumber = this.value;
        if (realNumber >= BASE_YEAR) {
            realNumber = this.value - BASE_YEAR;
        }
        return realNumber;
    });
        
    this.globalRange = this.globalTimeline.range(arcsSet);
        
    this.globalRangeSettings();
        
    this.globalTimeline.container("global-timeline");
    this.globalTimeline.draw();      
}
      
globalRangeSettings() {
    this.globalRange.height(30);
    this.globalRange.labels().format("{%name}");
    this.globalRange.labels().fontFamily("Ubuntu");
    this.globalRange.tooltip().titleFormat("{%name}");
    this.globalRange.tooltip().fontFamily("Ubuntu");
    this.globalRange.tooltip().format(function() {
        return `Début : Chapitre ${this.getData("startNb")}
                Fin : Chapitre ${this.getData("endNb")}`;
        })
    this.globalRange.color("#8E44BD");
}
      
async setArcData(): Promise<Object[]> {
    this.arcs = await this.arcService.getAllArcs().toPromise();
    let result: Object[] = [];
    this.arcs.forEach(arc => {
        result.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
        });
    });
    return result;
}