Highcharts 图带标签 zIndex答案

【问题标题】：Highcharts plotband label zIndexHighcharts 图带标签 zIndex
【发布时间】：2013-03-11 09:32:01
【问题描述】：

我试图在轴刻度下方放置一个plotBand，但它的标签位于它们上方。

由于标签继承了波段的 zIndex 并且无法指定此属性，有没有一种方法不需要我在绘制图形后更改 zIndex？

查看示例 here，我希望标签出现在 yAxis 刻度的前面。

我看到了一个潜在的解决方案here，但想知道是否有更好的方法来完成它。

【问题讨论】：

标签： highcharts

【解决方案1】：

很多 Highcharts 似乎不支持开箱即用的 zIndex 属性，因为它使用 SVG。 this question 的回答是：

“SVG 中的 Z 索引由元素在文档中出现的顺序定义。如果要将特定形状置于顶部，则必须更改元素顺序。”

这就是 .toFront() 函数的作用，所以你可能会被卡住。

我写了一个小 sn-p，它在图表第一次渲染时将所有 plotBand 的标签更新到前面：

Highcharts.Chart.prototype.firstRender = (function (func){
     return function(){
         func.apply(this, arguments);
         $.each(this.axes, function(){
             $.each(this.plotLinesAndBands, function(){
                 this.label.toFront(); 
             });
         });
         this.tooltip.label.toFront();
         this.seriesGroup.label.toFront();
     }
 } (Highcharts.Chart.prototype.firstRender));

这是JSFiddle 上的示例。让我知道这是否满足您的需求。

【讨论】：

感谢您的快速回复。我最终做了类似this 的操作，因为 toFront 方法使文本超出了数据和工具提示，这是不可取的。这个解决方法看起来如何？
这行得通，但是我不太确定您将拥有多少带有标签的绘图带，或者“3”是否总是一个理想的数字。我更新了我的解决方案以进行第一次渲染而不是重绘。老实说，这很可能取决于偏好，但如果您在代码顶部包含我的 sn-p，它将始终适用于所有图表（plotBand 标签始终位于前面），无需任何额外代码。
啊废话，没有看到你说的文本超出数据和工具提示的部分......让我看看是否有一个简单的解决方法。
这看起来不错，但是如果我确定要放置标签的 zIndex 与我提出的解决方案相比有什么优势吗？老实说，我认为我的看起来更简单，并且不会忽略我希望其 zIndex 高于绘图线和绘图带标签的其他元素。
就像我说的，这很可能取决于偏好。如果您知道适用于每个图表的 zIndex（如果您甚至有多个图表），那么您的解决方案可能更适合您。当我使用 highcharts 时，我会同时处理大量图表，并且倾向于倾向于不需要我拥有“逐个图表”代码的解决方案，但这就是我。