如何在 highcharts.js 中放置标签工具提示答案

【问题标题】：How to put label tooltip in highcharts.js如何在 highcharts.js 中放置标签工具提示
【发布时间】：2020-12-14 15:10:34
【问题描述】：

就像图表上的各个点有工具提示一样，例如在折线图中，我希望在将鼠标悬停在标签上时也有一些工具提示。最简单的方法是什么？

【问题讨论】：

标签： javascript highcharts label tooltip axis-labels

【解决方案1】：

请参考以下示例 - 通过将mouseover 和mouseout 事件添加到元素，您可以调用内置的Highcharts 工具提示：

chart: {
  ...,
  events: {
    load: function() {
      var chart = this,
        xAxis = chart.xAxis[0],
        halfTooltipWidth,
        posX,
        posY;

      for (var key in xAxis.ticks) {
        (function(label) {
          label
            .on('mouseover', function(e) {
              chart.tooltip.refresh({
                series: chart.series[0],
                getLabelConfig: function() {}
              });

              halfTooltipWidth = chart.tooltip.label.width / 2;
              posX = label.xy.x - halfTooltipWidth;
              posY = label.xy.y;

              chart.tooltip.move(posX, posY, posX + halfTooltipWidth, posY - 10);
            })
            .on('mouseout', function(e) {
              chart.tooltip.hide();
            });
        })(xAxis.ticks[key].label)
      }

    }
  }
},
tooltip: {
  headerFormat: '',
  formatter: function() {
    if (this.y) {
      return 'Point'
    }

    return 'Custom tooltip'
  }
}

现场演示： http://jsfiddle.net/BlackLabel/2jr0xdcw/

API 参考： https://api.highcharts.com/class-reference/Highcharts.Tooltip

【讨论】：

我其实不明白你小提琴中的逻辑.....你能写更多细节吗？
在你的小提琴上，工具提示总是说“自定义工具提示”。
嗨@Vladimir Despotovic，我使用refresh 方法显示工具提示，并使用move 方法将其定位在标签附近。内部字符串在tooltip.formatter 中定义 - 这只是一个示例，您可以根据需要对其进行格式化。
可以在getLabelConfig函数中添加需要的值，例如：jsfiddle.net/BlackLabel/897fwohy
你需要编辑formatter函数的第一部分，例如这里：jsfiddle.net/BlackLabel/5foLd170我使用了默认的格式化程序。

【解决方案2】：

到目前为止，我找到了两个选项。首先是一种外部的，它被称为工具提示。另一种是使用自定义事件 highcharts 插件。第三个是highcharts本地人，我认为他是正确的方法。

【讨论】：