在垂直线的所有点上显示工具提示答案

【问题标题】：Show tooltips on all points of vertical line在垂直线的所有点上显示工具提示
【发布时间】：2019-05-14 00:16:22
【问题描述】：

我需要绘制一种带有工具提示的 plotLine。 api 无法提供绘图线的工具提示。我可以画一条线，垂直线，并为它制作工具提示，所以由于某种原因，只显示一个工具提示点，即使我有几个点在一行，所以我希望在用户移动鼠标时能够有几个不同的工具提示在它上面。

这里是只显示一个点/标记的代码 - https://jsfiddle.net/Lftwjymc/

代码副本：

Highcharts.chart('container', {
    xAxis: {
        type: 'datetime'
    },

    series: [{
        data: [
            [Date.UTC(2010, 0, 1), 29.9],
            [Date.UTC(2010, 0, 1), 71.5],
            [Date.UTC(2010, 0, 1), 75.5],
            [Date.UTC(2010, 0, 1), 80.5],
            [Date.UTC(2010, 0, 1), 106.4]
        ]
    }]
});

我的代码是来自api - https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/data-array-of-arrays-datetime/ 的示例的微小修改（只是使行垂直）

如何使用工具提示在图表中显示所有点（来自系列）？它适用于非垂直系列，但那些系列变成垂直只显示一个点。

或者，如何在情节线上制作工具提示？

【问题讨论】：

标签： highcharts tooltip line

【解决方案1】：

您可以通过以下方法之一轻松实现它：

使用plotLine 显示直线，使用scatter 系列分别绘制每个点：

代码：

Highcharts.chart('container', {
  xAxis: {
    type: 'datetime',
    plotLines: [{
        color: '#FF0000',
        value: Date.UTC(2010, 0, 1),
      width: 1
    }]
  },
  series: [{
    type: 'scatter',
    data: [
      [Date.UTC(2010, 0, 1), 29.9],
      [Date.UTC(2010, 0, 1), 71.5],
      [Date.UTC(2010, 0, 1), 75.5],
      [Date.UTC(2010, 0, 1), 80.5],
      [Date.UTC(2010, 0, 1), 106.4]
    ]
  }]
});

演示：

https://jsfiddle.net/BlackLabel/sm4wxo1k/1/

API：

https://api.highcharts.com/highcharts/series.scatter

创建两个具有相同数据点的系列，line 和 scatter：

代码：

const data = [
  [Date.UTC(2010, 0, 1), 29.9],
  [Date.UTC(2010, 0, 1), 71.5],
  [Date.UTC(2010, 0, 1), 75.5],
  [Date.UTC(2010, 0, 1), 80.5],
  [Date.UTC(2010, 0, 1), 106.4]
];

Highcharts.chart('container', {
  xAxis: {
    type: 'datetime'
  },
  series: [{
    linkedTo: 'main',
    data: data
  }, {
    type: 'scatter',
    id: 'main',
    name: 'Series',
    data: data
  }]
});

演示：

https://jsfiddle.net/BlackLabel/g7nzxfL6/

【讨论】：

非常感谢您的回答，它引导我走向正确的方向，我发布了一个适合我的答案，因为我的问题中我的要求可能不是很清楚。
不客气。那么也许您可以将此答案标记为正确答案？

【解决方案2】：

基于 Wojciech Chmiel 的回答 - https://stackoverflow.com/a/56124122/1015848

我能够使用工具提示制作垂直线：这是示例 - https://jsfiddle.net/05bwkzma/

看起来像：

关键项目：使用散点图；使用链接到散点图的线图；散点图应该有 marker.enabled=false 和 status.hover.enabled=false [example]。

代码：

const data = [
  [Date.UTC(2010, 0, 1), 29],
  [Date.UTC(2010, 0, 1), 30],
  [Date.UTC(2010, 0, 1), 31],
  [Date.UTC(2010, 0, 1), 32],
  [Date.UTC(2010, 0, 1), 33]
];

Highcharts.chart('container', {
  xAxis: {
    type: 'datetime'
  },
  series: [{
    linkedTo: 'main',
    data: data
  }, {
    type: 'scatter',
    id: 'main',
    name: 'Series',
    marker: {
      enabled: false,
      states: {
        hover: {
          enabled: false
        }
      }
    },
    data: data
  }]
});

【讨论】：