回调和测试图表 [英] Callback and Testing Highcharts

问题描述

我目前在Highcharts中使用角度9.

I am currently using angular 9 with Highcharts.

Link to the code : https://stackblitz.com/edit/angular-ivy-wdejxk

在应用程序端/测试端运行的一些说明:

Some instructions for running on application-side / test-side :

1. 测试-侧面:在第18行的angular.json文件中，进行更改

1. Test - side : inside angular.json file on line number 18, change

    "main": "src/main.ts",

到

    "main": "src/main-testing.ts",

并刷新浏览器.

1. 应用程序侧-:与上一个完全相反.

1. Application - side : Change exactly the opposite of previous.

   "main": "src/main-testing.ts",

到

   "main": "src/main.ts",

以下是我遇到的一些问题:

Here are a few issues i am stuck upon :

1. 我已经使用图表回调来获取图表实例，但是它不起作用(在hello.component.ts中， 行号38到40).我应该怎么称呼它?Highcharts中的回调实际上是什么时候发生的?
2. 如果假设我能够以某种方式将图表实例分配给chartCreated变量.我可以控制 现在绘制图表，就像行号60到62(如果我取消注释那样)，它将起作用吗?基本上我想 知道Highcharts中的 usefulness of updateFlag .
3. 在hello.component.ts
中调用ngOnChanges时无法进行addSeries
4. 在规格文件hello.component.spec.ts中，我想通过放置数字数据/添加序列来测试图表 我自己，就像调用onClick()时所做的那样.但是 jasmine shows error

1. I have used chart callback to get the chart instance , but it is not working ( inside hello.component.ts , line numbers 38 to 40 ). How should i call it and when does actually the callback happens in Highcharts ?
2. If suppose somehow i am able to assign the chart instance to chartCreated variable. Can i control the chart now, like line numbers 60 to 62 ( if i uncomment that ), will it work ? Basically i wanted to know the usefulness of updateFlag in Highcharts.
3. Unable to addSeries when ngOnChanges is called inside hello.component.ts
4. Inside the spec file hello.component.spec.ts i wanted to test the chart by putting a numeric data / adding a series on my own , like i did when onClick() is called. But jasmine shows error

   TypeError : Cannot read series of undefined
   TypeError : Cannot read property 'addSeries' of undefined

如何解决这些?

How to resolve these ?

编辑1 :实现ngOnChanges和ngOnInit，并将大部分代码从app.component.ts删除到hello.component.ts

EDIT 1 : Implemented ngOnChanges and ngOnInit and removed most of the code from app.component.ts to hello.component.ts

推荐答案

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

这篇关于回调和测试图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！