工具提示显示在plotLine highcharts下

时间:2014-12-30 16:52:21

标签: javascript highcharts

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

不幸的是,尽管为工具提示设置了更高的zIndex属性,但我的工具提示在plotLines中显示为BENEATH。这是预期的行为,是否有解决方法?提前谢谢。

图片

Plotlines above tooltip

PlotLine 1:

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

PlotLine 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;
        }
    }
  },

1 个答案:

答案 0 :(得分:4)

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

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

如果4并未涵盖所有场景......请尝试5而不是1000。

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