javascript - 工具提示出现在 plotLine highcharts 下

Question

我用 Highcharts 创建了一个图表，绘制了两条 plotLines，一条是垂直的，一条是水平的。我已将它们的 zIndex 分别设置为 1001 和 1002，以确保可以在我的列系列上方看到这些行。

不幸的是，尽管为工具提示设置了更高的 zIndex 属性，但我的工具提示出现在 plotLines 的下方。这是预期的行为吗，是否有解决方法？提前谢谢你。

图片

情节线 1:

    plotLines: [{
        value: 55,
        color: '#ff0000',
        width: 1,
        zIndex: 1001,
        label: {
            text: 'Demand',
            style: {
                fontSize: '11px'
            }
        }
    }]

情节线 2:

 chart.yAxis[0].addPlotLine({
    value: marge,
    zIndex: 1002,
    color: 'rgb(243,152,20)',
    dashStyle: 'solid',
    width: 1,
    label: {
        text: 'Market price: $' + marge + '/bbl'
    }
  });

工具提示:

 tooltip: {
    useHTML: true,
    zIndex:2005,
    formatter: function () {
        if (this.y != 0) {
            return '<b>' + this.series.name + '</b><br>Breakeaven : $' + this.y + '/bbl';
        } else {
            return false;
        }
    }
  },

Answer 1

这是使用愚蠢的 z-index 级别时发生的事情类型。 :)

将 plotLine 的 zIndex 设置为 4，而不为工具提示设置 zIndex 似乎工作正常:

• > http://jsfiddle.net/jlbriggs/6k1ookyn/2/

如果 4 不能涵盖您的所有场景...尝试 5 而不是 1000。

我认为导致这种情况的根本问题与 Highcharts 中的 zindex 范围有关 - z 索引是相对于每个元素所在的元素组，而不是相对于整个文档。 (据我记得过去的解释)