我目前在Highcharts中使用角度9。
Link to the code :
https://stackblitz.com/edit/angular-ivy-wdejxk
关于在应用程序端/测试端运行的一些说明:
angular.json
文件中,更改 "main": "src/main.ts",
至 "main": "src/main-testing.ts",
并刷新浏览器。
"main": "src/main-testing.ts",
至 "main": "src/main.ts",
以下是我遇到的一些问题:
hello.component.ts
中,行号38到40)。我应该怎么称呼它,回调实际上何时在Highcharts中发生?usefulness of updateFlag
。hello.component.ts
内部调用ngOnChanges时无法进行addSerieshello.component.spec.ts
内,我想通过放置数字数据/添加一系列来测试图表我自己,就像调用onClick()时所做的那样。但是jasmine shows error
TypeError : Cannot read series of undefined
TypeError : Cannot read property 'addSeries' of undefined
如何解决这些? EDIT 1:实现ngOnChanges和ngOnInit,并将大部分代码从app.component.ts删除到hello.component.ts]
根据@ gsa.interactive建议,以下测试用例起作用:
it('should check for changes in the data of the series in charts ',()=>{
component.chartCreated.series[0].data[0].update(5);
//console.log(component.chartCreated);
expect(component.chartCreated.series[0].yData).toEqual([5,2,3]);
});
it('should check for changes in the series in charts ',()=>{
component.chartCreated.addSeries({
data: [3,4,2],
type: 'line'
});
//console.log(component.chartCreated);
expect(component.chartCreated.series.length).toBe(2);
expect(component.chartCreated.series[1].yData).toEqual([3,4,2]);
});
If you add the ngOnInit lifecycle hook, you will get values:
1. export class AppComponent implements OnInit {.....
2. ngOnInit(){
this.chartCallback = (chart) => {
this.chartCreated = chart;
console.log('chart: ' + chart.chartHeight); // shows 400
console.log('this.chartCreated: ' + this.chartCreated.chartHeight); // shows 400
}
}
addNewDataToChart(){
this.updateFlag = false;
this.chartCreated.addSeries({
data: [3,4,2],
type: 'line'
});
this.updateFlag = true;
}
3. onClick(){
if(this.clicked === false){
this.chartCreated.series[0].data[0].update(4);
this.clicked = true;
} else {
this.chartCreated.series[0].data[0].update(1);
this.clicked = false;
}
}