Callback-Funktion an labelFormatter in Highchart-Legende in Typoskript übergeben

Question

Ich versuche, HighCharts in Angular2 mit Typoskripten zu verwenden.

Ich versuche meinen Legendentext zu formatieren, mit einem Bild daneben. Die HighChart-Legende verfügt über die labelFormatter-Eigenschaft, um eine Rückruffunktion bereitzustellen.

http://api.highcharts.com/highcharts#legend.labelFormatter

Callback-Funktion jedes der Etiketten Reihe zu formatieren. Das Schlüsselwort bezieht sich auf das Serienobjekt oder das Punktobjekt bei Kreisdiagrammen. Standardmäßig wird der Serien- oder Punktname gedruckt.

Aber ich weiß nicht, wie Callback-Funktion in Maschinenschriften zu labelFormatter Eigentum zu übergeben.

updateChart(): void { 
    let newOptions = { 
     legend: { 
      useHTML: true, 
      itemMarginBottom: 10, 
      enabled: true, 
      floating: true, 
      align: 'center', 
      verticalAlign: 'top', 
      labelFormatter: (s) => this.getLegendLabel(s), 
      y: 35 
     } 
    } 
} 

getLegendLabel(seriesDetails) { 
    console.log(seriesDetails); 
} 

Aber ich bin immer für seriesDetails Objekt nicht definiert.

und wenn ich dieses Schlüsselwort irgendwo verwendet, bezieht es sich auf diese Komponente eher als Reiheninformationen.

Answer 1

Nach den documentation:

Callback-Funktion jedes der Etiketten Reihe zu formatieren. Das Schlüsselwort bezieht sich auf das Serienobjekt oder das Punktobjekt bei Kreisdiagrammen. Standardmäßig wird der Serien- oder Punktname gedruckt.

Ich denke, Sie haben falsch "das" in der Fettpfeil-Funktion. IMHO die einfachste Art und Weise nur Dokumentation Syntax folgen (jsfiddle):

labelFormatter: function() { 
    return this.name + ' (click to hide)'; 
} 

Answer 2

Sie sollten Ihren Code wie folgt schreiben:

updateChart(): void { 
    let newOptions = { 
     legend: { 
      useHTML: true, 
      itemMarginBottom: 10, 
      enabled: true, 
      floating: true, 
      align: 'center', 
      verticalAlign: 'top', 
      labelFormatter: this.getLegendLabel, 
      y: 35 
     } 
    } 
} 

getLegendLabel() { 
    console.log(this); 
} 

Es wird die folgende JS-Code erzeugen und wird wie erwartet (Test ist mein Klassenname):

Test.prototype.updateChart = function() { 
    var newOptions = { 
     legend: { 
      useHTML: true, 
      itemMarginBottom: 10, 
      enabled: true, 
      floating: true, 
      align: 'center', 
      verticalAlign: 'top', 
      labelFormatter: this.getLegendLabel, 
      y: 35 
     } 
    }; 
}; 
Test.prototype.getLegendLabel = function() { 
    console.log(this); 
};