Highcharts 在高图中,共享工具提示会破坏Y轴上的十字光标

Highcharts 在高图中,共享工具提示会破坏Y轴上的十字光标,highcharts,Highcharts,我有一个问题,我想在Highcharts图表上有一个共享的和自定义格式的工具提示,但同时我想让十字光标工作 在x轴上没有问题,但在y轴上,它不跟随指针 有什么建议吗 Highcharts.chart('container', { chart: { type: 'line' }, xAxis: { crosshair: true }, yAxis: { crosshair: true }, series: [ { dat

我有一个问题,我想在Highcharts图表上有一个共享的和自定义格式的工具提示,但同时我想让十字光标工作

在x轴上没有问题,但在y轴上,它不跟随指针

有什么建议吗

Highcharts.chart('container', {
  chart: {
    type: 'line'
  },

  xAxis: {
    crosshair: true
  },

  yAxis: {
    crosshair: true
  },

  series: [
    {
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    },
    {
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9].reverse()
    }
  ],

  tooltip: {
    shared: true
  }
});

更新:

根据这篇文章的评论,我更新了这个问题

现在,我有一些折衷办法:我在y轴上有两个十字准线(或者,正好和我拥有的系列项目一样多…)

问题是,如果我将轴选项链接到第0个选项,则比例将错误。如果我没有(我没有这样的例子,但是你可以删除这行并再次运行),这两个系列将处于不同的比例,但是由于第二个选项是隐藏的,整个想法就是一团糟

如果我不将选项链接到第0项,十字光标将无法再次工作

有什么想法吗

Highcharts.chart('container', {
  chart: {
    type: 'line'
  },

  xAxis: {
    crosshair: true
  },

  yAxis: [
    {
      crosshair: true
    },
    {
      linkedTo: 0, // delete me and run again
      crosshair: true,
      visible: false
    }
  ],

  series: [
    {
      yAxis: 0,
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    },
    {
      yAxis: 1,
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9].reverse().map(value => value - 5)
    }
  ],

  tooltip: {
    shared: true
  }
});

如果我的想法正确,您担心的是负值。因此,对于负值,您可以在图表中将
min
值指定给
yAxis

检查演示


这就解决了您的问题??如果有两个系列,并且工具提示设置为共享,则十字线将显示在第一个系列上。如果要为每个系列显示十字线,可以使用@Deep3015提供的主题中的解决方案。示例:。Thank@Deep3015可能重复,这在某种程度上解决了问题。Core972,我想你也联系到了。你是对的。我可能没有仔细搜索!最后一个问题:在上面的解决方案中,y轴上有多个十字光标,而鼠标所在的点上没有一个十字光标。有解决办法吗?我的意思是,在两个轴上都有一个十字线将是预期的工作。这是共享工具提示的属性,它的行为将像thatppseprus,我错过了你的评论。我想提醒你,如果评论中的参与者人数超过2人,那么你应该将@前缀添加到你想发送消息的参与者,否则参与者将不知道消息,所以每个评论只允许提及一次,但谢谢!)此外,上述解决方案也有点好。我需要一个更动态的解决方案,所以我使用
ticklocpositioner:function(){..}
根据轴上不同的min和max生成我自己的解决方案。但是您解决了最初的问题,所以。非常感谢!:)
  yAxis: [
    {
      crosshair: true,
      min:-10,
    },
    {
        linkedTo: 0, // delete me and run again
      crosshair: true,
      visible: false
    }
  ],