Highcharts 十字准线标签是传奇的背后

Posted 2023-02-16

【中文标题】Highcharts 十字准线标签是传奇的背后

【英文标题】：Highcharts crosshair label is behind legend

【发布时间】：2018-09-16 01:45:24

【问题描述】：

当十字准线标签过长时，它会到达图例。并且图例位于十字准线标签之上，因为它稍后出现在 Highcharts svg 的代码中。 xAxis.crosshair.zIndex 根本不影响它。 知道如何让它前进吗？

下面是代码示例：http://jsfiddle.net/oeuakvva/4/

Highcharts.stockChart('container', 
    legend: 
        enabled: true,
        borderColor: 'black',
        borderWidth: 2
    ,
    rangeSelector: 
        selected: 1
    ,
    series: [
        name: 'ADBE',
        data: ADBE
    , 
        name: 'MSFT',
        data: MSFT
    ],
    tooltip: 
      enabled: false
    ,
    xAxis: 
      crosshair: 
        label: 
          enabled: true,
          formatter: function()
            return "ddd<br>lllllll<br>oooooooo<br>wwwwwwww<br>vvvvvvvvvv<br>lllllll<br>oooooooo<br>wwwwwwww<br>vvvvvvvvvv";
          
        
      
    
);

【问题讨论】：

代码在哪里？？使用您正在使用的代码更新您的帖子

添加了代码，您可以看到十字准线标签前面有多少元素。如何让它出现在所有人面前？

这看起来很相关：github.com/highcharts/highcharts/issues/759

谢谢，它是相关的，但据我所知，它没有为这个问题提供解决方案。

【参考方案1】：

加载图表后，您可以在 svg 树中上移图例：

Highcharts.stockChart('container', 
  chart: 
    events: 
      load () 
        this.legend.group.attr(
          zIndex: -99
        )
      
    
  ,

在某些情况下，可能还需要在 chart's redraw 之后执行此操作。

实时示例：http://jsfiddle.net/d6k8yd8g/

【讨论】：

谢谢，这是一个很棒的提示！如何为发际线上的所有其他元素制作它？在导航器中，有线条和数字出现（在您将鼠标移动到最右边的点时，您会看到它）。是否可以执行this.hairlineLabel.group.attr( zIndex: 199 ) 之类的操作并将其移动到 svg 的末尾？

是的，您可以调整任何组的 zIndex - 您可能需要尝试该值以不丢失其他功能，例如事件。 jsfiddle.net/xLpo3af3/1