将 Z 坐标放在 Highcharts 工具提示中答案

【问题标题】：Putting the Z-Coordinate in the Highcharts Tooltip将 Z 坐标放在 Highcharts 工具提示中
【发布时间】：2020-03-12 22:08:16
【问题描述】：

我有三个图表。所有三个图表都具有相同的 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

任何关于如何将我的一个图表的示例扩展到我当前的三个带有同步工具提示的图表的代码的帮助将不胜感激。谢谢。

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

我认为以不同的方式实现它会更好。

创建一些全局函数，比如说setTooltip，它将一个点作为参数。

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

tooltip: {
   pointFormatter() {
     let point = this;

     return setTooltip(point)
    }
},

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

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

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

【讨论】：