highcharts - ハイチャート プロットバンド ラベル zIndex

Question

軸の目盛りの下に配置しようとしていplotBandますが、そのラベルはそれらの上にあります。

ラベルはバンドの zIndex を継承し、この属性を指定する方法を提供しないため、グラフが描画された後に zIndex を変更する必要がない方法はありますか?

ここの例を参照してください。ここでは、ラベルを yAxis の目盛りの前に表示したいと考えています。

ここで潜在的な解決策を見てきましたが、それを達成するためのより良い方法があるかどうか疑問に思っていました.

Answer 1

Highcharts の多くは、SVG を使用しているため、そのままでは zIndex 属性をサポートしていないようです。この質問からの答えは次のように述べています。

「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の例を次に示します。これがあなたが必要とするものを達成するかどうか私に知らせてください。