將回調函數傳遞給打印機中的高圖例中的labelFormatter

Question

我正在嘗試在使用打字稿的Angular2中使用HighCharts。

我想格式化我的圖例文字，圖片顯示在它旁邊。 HighChart圖例具有labelFormatter屬性以提供回調函數。

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

回調函數來格式化每個系列的標籤。此 關鍵字指的是系列對象，或 餅圖中的點對象。默認情況下打印系列或點名稱。

但我不知道如何將打字稿中的回調函數傳遞給labelFormatter屬性。

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

但我正在逐漸未定義seriesDetails對象。

如果我使用這個關鍵字的任何地方，它指的是該組件，而不是系列信息。

Answer 1

按照documentation：

回調函數來格式化每個系列的標籤。此 關鍵字指的是系列對象，或 餅圖中的點對象。默認情況下打印系列或點名稱。

我想你在胖箭頭功能中出現了錯誤的「this」。恕我直言simpliest方式只需按照文檔語法（jsfiddle）：

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

Answer 2

你應該寫你這樣的代碼：

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

這將產生如下JS代碼，併爲您希望將工作（Test是我的課程名稱）：

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