Angular 7 High Charts Stock Chart Datetime X Axis tooltip 格式独立于其他工具提示答案

【问题标题】：Angular 7 High Charts Stock Chart Datetime X Axis tooltip formatting independently of other tooltipsAngular 7 High Charts Stock Chart Datetime X Axis tooltip 格式独立于其他工具提示
【发布时间】：2020-10-05 16:28:30
【问题描述】：

我正在使用 Angular 7 的高位图表，并且只想在 x 轴工具提示中格式化日期，我想完全不理会其他人。

我能够在 x 轴工具提示中获得我想要的格式，但它也破坏了其他两个。我在 y 轴上有两个系列，以及我们在插入系列时已格式化的系列，但我几乎没有看到任何文档。格式化一个并破坏其他的解决方案来自这个问题：

SO Quesrtion with Datetime Tooltip formatting.

所以我做了这样的格式化程序：

tooltip:{
  enabled: true,
  split: true,
  formatter: function() {return [moment(this.x).format('MMDDYY HH:00-HH:59')].concat(...other tooltips)
}

我想做的，似乎不可能，只是像这样格式化 x 轴工具提示，但没有看到这种方法的结果：

xAxis: {
  type: 'datetime',
  tooltip: {
    enabled: true,
    formatter: function() {
      return moment(this.value).format('MMDDYY HH:00-HH:59');
    }
  }
}

真正的诀窍是如何为 x 轴设置格式？并且只有 x 轴，因为我们已经有了系列中 y 轴工具提示所需的格式？

【问题讨论】：

标签： javascript highcharts angular-highcharts

【解决方案1】：

它不起作用，因为没有 xAxis.tooltip 这样的东西。只有一个工具提示，您可以使用tooltip.formatter 对其进行修改。 tooltip.formatter 将返回的字符串将成为工具提示内容，因此这是您可以影响 x 值的地方。


chartOptions: Highcharts.Options = {
...

   tooltip: {
      formatter() {
         return `xAxis value: ${moment(this.x).format('MM.DD.YY HH:00-HH:59')}, 
         yAxis value: ${this.y}`
      },
   },
}

API 参考：
https://api.highcharts.com/highcharts/tooltip.formatter

现场演示：
https://stackblitz.com/edit/highcharts-angular-basic-line-frbdhg

【讨论】：