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

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

创建一些全局函数，例如 setTooltip ，它将以点作为参数。

为每个图表配置设置 tooltip.pointFormatter 回调，该回调返回上述功能。

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

     return setTooltip(point)
    }
},

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

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

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

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

1 个答案: