Angular 7 高位图表股票图表日期时间 X 轴工具提示格式独立于其他工具提示

Question

我在 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 轴工具提示的格式？

Answer 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

Angular 7 高位图表股票图表日期时间 X 轴工具提示格式独立于其他工具提示

Angular 7 High Charts Stock Chart Datetime X Axis tooltip formatting independently of other tooltips

javascript

highcharts

angular-highcharts