Highcharts plotband label zIndex

2023年11月25日 341次阅读

我正在尝试将一个plotBand放在轴刻度线下方,但它的标签位于它们上方.

由于标签继承了band的zIndex并且无法指定此属性,有没有办法在绘制图形后不需要我更改zIndex？

查看示例here,我希望标签出现在yAxis刻度线的前面.

我已经看到了一个潜在的解决方案here,但是想知道是否有更好的方法来实现它.

最佳答案 许多Highcharts似乎不支持开箱即用的zIndex属性,因为它使用SVG.
this question的回答是：

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

这就是.toFront()函数所做的事情,所以你可能会被困在那里.

我写了一个小片段,在图表的第一次渲染时将所有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的一个例子.让我知道这是否能实现你所需要的.

点赞