javascript - Calling a TypeScript function from a Chart.js option callback - Stack Overflow

admin管理员组

文章数量:1327801

I'm using a wrapper for Chart.js which allows for an animation callback to determine when the chart is done drawing.

So, my chart options look like this:

public chartOptions: any = {
    animation: {
        duration: 2000,
        onComplete: function () {
            //alert('anim plete');
            this.chartTestMethod();
        }
    },
    responsive: true
};

and my chartTestMethod() looks like this:

chartTestMethod() {
     console.log('chartTestMethod called.');
}

My hope is to have the method chartTestMethod() (which is in the same TypeScript file) called when the chart animation is plete. However, when the animation is plete and that method call line is executed, I get the error:

TypeError: this.chartTestMethod is not a function. 

Basically, how can I call that method properly?

I'm using a wrapper for Chart.js which allows for an animation callback to determine when the chart is done drawing.

So, my chart options look like this:

public chartOptions: any = {
    animation: {
        duration: 2000,
        onComplete: function () {
            //alert('anim plete');
            this.chartTestMethod();
        }
    },
    responsive: true
};

and my chartTestMethod() looks like this:

chartTestMethod() {
     console.log('chartTestMethod called.');
}

My hope is to have the method chartTestMethod() (which is in the same TypeScript file) called when the chart animation is plete. However, when the animation is plete and that method call line is executed, I get the error:

TypeError: this.chartTestMethod is not a function. 

Basically, how can I call that method properly?

• javascript
• charts
• typescript
• angular
• chart.js

Share Improve this question Follow edited Jul 14, 2016 at 18:47 Roka545 asked Jul 14, 2016 at 18:37 Roka545Roka545 3,6362323 gold badges7070 silver badges111111 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

I imply that your chartTestMethod is in the same class as chartOptions since you're using it on this. You should make sure you understand how this is handled in JavaScript (and TypeScript being a superset of JavaScript). There must be a million references out there.

Without knowing anything about Chart.js, I think it is safe to assume that in no way the this context fits your class instance when onComplete is invoked. So what you want is an arrow function, like this:

onComplete: () => { this.chartTestMethod(); }

Read about TypeScript arrow function to understand how to make sure this is actually pointing to your instance.

You got an error because this if referring to the object where function is executing. In your case, this is referring to any.animation object which do not have chartTestMethod key. You can solve it depending on where chartTestMethod is defined. If it is defined in global object, you can just remove this keyword. You can rewrite your code like this

function chartTestMethod(){
    console.log('chartTestMethod called.');
}

any = {
    animation: {
        duration: 2000,
        onComplete: function (){
            chartTestMethod();
        }
    },
    responsive: true
};

Also, if you want this method to be in the same object, you can do this

any = {
    animation: {
        duration: 2000,
        onComplete: function (){
            this.chartTestMethod();
        },
        chartTestMethod: function(){
            console.log('chartTestMethod called.');
      }
    },
    responsive: true
};

you can use bind(this) 

public chartOptions: any = {
    animation: {
        duration: 2000,
        onComplete: function () {
            //alert('anim plete');
            this.chartTestMethod();
        }.bind(this)
    },
    responsive: true
};

本文标签： javascriptCalling a TypeScript function from a Chartjs option callbackStack Overflow