Highcharts - 多个yAxis，每个都有自己的工具提示 [英] Highcharts - multiple yAxis each with its own tooltip

问题描述

这是可能的吗？

我已经玩过 tooltip.shared 和 tooltip.crosshairs 但我无法设法得到类似的东西。

I already played with tooltip.shared and tooltip.crosshairs but I couldn't manage to get something similar.

编辑：像将是完美的（尝试悬停图表）

Something like Wunderground's weather forecast graph would be perfect (try to "mouseover" the graph)

推荐答案

使用 tooltip.positioner

Using tooltip.positioner in synchronous highcharts can results to required behaviour.

tooltip: {
      positioner: function(labelWidth, labelHeight, point) {
        var tooltipX, tooltipY;
        tooltipX = point.plotX + this.chart.plotLeft + 20;
        tooltipY = point.plotY + this.chart.plotTop - 20;
        return {
          x: tooltipX,
          y: tooltipY
        };
      }
    }

小提琴演示修改同步图表

更新修复了工具提示隐藏于极右的情况

Update Fix for tooltip hiding at extreme right

tooltip: {
      positioner: function(labelWidth, labelHeight, point) {
        var tooltipX, tooltipY;
        if (point.plotX > 340) {
          tooltipX = point.plotX + this.chart.plotLeft - 150;
        } else {
          tooltipX = point.plotX + this.chart.plotLeft + 20;
        }
        tooltipY = point.plotY + this.chart.plotTop - 20;
        console.log(tooltipX);
        return {
          x: tooltipX,
          y: tooltipY
        };
      }
    }

固定小提琴

这篇关于Highcharts - 多个yAxis，每个都有自己的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！