dataLabel与renderer.rect与工具提示的Highcharts zIndex

我正在努力使我的图表元素按正确的Z顺序排列，特别是在启用了

useHTML

的情况下，我还通过

chart.renderer.rect（）添加了一个矩形。这在以下JSFIDLE中进行了说明：


我希望矩形位于主要图表特征（线条、标签）上方，工具提示位于矩形上方（即位于所有内容上方）。我设法让工具提示位于顶部（除了它周围的边距…如何修复它？），但数据标签位于矩形上方。。。我为矩形设置的zIndex似乎没有任何效果

JAVASCRIPT:

Highcharts.chart('container', {
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    tooltip: {
      useHTML: true,
      formatter: function () {
        return '<div class="tooltip">value: ' + this.y + '</div>';
      }
    },

    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                useHTML: true // need this to achieve the text formatting I want via appropriate html (not shown here)
            }
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]

}, function (chart) { // on complete

    chart.renderer.rect(100, 100, 100, 100, 5)
        .attr({
            'stroke-width': 2,
            stroke: 'red',
            fill: 'yellow',
            zIndex: 9998 // want this to be above chart features but below tooltip
        })
        .add();

});

HTML:

您可以使用方法来代替手动添加zIndex。矩形将绘制在线条和其他svg元素的上方。但是，使用HTML创建的数据标签将始终位于其他SVG元素之上（因为Highcharts v6.1.1工具提示可以绘制在HTML内容之上），正如您在Highcharts中看到的：

“它将始终放在所有其他SVG内容之上。
具体而言，工具提示可能呈现在useHTML标签下方。
由于Highcharts v6.1.1，可以通过设置tooltip.outside来避免这种情况
是真的。”

演示：
您可以使用方法来代替手动添加zIndex。矩形将绘制在线条和其他svg元素的上方。但是，使用HTML创建的数据标签将始终位于其他SVG元素之上（因为Highcharts v6.1.1工具提示可以绘制在HTML内容之上），正如您在Highcharts中看到的：

“它将始终放在所有其他SVG内容之上。
具体而言，工具提示可能呈现在useHTML标签下方。
由于Highcharts v6.1.1，可以通过设置tooltip.outside来避免这种情况
是真的。”

演示：
谢谢。嗯，数据标签总是出现在矩形的顶部，这真是太可惜了。既然可以使工具提示显示在标签顶部，我的直觉是，也可以（通过一些技巧）使矩形显示在标签顶部？为什么不呢？工具提示看起来很像一个矩形，里面有一些文字？也许可以添加一个基于html的矩形，比如工具提示？事实上，实际上我的矩形只是一个自定义文本框（里面有文本）。当我说“实际上我的矩形只是一个自定义文本框”时，我的意思是在我的实际代码（不是这个简单的示例）中，我将矩形添加到图表中，只是作为添加到图表中的一些自定义文本的良好背景。。。两者都使用
chart.renderer
。也许我做得不对，应该用html元素来添加这些自定义的“消息框”吗？如果是这样的话，需要弄清楚如何…添加带有背景的自定义文本的最佳方法就是使用Highcharts注释，而不是渲染器-。然后，当注释覆盖数据标签时，数据标签将不会被渲染。演示：。啊，注释看起来不错。。。有没有办法在图表中水平和/或垂直居中标注？谢谢。嗯，数据标签总是出现在矩形的顶部，这真是太可惜了。既然可以使工具提示显示在标签顶部，我的直觉是，也可以（通过一些技巧）使矩形显示在标签顶部？为什么不呢？工具提示看起来很像一个矩形，里面有一些文字？也许可以添加一个基于html的矩形，比如工具提示？事实上，实际上我的矩形只是一个自定义文本框（里面有文本）。当我说“实际上我的矩形只是一个自定义文本框”时，我的意思是在我的实际代码（不是这个简单的示例）中，我将矩形添加到图表中，只是作为添加到图表中的一些自定义文本的良好背景。。。两者都使用
chart.renderer
。也许我做得不对，应该用html元素来添加这些自定义的“消息框”吗？如果是这样的话，需要弄清楚如何…添加带有背景的自定义文本的最佳方法就是使用Highcharts注释，而不是渲染器-。然后，当注释覆盖数据标签时，数据标签将不会被渲染。演示：。啊，注释看起来不错。。。有没有办法使注释在图表中水平和/或垂直居中？
.highcharts-tooltip span {
    background-color: white;
    border: 1px solid green;
    opacity: 1;
    z-index: 9999;
}

.tooltip {
    padding: 5px;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

chart.renderer.rect(100, 100, 100, 100, 5)
   .attr({
     'stroke-width': 2,
     stroke: 'red',
     fill: 'yellow'
   })
   .add()
   .toFront();