在Highcharts工具提示中放入Z坐标

Question

我有三个图表。所有三个图具有相同的x轴值（类别），不同的y值和相同的z值（日期）。当您将鼠标悬停在一个点上时，图形将同步工具提示。我希望能够使用每个点的z坐标填充工具提示。我不想要绘制z坐标...只是在工具提示中显示它。我不确定如何执行此操作，因为有更多带有同步工具提示的图形。

我做了一个基本示例，展示了如何将z值（日期）放入一个图形的工具提示中。 https://codepen.io/austeng/pen/ZEGxWyK

Highcharts.chart('container', {
    tooltip: {
      formatter: function() {
        return 'x: ' + this.x + ', y: ' + this.y + ', z: ' + Highcharts.dateFormat('%b/%e/%Y',
          new Date(this.point.z));
      }
    },
  xAxis:{
    type: 'category'
  },
    series: [{
      data: [{
          x: 0,
          y: 0,
          z: 1564358400000
        },
        {
          x: 1,
          y: 5,
          z: 1564531200000
        },
        {
          x: 2,
          y: 2,
          z: 1564963200000
        }
      ]
    }]
  });

这是我的三个图形的代码笔：https://codepen.io/austeng/pen/gOppRWY

非常感谢您提供有关如何将一个图形的示例扩展到当前三个图形的代码的任何帮助（带有同步工具提示）。谢谢。

Answer 1

我认为以其他方式实现它会更好。

1. 创建一些全局函数，假设setTooltip，它将一个点作为参数。

2. 为每个图表配置设置tooltip.pointFormatter回调，该回调返回上述函数。

   tooltip: {
      pointFormatter() {
        let point = this;
   
        return setTooltip(point)
       }
   },
   

3. 使用keys功能获取点对象中的z值。

API：https://api.highcharts.com/highcharts/series.line.keys

最终输出：https://jsfiddle.net/BlackLabel/sjv18rbn/