Highcharts 中的类别和工具提示

Question

我有一个像 "Sprint 123<br>April 01" 这样的复杂类别，我只需要在 X 轴上显示 Sprint 编号，但工具提示应该包括两者。所以我创建了一个只去除冲刺数字的函数：

this.chartOptions.xAxis.categories=this.getSprintNums(this.response.categories);

It does show them appropriately.

Trying to build tooltip:

const cats = this.response.categories;
this.chartOptions.tooltip = {
   formatter: function(...cats) { // it does pass array of length 1, why?
      const cat = cats.find(c => c.indexOf(this.x) > -1);  // get "indexOf is not a function"
      const date = cat.split('<br>'[1]);
      return this.x.split('<br>[0] + date);
}
}

我该如何修复该错误或这个问题有更好的解决方案吗？也许是一种将 Categories 数组传递给格式化程序函数的方法，或者一种隐藏它的一部分（在 <br> 之后）而不显示在 X 轴上的方法？

我对此很陌生。
请帮忙！

使用 Angular 6 和 Highcharts 6。

TIA，奥列格

Answer 1

// it does pass array of length 1, why?

因为工具提示格式化函数只接受一个参数。改用标签格式化程序，并以不同的方式使用工具提示格式化程序。示例：

xAxis: {
    categories: ["Sprint 123<br>April 01"],
        labels: {
            formatter: function() {
                return this.value.toString().split('<br>')[0];
            }
        }
},
tooltip: {
    formatter: function(){
        const {x, y} = this;
        const splitted = x.toString().split('<br>');
        const sprintNum = splitted[0];
        const date = splitted[1];

        return `Name: ${sprintNum}<br>Date: ${date}<br>Y: ${y}`
    }
}

现场演示： http://jsfiddle.net/BlackLabel/Ly7jue5h/

API参考：

https://api.highcharts.com/highcharts/xAxis.labels.formatter

https://api.highcharts.com/highcharts/tooltip.formatter

Highcharts 中的类别和工具提示

Categories and tooltip in Highcharts

highcharts

typescript

angular