Question

我正在尝试使用打字稿在Angular2中使用HighCharts。

我正在尝试格式化我的图例文字，图片显示在旁边。 HighChart图例具有labelFormatter属性以提供回调函数。

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

回调函数，用于格式化每个系列的标签。这个 keyword是指系列对象，或者是指对象的对象饼状图。默认情况下，会打印系列或点名称。

但我不知道如何将typescripts中的回调函数传递给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：

回调函数，用于格式化每个系列的标签。这个 keyword是指系列对象，或者是指对象的对象饼状图。默认情况下，会打印系列或点名称。

我猜你在胖箭头功能中出错了“这个”。恕我直言，最简单的方法就是遵循文档语法（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);
};

将回调函数传递给typescript

2 个答案: