如何解决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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。